A high-performance notes application built using Next.js 15, MongoDB, and Clerk. This project features secure server-side authentication, type-safe data validation with Zod, and a polished UI using Shadcn UI.
🚀 Live Demo: notetdown-with-nextjs.vercel.app
- Secure Authentication: Managed via Clerk with middleware-protected routes.
- Server Actions: All CRUD operations handled on the server for better performance.
- Advanced Filtering: Instant filtering by category (Starred, Important, Normal).
- Smart Search: Title-based search with a dedicated toggle-reset state.
- Defensive UI: Robust loading guards and error handling to prevent runtime crashes.
- Modern Design: Responsive grid layout with hover effects and accessible modals.
| Layer | Tools |
|---|---|
| Framework | Next.js 15 (App Router) |
| Auth | Clerk Authentication |
| Database | MongoDB Atlas + Mongoose |
| Validation | Zod (Schema Validation) |
| Styling | Tailwind CSS + Shadcn UI |
| Deployment | Vercel |
root/
│
├── actions/ # Next.js Server Actions (CRUD And Search & Filter Logic)
├── app/ # Next.js App Router (Pages & Layouts)
│ ├── notes/ # Note gallery and dynamic routes
│ └── [id] # Route to Particular Note for Update or Delete Note
│ └── profile/ # User Profile
├── components/ # Shadcn UI & Custom Components
├── models/ # Mongoose Schemas (MongoDB)
└── lib/ # Shared utilities (DB connection, etc.)
Managed a dual-state system for the dashboard. The displayNotes state dynamically mirrors the allNotes master list during client-side resets, but switches to Server Action results during active searches. This ensures a zero-latency feel when clearing search terms.
All note creation and updates pass through a Zod schema before reaching the Mongoose model. This provides two layers of protection:
- Client-side: Instant feedback on empty titles or descriptions.
- Server-side: Strict type-safety to prevent malformed data from entering MongoDB.
The UI utilizes a "Master-Detail" pattern where the entire card is interactive. By implementing Event Propagation Control, the navigation logic is separated between the quick-view (Eye icon) and the full-page edit mode, ensuring a predictable user journey without redundant route triggers.
- Frontend & Backend: Unified deployment on Vercel utilizing Next.js Serverless Functions.
- Database: Hosted on MongoDB Atlas.
- Environment: Fully secured using Vercel environment variables for API keys and DB URI.
- Modern Full-Stack development with Next.js 15.
- Secure third-party authentication integration.
- Type-safe database modeling with Mongoose and Zod.
- Building stable, crash-proof UIs for asynchronous data.
Shivraj Maharaul