😄 E-Notes is a React website o keep your daily notes and easy access provided to them 😄

❤️ Visit the website and try it once https://enotes-ui.aggarwalsejal.com/ ❤️

📑 What’s In This Document

• Pre-requisite to run React
• How I create Backend for this project and connect it
• How to create your React App
• Script require to run the project
• Where to see the running project React Packages Used
• React Packages Used

👉 Pre-requisite to run React

Install Node.js and npm on the local machine. Use this documentation for info and setup steps.

MongoDB set up, if have not done work on MongoDB read this documentation to make yourself familiar with MongoDB

Have info about API calls, I have used Thunderclient pretty similar to Podtman to create the API calls for this project. Thunderclient is built in VS code so seems easy to use, read this doc for more info

📜 How I create a Backend for this project and connect it

I don’t use localhost for MongoDB, I just Altas MongoDB for storing the data in this project, use this to set up the DB and use in the project.

Have created API call using the Thunderclient to store and fetch the data

🚀 How to create your React App

1️⃣ Create a folder for React Project

2️⃣ Open IDE for that folder

3️⃣ Run the ⬇️ command in terminal

npx create-react-app my-app

cd my-app

npm start

Read this documentation for more details

🔖 Script require to run the project

For Bootstrap, add Script for Javascript and CSS

In the project directory, you have the following scripts to run:

"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"both": "concurrently \"react-scripts start\" \"npx nodemon backend/index.js\""

Both are required to run the backend and frontend simultaneously

npm start

Runs the app in the development mode. The page will reload when you make changes. You may also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode. See the section about running tests for more information.

npm run build

Builds the app for production to build folder. It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes. Your app is ready to be deployed! See the section about deployment for more information.

npm run both

BOTH is required to run backend and frontend simultaneously
  * Backend : npx nodemon backend/index.js
  * Frontend : react-scripts start

👀 Where to see the running project

Open http://localhost:3000 to view it in your browser. For more details, use this link

💥 React Packages Used

Backend packages to install:

"cors": "^2.8.5",
"express": "^4.18.2",
"express-validator": "^7.0.1",
"mongoose": "^6.10.0"

To read more about,

    express package, follow this link
    express-validator package, follow this link
    mongoose package, follow this link

Frontend packages to install:

"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"bcrypt": "^5.1.0",
"bcryptjs": "^2.4.3",
"concurrently": "^8.2.0",
"cors": "^2.8.5",
"jsonwebtoken": "^9.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.14.2",
"react-scripts": "5.0.1",
"react-toastify": "^9.1.3",
"web-vitals": "^2.1.4"

To read more about,
    react-router-dom package, follow this link
    bcryptjs package, follow this link
    concurrently package, follow this link
    cors package, follow this link
    jsonwebtoken package, follow this link
    react-toastify package, follow this link