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.