diff --git a/docs/Dependencies.md b/docs/Dependencies.md new file mode 100644 index 0000000..626458e --- /dev/null +++ b/docs/Dependencies.md @@ -0,0 +1,73 @@ +# Dependencies + +This document briefly explains the different dependencies located in the `package.json`. + +This document will not explain how to use them. You can read their documentation for that and the codebase have exemples for references. + + +# [React](https://reactjs.org/) + +Main framework to build the js application. + +It depends on Vite in order to build the project. + +Others dependencies: +- [react-dom](https://reactjs.org/docs/react-dom.html): library used to inject the app to `#root` html element. +- [react-svg-pan-zoom](https://www.npmjs.com/package/react-svg-pan-zoom): component that offers pan + zoom to a svg element + + +# [Vite](https://vitejs.dev/) + +Vite is the main tool to develop the react application. + +Its uses the following files to configure the project : +- `vite.config.ts` +- `.env*` +- `src/vite-env.d.ts` + +Others dependencies: +- @vitejs/plugin-react + + +# [Tailwind CSS](https://tailwindcss.com/) + +CSS framework designed around constraints with utility classes in order to reduce dead css code. + +Its uses the following files to configure the project : +- `src/index.scss` +- `tailwind.config.cjs` +- `postcss.config.cjs` + +Other dependencies: +- postcss +- sass +- autoprefixer + + +# [Heroicons](https://heroicons.com/) + +SVG Icons that can be used as JSX elements with Tailwind CSS + + +# Testing + +- [Vitest](https://vitest.dev/) +- [Testing Library](https://testing-library.com/) +- [jsdom](https://github.com/jsdom/jsdom) + + +# [eslint](https://eslint.org/) + +A Linter. Used for error checking, syntax checking and code style enforcing. + +Currently using `standard-with-typescript` with a few modification. + +See the `.eslintrc.cjs` for more informations. + +Other dependencies: +- typescript-eslint/eslint-plugin +- typescript-eslint/parser +- eslint-plugin-import +- eslint-plugin-n +- eslint-plugin-promise +- eslint-plugin-react diff --git a/docs/Project_Structure.md b/docs/Project_Structure.md new file mode 100644 index 0000000..890daf8 --- /dev/null +++ b/docs/Project_Structure.md @@ -0,0 +1,38 @@ +# Project Structure + +The project is structured this way + +``` +. +├── docs Documentation folder +├── public Public folder in which the index.html +│ import its resources +├── src Source folder for the react app +│ ├── assets Assets folder in which the react app +│ │ import its resources +│ ├── Components Components folder +│ ├── Enums Enums folder +│ ├── Interfaces Interface (+ types folder) +│ ├── test Setup folder for the tests +│ ├── tests Other tests + resources +│ ├── utils Utilities folder +│ ├── index.scss Tailwind CSS extends +│ ├── main.tsx Entrypoint for App injection +│ └── vite-env.d.ts Types for .env files +├── test-server Tests servers to test the API +│ ├── http.js Test server for bun.sh +│ └── node-http.js Test server for Node.js +├── azure-pipelines.yml Azure Pipelines YAML config file +├── index.html HTML Page +├── package-lock.json Describe the node_modules tree for npm +├── package.json Node.JS config file +├── pnpm-lock.yaml Describe the node_modules tree for pnpm +├── postcss.config.cjs Postcss config file for SCSS processing +├── README.md +├── tailwind.config.cjs Tailwind CSS config file +├── tsconfig.json Typescript config file +├── tsconfig.node.json Typescript config file for Node modules +├── vite.config.ts Vite config file +└── vitest.config.ts Vitest config file +``` +