Notely 📝

Full-Stack Notes App student project to demonstrate full-stack development, deployment, and real-world problem-solving.

Project Overview

Notely is a modern, responsive note-taking application where users can:

• Create, read, update, and delete notes (CRUD operations)
• Store notes securely with a MongoDB backend
• Experience a smooth, fast, SPA interface powered by React and Vite

This project highlights full-stack development, deployment pipelines, and production-ready practices.

Tech Stack

Layer	Technology	Purpose
Frontend	React (Vite), Tailwind CSS, DaisyUI	Responsive SPA UI
Backend	Node.js, Express	RESTful API
Database	MongoDB	Persistent note storage
Caching / Rate-limiting	Redis / Upstash	Protects backend from abuse
Deployment	Netlify (frontend), Render (backend)	Production-ready hosting
Dev Tools	Git, GitHub, Vite	Version control & build system

Features

• Fully functional CRUD notes app
• SPA routing with Netlify _redirects support
• Environment-specific API integration (.env variables)
• CORS-enabled backend for safe frontend-backend communication
• Production-ready frontend build optimizations
• Responsive, mobile-friendly UI using Tailwind + DaisyUI themes

Live Demo

• Frontend (Netlify): https://notelynotes.netlify.app
• Backend API (Render): https://thinkboard-dffj.onrender.com/api/notes

⚠️ Open frontend link for full app experience. Render backend alone won’t display the UI.

Setup / Run Locally

1. Clone the repo:

git clone https://github.com/varnika070/notely.git
cd notely
Setup backend:

bash
Copy code
cd BACKEND
npm install
touch .env
# Add:
PORT=5001
MONGO_URI=<your MongoDB URI>
Setup frontend:

bash
Copy code
cd ../FRONTEND/vite-project
npm install
touch .env
# Add:
VITE_API_URL=http://localhost:5001
Run locally:

bash
Copy code
# Backend
npm run start --prefix BACKEND
# Frontend
npm run dev --prefix FRONTEND/vite-project
Visit http://localhost:5173 to use Notely locally.

Future Enhancements
User authentication & private notes

Tagging, search, and filters

Dark mode toggle

Push notifications & offline support

Learning Outcomes
Mastered full-stack development workflow

Learned deployment best practices for SPA + API

Improved problem-solving skills with production issues

Gained experience with environment variables, CORS, and API integration