You can start editing the page by modifying src/pages/index.tsx. The page auto-updates as you edit the file.
The src/pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.
Environment Variables
Add a file named .env at the root directory. Copy the .env code from Frontend ENV ticket on notion(Get notion access permission from the development group) and paste it in .env. You can refer to the .env.example file in the directory and repo.
Run Single Test With Watching And Display Coverage
$ npm run test filename --watch --coverage
Project structure
$PROJECT_ROOT
│ # run some command when you commit
├── husky
│ # end-to-end testing
├── cypress
│ #icon
├── public
│
├── src
│ │ # all unit tests
│ ├── tests
│ │ # all images
│ ├── assets
│ │ # react component files
│ ├── components
│ │ # Page layout
│ ├── layouts
│ │ # Page files
│ ├── pages
│ │ # redux(store,reducer,action)
│ ├── store
│ │ # chakra config
│ ├── styles
│ │ # tools
│ ├── utils
Project Tech Stack
Front-end
• Node Version: v16.14
• Framework: Next.js (The React version we are using is 17)
• Scripting Language: Typescript
• 2D Canvas: Konva
• State-Management: Redux-toolkit
• Styling: Chakra-UI, Styled-component
• ApiClient: Axios
• Testing: Jest, React-testing-library
• React Hooks Testing Library
• Code Control: Eslint, Prettier
• Git Hook: Husky，commitlint, lint-staged
Recommended Plugins
Visual Studio Code Editor:
Code Spell Checker : A basic spell checker that works well with camelCase code.
Gitlens: GitLens simply helps you better understand code. Quickly glimpse into whom, why, and when a line or code block was changed.
Prettier: Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
vscode-icons(optional): Manage pull requests and conduct code reviews in your IDE with full source-tree context. Comment on any line, not just the diffs. Use jump-to-definition, your favorite keybindings, and code intelligence with more of your workflow.
Chrome Extensions
React Developer Tools : React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows you to inspect the React component hierarchies in the Chrome Developer Tools
Wappalyzer : Find out the technology stack of any website.
We put our ticket board and other important information in the notion board. Please advise our BA to get access to it.
Code of Conduct 📋
1. Creating New Branches
Warning:heavy_exclamation_mark::cop:: No one was allowed to manipulate main branch directly in any way and for any reason. When you get a new ticket and plan to start your work, please create a new branch then start coding.
You can create a pull request to make your work able to be reviewed and tested by team and get your code merged after getting enough approvals.
Branch Name Example: "feature/cc-0027-a-user-can-view-pro-full-court"
Please format your code before submitting your work.
Frequent Issue Solutions:pill:
If you find any issues which block you when your are working, please check this list or search on the Internet 🔍 to look for potential solutions. Don't worry if you cannot find it 😆 , just put your questions in the group chat and discuss with our team members and tutors. We will try our best to help you fix it 🎓 .
Why cannot I start the server?
Read the "Getting Started" section in this document again to make sure your input is correct.
We are using "npm" to manage the packages. If you are using "yarn" instead, please install "npm" and use "npm" in this project.
Please make sure you have the correct .env file in your root directory.
Please make sure you have run "npm i" every time before you are trying to run the project especially after you have pulled others' work from other branches.
Use node -v to check whether your node version is 16. If you are curious about how to have multiple versions in your computer, you may be interested about this 👉 Manage multiple node versions for Mac users:apple:
Why cannot I commit my work?
Please check whether you followed the correct work flow to commit your work. Git Guide About Commit
Please make sure you have the correct .env file in your root directory.
Please make sure your commit message is in correct format. You can check the "Commit Message" section in this document or here.
SWC issue: if you met exceptions about SWC when you are trying to commit your work especially you are using M1 MacBook, please check the following steps to fix it:
1. Delete node_modules and package-lock.json. 2. Run npm i -f in your terminal. 3. Use the package-lock.json existing on the main branch which works perfectly fine to replace the package-lock.json in your directory. 4. Run npm run pre-commit to check if you have fixed it.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent