Gauzy ⚗️ Frontend

Description

This is a basic frontend template project to use as starting point to build something or to just test stuff. It has been done in a reasonably transparent way to see how everything works under the hood and to allow to configure the necessary.

The tech stack is:

Instructions

To work on it, you can fork, clone, or generate a repo from this template, and download it into your computer.

To initialize the project you have two options:

Install Node.js, then, run npm ci to install the required dependencies, and run npm run start to start a local development server.
Run docker-compose up to initialize it with Docker. To use Husky, you'll need to install Node.js.

To create a production build, run npm run build, and to serve it, run npm run serve.

Project structure

Once the dependendencies have been installed, the project structure is:

.
├── node_modules
│    └── (many stuff)
├── src
│    ├── components
│    ├── constants
│    ├── views
│    ├── App.tsx
│    ├── index.html
│    └── index.tsx
├── .babelrc.json
├── .dockerignore
├── .eslintrc.json
├── .gitignore
├── .prettierrc.json
├── docker-compose.yml
├── Dockerfile
├── global.d.ts
├── jest.config.js
├── jest.setup.js
├── LICENSE
├── package-lock.json
├── package.json
├── README.md
├── tsconfig.json
└── webpack.config.js

Files information

/node_modules: This directory contains all of the modules of code (npm packages) that the project depends on.
/src: This directory contains all of the app's source code.
- /components: This folder contains files that represent reusable UI pieces.
- /constants: This folder contains files that represent constant values used by components.
- /views: This folder contains the views of the application, which are larger components made up of smaller components.
- App.tsx: This is the root component that contains all other components and views.
- index.html: This is the template HTML file that will contain the React app.
- index.tsx: This component defines where in the index.html template the App.tsx component is placed and rendered.
.babelrc.json: A configuration file for Babel, a JavaScript compiler.
.dockerignore: A file that tells Docker which files it should not include in a image.
.eslintrc.json: A configuration file for ESLint, a linting utility for JavaScript, TypeScript, and React.
.gitignore: A file that tells Git which files it should not track / not maintain a version history for.
.prettierrc.json: A configuration file for Prettier, a code formatter.
docker-compose.yml: A file that defines the Docker services to run and its configuration.

Dockerfile: A file that specifies the instructions to build a Docker image.

global.d.ts: A file that declares special modules that are used in the project to TypeScript.
jest.config.js: A configuration file for Jest, a JavaScript testing framework.
jest.setup.js: A setup file for Jest, a JavaScript testing framework.
LICENSE: The license under which this repository is released.
package-lock.json: An automatically generated file based on the exact versions of the npm dependencies that were installed for the project. (Don’t change this file directly).
package.json: A file which includes things like the project’s name, author, dependencies, etc. This file is how yarn/npm knows which packages to install for the project.
README.md: A file containing information about the project.
tsconfig.json: A configuration file for TypeScript, a typed superset of JavaScript that compiles to plain JavaScript.
webpack.config.js: A configuration file for webpack, a static module bundler for JavaScript applications.

Contributing

Feel free to contribute if you think something can be improved in any way.

Happy coding ⚡

M1M0G / gauzy-frontend