Standart Operating Procedure

This document includes all standaer operating procedure for Front End Developers for works.

Project File Structure

Folder Name	Description
public	For font configuration, robot.txt and sitemap.xml
src/assets	This folder stores frequently used images
src/elements	Stores small components that are often used in projects
src/examples	Contains unused old functions/components but as a future reference
src/json	For example json response from the backend
src/pages	Contains the main page of the project
src/parts	Stores the children parts of the pages
src/store	For Redux
src/type	Folder for defining frequently used prop types
src/utils	For functions that are frequently used in projects
styles	The project style file

Development Basic Rules

• Preferably using typescript.
• Files have no maximum lines, but try to make the code simple and easy to understand.
• We suggest functions created no more than 60 lines, except for components.
  • If it's a long function, make it separate in one file.
• If the logic state can be separated from the tsx component file to prevent long component functions, use custom hooks.
• Naming the hooks function useFunctionName.ts.
• Components do not need subfolders unless there are more than 7 files
• Follow google code conventions (no need to read in detail).
• Avoid writing unnecessary comments.
• Remove writing console.log() for deployed production.
• Avoid importing unused libraries or components.
• It is recommended to:
  • use the useFetchUmum or useFetchTrigger function to retrieve data from the API.
  • use the fetchServerSide function to retrieve data from the API on the SSR component.
  • use the usePostUmumV2 function to send data via API.
  • use the asynchronous function.
  • use the Image component of next/image.
  • use .scss for styling, to minimize the use of other css frameworks.
• Create a .scss file in the styles folder, follow the existing structure.

Deployment Basic Rules

• Project git is based on a guide with some modifications
• The main branch is production
  • For the arkademi-frontend-next-v2 repository, the production branch is master
• The dev branch is staging
• For big projects, create a new branch under the name of the project
• For bug fixing use the bug-fix branch
• Not recommend to push/merge the dev branch to main/master
• For big projects do the push/merge to dev first, if it has passed the QA process, push/merge the project to main from the project branch (not from the dev branch)
• We recommend you to pull the main/master to make it up to date, before pushing to main/master
• It is a mandatory to change the version everytime you deploy.
  • For production, change aws/prod-next-frontend-task-definition.json file
  • For staging, change stag-next-fontend-task-definition.json
  • And change .gitlab-ci.yml dedicated to both deployment
• The deployment of the production environment (master) for the arkademi-frontend-next-v2 repository involves various changes due to the new deployment approach (Blue Green method). These changes include:
  • Change the version in aws/prod-fe-bg-task-definition.json, .gitlab-ci.yml, and package.json
  • Change the number in aws/appspec.yaml
• If you are going to push/merge the project to main/master (prod) for the first time use the additional flag --no-ff.
• If the project is safe in production, the project branch can be deleted.

API Projects

Regular Production

~	Url
1	https://api-gateway.arkademi.com
2	https://apidev3.arkademi.com
3	https://api-course.arkademi.com
4	https://api-member.arkademi.com
5	https://api-orders.arkademi.com

Regular Staging

~	Url
1	http://apigateway.arkademi.com
2	http://apidev2.arkademi.com
3	http://apicourse2.arkademi.com
4	http://apimember2.arkademi.com
5	http://apiorders2.arkademi.com

Prakerja Production

~	Url
1	https://prakerja-api-course.arkademi.com
2	https://prakerja-api-member.arkademi.com
3	https://prakerja-api-orders.arkademi.com

Prakerja Staging

~	Url
1	https://stag-prakerja-apicourse-fgt.arkademi.com
2	https://stag-prakerja-apimember-fgt.arkademi.com
3	https://stag-prakerja-apiorders-fgt.arkademi.com

Projects Repository

Arkademi Reguler

Development Tools:

Programming Language	- Javascript - Typescript
Framework	Next.js (12.2.0)
Runtime Environment	Node.js (min 14.21.3)

Link Details:

Detail	Url
Domain Production	https://arkademi.com
Domain Staging	https://staging.arkademi.com
Repository	https://gitlab.com/arkademi/arkademi-frontend-next-v2

Arkademi Course Status Reguler

Development Tools:

Programming Language	- Javascript - Typescript
Framework	React.js (18.2.0)
Runtime Environment	Node.js (min 14.21.3)

Link Details:

Detail	Url
Domain Production	https://belajar.arkademi.com/
Domain Staging	https://stag-belajar.arkademi.com
Repository	https://gitlab.com/arkademi/arkademi-frontend-course-status

Arkademi Prakerja Webinar

Development Tools:

Programming Language	- Javascript - Typescript
Framework	React.js (18.2.0)
Runtime Environment	Node.js (min 14.21.3)

Link Details:

Detail	Url
Domain Production	https://prakerja.arkademi.com
Domain Staging	https://staging-prakerja.arkademi.com
Repository	https://gitlab.com/arkademi/arkademi-frontend-prakerja-v2

Arkademi Corporate Learning

Development Tools:

Programming Language	- Javascript - Typescript
Framework	React.js (18.2.0)
Runtime Environment	Node.js (min 14.21.3)

Link Details:

Detail	Url
Domain Production	https://team.arkademi.com
Domain Staging	https://admin-b2b-ui-revamp.arkademi-admin-panel-b2b.pages.dev
Domain Staging Golang	https://arkademi-admin-panel-b2b.pages.dev
Repository	https://gitlab.com/arkademi/arkademi-admin-panel-b2b

Arkademi Admin Panel Reguler

Development Tools:

Programming Language	- Javascript - Typescript - PHP (8.0.2)
Framework	- React.js (18.1.0) - Laravel (9.11)
Runtime Environment	Node.js (min 14.21.3)

Link Details:

Detail	Url
Domain Production	https://admin.arkd.me
Domain Staging	https://admin-staging.arkd.me
Repository	https://gitlab.com/arkademi/admin-panel-v2

Arkademi Admin Panel Prakerja

Development Tools:

Programming Language	- Javascript - Typescript - PHP (8.0.2)
Framework	- React.js (18.1.0) - Laravel (9.11)
Runtime Environment	Node.js (min 14.21.3)

Link Details:

Detail	Url
Domain Production	https://admin-prakerja.arkd.me
Domain Staging	https://admin-stag-prakerja.arkd.me
Repository	https://gitlab.com/arkademi/admin-panel-v2-prakerja

---

Source : SOP Frontend