A clean, full-screen sticky-notes app built with React + Vite.
Your notes survive page refreshes. Your theme preference too.
| Feature | Details |
|---|---|
| ✏️ Add / Edit / Delete | Full CRUD for your notes |
| 🎨 Colorful Cards | 6 pastel colors auto-assigned per note |
| 🌙☀️ Dark / Light Mode | Toggle with one click, remembered across sessions |
| 💾 localStorage | Notes and theme persist after page refresh |
| 📐 Fit-to-screen layout | Sidebar form + scrollable notes grid, no overflow |
| ⚡ Instant updates | Powered by Vite HMR in development |
- React 19 — UI & state management
- Vite 8 — blazing-fast dev server & bundler
- Tailwind CSS v4 — utility-first base styles
- Custom CSS — premium dark/light theme, animations, glassmorphism
- localStorage API — client-side persistence
- GitHub Actions — automated CI/CD deployment
# Clone the repo
git clone https://github.com/KanakReshi/notes-app.git
cd notes-app
# Install dependencies
npm install
# Start dev server
npm run devOpen http://localhost:5173 in your browser.
npm run buildOutput is in the dist/ folder. Deployed automatically to GitHub Pages on every push to main via GitHub Actions.
notes-app/
├── public/
├── src/
│ ├── App.jsx # Main component — state, logic, JSX
│ ├── App.css # Custom premium styling & theme system
│ ├── index.css # Tailwind import + Google Fonts
│ └── main.jsx # React entry point
├── .github/
│ └── workflows/
│ └── deploy.yml # GitHub Actions CI/CD
├── vite.config.js
└── package.json
MIT — feel free to use, fork, and build on it.
Made with ❤️ by KanakReshi