NoteHub

I present to you the last full stack project that I realized in a few days during my training at the Wild Code School in July 2023 after 5 months of intensive training. I made this project in React JS for the frontend and Express for the backend.

Concept

NoteHub is an application that makes your life easier, like Google Keep but in a girly version, you can write down everything that comes to mind and sort your notes by category.

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

Configuration

Create .env files in /frontend and /backend following .env.sample examples.

Use

• Run frontend and backend server together : npm run dev
• Express server will be accessible at the address set in the .env of the frontend
• React frontend will be accessible at the address set in the .env of the backend

👉 To try NoteHub, you can create an account and log in 👈

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

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