frontend/README.md (view raw)
1This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with pre-configured tools for Octree.
2
3## Install
4
5```bash
6git clone https://git.octree.ch/p/next-octree.git frontend
7cd frontend
8rm -rf .git
9yarn
10```
11
12## Getting Started
13
14First, run the development server:
15
16```bash
17yarn dev
18```
19
20Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
21
22You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
23
24## Tools
25
26This template lies on a few tools:
27
28- [Typescript](https://www.typescriptlang.org/): Set Javascript as a typed language
29- [Apollo Client](https://www.apollographql.com/docs/react/): Used for GraphQL communications with the server
30- [Material UI](https://material-ui.com/): Design template for Material interfaces
31- [Zustand](https://github.com/pmndrs/zustand): Global state manager
32- [GraphQL Codegen](https://graphql-code-generator.com/): Generate Apollo hooks and Typescript types from GraphQL schemas
33
34## Organization
35
36Some folders are created to propose the following organization:
37
38```
39components/ # Atomic recurring components
40 DatePicker/
41 index.tsx
42 ...
43containers/ # UI area composed of components
44 Menu/
45 index.tsx
46 ...
47graphql/ # GraphQL files used by GraphQL codegen to generate Apollo hooks
48 orders.graphql
49 ...
50hooks/ # React hooks
51 useLoginForm.tsx
52 ...
53layouts/ # Meta-components used by pages
54 default.tsx
55 ...
56lib/ # Logic bricks
57 apolloClient.tsx # Apollo Client configuration
58 ...
59pages/ # Page (NextJS routes)
60 _app.tsx # Main React component
61 _document.tsx # Configuration for every pages
62 index.tsx # Index page, entrypoint for the app
63 login.tsx # Login page
64public/ # Static assets
65 favicon.ico
66 ...
67stores/ # Global states managed with Zustand
68 useAuth.tsx
69 ...
70codegen.yml # GraphQL Codegen configuration
71next-env.d.ts # Global Typescript types
72next.config.js # NextJS configuration (with proxy for GraphQL endpoint)
73theme.js # Material UI custom theme definition
74tsconfig.json # Typescript configuration
75.gitignore
76package.json
77package-lock.json
78README.md
79```
80
81## Standalone
82
83This is pre-configured to be installed in a repo with a backend code as parent with React and React DOM (Strapi). If you want to install it out of a Strapi installation, you need to remove `peerDependencies` in `package.json` and add `react` and `react-dom` to `dependencies` modules.
84
85## Add new language
86
87- Add JSON file with locales in `frontend/locales`
88- Import corresponding moment locales in `frontend/hooks/useLocale.ts`
89- Add language key to `locales` field in `frontend/next-i18next.config.js`
90- Add language key to `lang` field in `backend/src/api/event/content-types/event/schema.json`
91- Add language key to `lang` field in `backend/src/extensions/users-permissions/content-types/user/schema.json`
92- Add `PROTECTED.languages.<lang>: <Lang label>` in `frontend/locales/en.json` (See existing keys)
93- (Re)start backend and run `yarn gql` from frontend directory