Simple Note Web App

This is simple Note app that can make your life easier, (I thought so 😝)

Table of contents

• Screenshots
• Features
• Usage

Screenshots

Features

• Sign Up
• Log In
• CRUD Notes

Tech Stack

Client:

Server:

Setup Mongo

Before We use this app, we need to setup mongoo. if You dont have mongodb account, you need to make one (if you dont know how to make it, google it.) okay ,now we need to log in to the MongoDB

after log in to mongodb

• Add the current IP address to the whitelist.
• Create a new database by clicking on "Build a Database."
• Choose a hosting option (For this project, I'm selecting the free one).
• Select the cloud provider (I'm choosing AWS).
• Choose the region closest to your location.
• Select the cluster tier (Mine: M0 Sandbox).
• Enable protection.
• Rename the cluster with a desired name.
• Create a username and password and make sure to remember them.
• Click on the "Finish & Close" button.

On your database, click the 'Connect' button, and then choose the driver.
Copy the environment variable that we will need in the backend code.
It should look like this.

mongodb+srv://<username>:<password>@cluster0.buuz3c8.mongodb.net/
?retryWrites=true&w=majority

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

MONGO_CONNECTION Fill with Environment that we get before

PORT I'm use 5000

SESSION_SECRET Fill with your desire word

Run Locally

Clone the project

  git clone https://github.com/ocitocit/MERN-NotesApp.git

Go to the BackEnd project directory

  cd MERN-NotesApp/backend

Install dependencies on BackEnd

  npm install

Go to the FrontEnd project directory

  cd ../frontend

Install dependencies on FrontEnd

  yarn

go back to backend dir Start the BackEnd server

  npm start

go back to frontend dir Start the FrontEnd server

  yarn dev

Lessons Learned

• I learned to use Node while working on this project, managing errors for the APIs that I created.
• It's difficult to deploy MERN. I've been searching for ways to deploy it for free, but haven't found any. If you know how to deploy it for free, please let me know. For my next project, I'll be creating a full stack app with Next.js to make deployment easier.

Credit

Thanks to @codinginflow for teaching me how to create this project.