La Perle Rare

"Books of which you are the hero" type project The premise, your actions determine the story.

Realize within the framework of the last checkpoint with the Wild Code School of Reims. Taking up everything we learned during the 5 months of training (February - July 20223). Individual realization in 2 days in July 2023.

Concept

This template is meant to serve as a foundation for every P2/P3 following the React-Express-MySQL stack, as learned in Wild Code School. It's pre-configured with a set of tools which'll help students produce industry-quality and easier-to-maintain code, while staying as simple as possible to use.

Setup & Use

Windows users

Be sure to run these commands in a git terminal to avoid issues with newline formats:

git config --global core.eol lf
git config --global core.autocrlf false

Project Initialization

• In VSCode, install plugins Prettier - Code formatter and ESLint and configure them
• Clone this repo, enter it
• If you are using yarn or pnpm, adapt the config/cli in package.json
• Run command npm install
• NB: To launch the backend server, you'll need an environment file with database credentials. You'll find a template one in backend/.env.sample

Available Commands

• migrate : Run the database migration script
• dev : Starts both servers (frontend + backend) in one terminal
• dev-front : Starts the React frontend server
• dev-back : Starts the Express backend server
• lint : Runs validation tools, and refuses unclean code (will be executed on every commit)
• fix : Fixes linter errors (run it if lint growls on your code !)

FAQ

Tools

• Concurrently : Allows for several commands to run concurrently in the same CLI
• Husky : Allows to execute specific commands that trigger on git events
• Vite : Alternative to Create-React-App, packaging less tools for a more fluid experience
• ESLint : "Quality of code" tool, ensures chosen rules will be enforced
• Prettier : "Quality of code" tool as well, focuses on the styleguide
• _ Airbnb Standard_ : One of the most known "standards", even though it's not officially linked to ES/JS
• Nodemon : Allows to restart the server everytime a .js file is udated

Deployment

For deployment, you have to go to secrets → app actions on the github repo to insert via New repository secret :

• CAPROVER_BACK_APPNAME : name app on caprover
• CAPROVER_FRONT_APPNAME : name app on caprover
• CAPROVER_PASSWORD : password caprover
• CAPROVER_SERVER : link of domain