This project was bootstrapped with Create Next App, using the TypeScript template.
- Node : 16.18.1
- Yarn : 1.22.19
- Next : 13.1.5
- Clone this repo
- Run
yarn install
Install the dependecies locally. - Run
yarn dev
Starts the app in development mode.
- Run
yarn build
Builds the app for production to thebuildfolder.
You can learn more in the NextJS Documentation.
- Design : Figma link
Key dependecies :
next-i18nZustandSASSAnt DesignCypress
Prettier + Lint rules are defined at the project's root.
All imports in the Next App should be absolute (with the src/ folder as the base for all imports). See tsconfig.json.
Services are used to group all the interractions between the front-end and the back-end. When using services functions, make sure you have a basic error handling mechanism set in place.
To simplify imports, when creating a new component, please add its reference in the components/index.ts file. After, you can easily import any component with :
import { Component } from 'components'
The same should apply to pages, utilities functions and services.
i18n is used to handle all the translations of the app. The basic setup is done in src/next-i18next.config.js.
The locales files (containing the actual translations) are stored in the public/locales/{"en"|"fr"}/common.json.
To access the translations in the React App, see the useTranslation hook documentation.
There is a component (<IntlBtn>) already implemented to handle the switch between languages. It also changes the locales for dayjs and Ant Design.
Zustand is used to handle the data in the store. You cand find more information on their documentation
The store is configured in the src/store/{slice}.ts file. Each slice handle a specific data key in the store (UserSlice = state.user). See the configuration file and the documentation for more informations.
Insted of implementing a validation logic for each form, please refer to Ant Design's Form Component.
The src/assets/ folder contains all the assets for the app :
- Images
- Scripts
- Styles