Dev_Notes : Secured on the cloud

Dev_Notes is a Notes App created using MERN Stack, to help users store their notes, and access it anywhere anytime.

---

Technologies Used:

Frontend:

• ReactJS
• Styling: [ Tailwind CSS, clsx, class-variance-authority, tailwind-merge, tailwindcss-animate ]
• UI: [ shadcn-ui, radix-ui, next-themes, react-hot-toast ]
• Validation: [ Typescript, zod, use-form ]
• Icons: [ lucide-react ]
• axios

Backend:

• NodeJS
• ExpressJs
• MongoDb
• mongoose
• bcryptjs
• jsonwebtoken

---

Getting Started with the Project

• Fork the Repository.
• Clone the Repository to your local Environment.

run `git init` in your project directory
run `git clone Your_Repository_Link` ex.=> `git clone https://github.com/YOUR_GITHUB_USERNAME/Dev_Notes.git`

• Run npm run init cpmmand in the root directory of the project (To install all the dependencies).
• Create a .env file in the "Backend" Folder.

JWT_SIGNATURE = YOUR_JWT_SECRET
MONGO_URI = YOUR_MONGO_DB_URL
FRONTEND_DEV = VITE_APP_URL ` http://localhost/3000 `
FRONTEND = YOUR_FRONTEND_WEBSITE_LINK (after deploying your frontend)

• Create a .env file in the "Frontend" Folder.

VITE_HOST = ` http://localhost:BACKEND_PORT `
In Development => ` http://localhost:5000 ` (default:5000)
In Production  => YOUR_BACKEND_WEBSITE_LINK (afer deploying your backend)

• Run npm run dev

Your App is live on YOUR_FRONTEND_PORT(3000) and server is running on YOUR_BACKEND_PORT(5000)

---

Update App according to you.

Run the following commands

• Setup:
  • git branch -M main
  • git remote add origin main
  • git checkout -m [new_update_branch_name]
• Update or Add any functionality...
• Add and commit Your changes:
  • git add .
  • git commit -m "YOUR_COMMIT_MESSAGE"
  • git push -u origin [new_update_branch_name]

You have Updated you Github Repository with these changes

---

Deploy the App

• Create an Accout on Vercel.com
• Connect your Github account
• Allow Your Repository access for vercel

Create Frontend

• On Dashboard click NEW_PROJECT
• Select your repository
• Connect your github repository
• Choose root directory as FRONTEND
• Override output direcory to build.

Add details:

Name : YOUR_APP_NAME
Branch : main
Root Directory : Frontend
publish directory : build

• click deploy.
• Copy your newly created WEBSITE_URL it will needed in next step.

Create Backend

• On Dashboard click NEW_PROJECT
• Select your repository
• Connect your github repository
• Choose root directory as BACKEND

Add details:
Name : YOUR_APP_NAME
Branch : main
Root Directory : BACKEND

**** Under Environment **** => create a environment variable

key   : FRONTEND, value : YOUR_FRONTEND_WEBSITE_URL (PASTE YOUR FRONTEND URL HERE),
key   : JWT_SIGNATURE, value : YOUR_JWT_SECRET,
key   : MONGO_URI, value : YOUR_MONGO_DB_URL,
key   : FRONTEND_DEV, value : ` http://localhost:3000 `

• click deploy
• Copy your WEBSITE_URL
• Go to dashboard and go to your frontend app
• Under Environment => add enviromnment=> create a environment variable

key: VITE_HOST;
value: YOUR_BACKEND_WEBSITE_URL;

---

Your website is live on your Frontend Website Link.