📓 My Notebook — A Notebook-Themed Todo List

A premium, highly interactive, notebook-themed Todo List application built with Next.js 16 (App Router), React 19, Tailwind CSS v4, and MongoDB / Mongoose.

This application features a hand-crafted virtual notebook design that brings a cozy, tactile feeling to task management. From realistic paper lines and spiral rings to dynamic custom handwriting fonts and color-coded swatches, every detail has been thoughtfully designed.

---

✨ Features

• 📖 Virtual Notebook Aesthetics: Beautifully designed notebook page background complete with margin lines, spiral holes, and page numbers.
• 🎨 Color-coded Notes: Assign different ink colors (Red, Blue, Green, Purple, Orange) to your tasks to categorize or prioritize them.
• ✏️ Interactive Pencil Indicator: A mini-pencil animation that reacts when writing in the notebook inputs.
• 🧹 Erase Done Tasks: A quick click allows you to wipe out all completed tasks with a smooth animated transition.
• 📉 Real-Time Progress & Statistics: Live counters tracking active vs. completed tasks.
• 🫨 Smart Shake Animations: Form validations that visually shake the notepad to alert you if you attempt to add an empty task.
• ⚡ MongoDB Integration: Full API integration for persisting notes across reloads.
• 📄 Automatic Pagination: Spills over gracefully to multiple notebook pages depending on task counts.

---

🛠️ Tech Stack

• Framework: Next.js 16 (App Router)
• Frontend Library: React 19
• Styling: Tailwind CSS v4 & Vanilla CSS custom keyframes
• Database ORM: Mongoose 9
• Database: MongoDB
• HTTP Client: Axios

---

🚀 Getting Started

Follow these steps to run the project locally on your machine:

1. Prerequisites

Make sure you have Node.js installed (v18.x or above recommended).

2. Clone the Repository

git clone https://github.com/sanjayprajapat2008-lgtm/Todo.git
cd Todo

3. Install Dependencies

npm install

4. Setup Environment Variables

Create a file named .env.local in the root directory and add your MongoDB connection string:

MONGODB_URI="your_mongodb_connection_string"

5. Run the Development Server

npm run dev

Open http://localhost:3000 in your browser to see the result!

---

📂 Folder Structure

├── public/                 # Static assets
└── src/
    ├── app/
    │   ├── api/            # API Route handlers
    │   │   └── todos/      # CRUD endpoints for MongoDB
    │   ├── globals.css     # Notebook styling and animations
    │   ├── layout.js       # Global Next.js app shell
    │   └── page.js         # Notebook interface and client logic
    ├── lib/
    │   └── mongodb.js      # Cached MongoDB connection utility
    └── models/
        └── Todo.js         # Mongoose Schema for Notebook Tasks

---

🎨 Custom Design Details

Notebook Paper Lines

The notebook paper is dynamically rendered using linear CSS gradients:

background: linear-gradient(#e1e1e1 1px, transparent 1px);
background-size: 100% 2.2rem;

Strike-through Animation

Completing a task triggers a custom strike-through SVG animation that mimics actually crossing out an item with a pen.

---

📄 License

Distributed under the MIT License. See LICENSE for more information.