Concept 📝

(In progress, still working on it...)

This template is mostly made for beginners in order to start simple react project faster. It's pre-configured with a minimal set of simple tools.
I strongly recommand you explore those differents tools repo and/or website so you can learn how to use them to their best.

For the backend, you'll find a SQL branch _{^{( MySQL )}} and a NoSQL one _{^{( MongoDB )}}.

You'll find all instructions and links below.

Project Initialization

• In VSCode, install plugins Prettier - Code formatter and ESLint and configure them.
• Clone this repo, enter it.
• If you do not need a backend setup simply run npm install from the root directory and skip the following two steps.
• Use git checkout mysql OR git checkout mongodb to access the setup you need.
• Run command npm install 🚨 from root directory 🚨.
• Create environment files (.env) in both backend and frontend: you can copy .env.sample files as starters.
• Run command npm run dev 🚨 from root directory 🚨.
• Delete .git and initialize a new one (see below).

Tools 🛠️

• Vite
• Express
• Nodemon
• Dotenv
• React-router-dom
• MySQL2 OR Mongoose
• Sass
• Concurrently
• Husky 🐶
• Eslint

Frontend

What you'll find :

• Clean App.jsx
  • including homepage route using react-router-dom
• App.scss reset
• Custom Sass properties & utilities .styles/_utilities.scss
  • Sass is included in this project. If you want to use vscode extension like Live Sass Compiler, or don't use it at all, feel free to npm uninstall sass.
  • .gitignore containing **.css.map _{^{( in case of vscode extension )}}
• pages, components, styles & hooks directories.

Backend

• server.js including express app, basic routes & middlewares.
• routes directory.

Git

Delete GIT 💣

• rm -r .git

(chmod -R +w . might be necessary)

Init GIT 🚀

1. git init -b main
2. git add .
3. git commit -m (<YOUR_MESSAGE_HERE>)

Reset Remote Repository

Managing remote repositories

Adding locally hosted code to GitHub

1. git remote add origin <NEW_REMOTE_URL>

2. git remote -v

should show 👉 origin <NEW_REMOTE_URL> (fetch)
should show 👉 <NEW_REMOTE_URL> (push)

3. git push -u origin main

Check this amazing tuto, on Git & Github.