A beautiful, minimalist task management application built with modern web technologies.
- Full CRUD Operations - Create, read, update, and delete tasks seamlessly
- Dark/Light Theme - System-aware theme switching with smooth transitions
- Priority Levels - Organize tasks by high, medium, or low priority with visual indicators
- Responsive Design - Beautiful UI that works flawlessly on all devices
- Real-time Updates - Instant synchronization powered by TanStack Query
- Smart Filtering - View all, active, or completed tasks with one click
- Persistent Storage - All your tasks saved securely with MongoDB
- Smooth Animations - Delightful micro-interactions throughout the app
- Accessible - Built with accessibility best practices
- Next.js 15 - React framework with App Router
- React 19 - UI library with latest features
- TailwindCSS - Utility-first CSS framework
- shadcn/ui - Beautiful, accessible component library
- Lucide Icons - Elegant icon set
- Zustand - Lightweight state management
- TanStack Query - Server state & caching
- React Hook Form - Performant form management
- Zod - TypeScript-first schema validation
- Sonner - Toast notifications
- Geist Font - Beautiful typography
- Node.js 18+ installed
- MongoDB database (local or cloud)
- npm, yarn, or pnpm package manager
-
Clone the repository
git clone https://github.com/yourusername/todo-app.git cd todo-app -
Install dependencies
npm install # or yarn install # or pnpm install
-
Set up environment variables
Create a
.env.localfile in the root directory:MONGODB_URI=your_mongodb_connection_string
-
Run the development server
npm run dev # or yarn dev # or pnpm dev
-
Open your browser
Navigate to http://localhost:3000
todo-app/
├── actions/ # Server actions
│ └── todo-actions.js # CRUD operations
├── app/ # Next.js app directory
│ ├── globals.css # Global styles
│ ├── layout.js # Root layout
│ └── page.js # Home page
├── components/ # React components
│ ├── providers/ # Context providers
│ ├── ui/ # shadcn/ui components
│ ├── theme-toggle.jsx # Theme switcher
│ ├── todo-filter.jsx # Filter controls
│ ├── todo-form.js # Task creation form
│ ├── todo-item.jsx # Individual task card
│ └── todo-list.jsx # Task list container
├── hooks/ # Custom React hooks
│ └── use-create-todo.js
├── lib/ # Utility functions
│ ├── db.js # MongoDB connection
│ └── utils.js # Helper functions
├── model/ # Mongoose models
│ └── todo.js # Todo schema
├── store/ # Zustand store
│ └── todo-store.js # Global state
└── validations/ # Zod schemas
└── todo.js # Todo validation
- Create Tasks: Add new tasks with title, description, and priority level
- Edit Tasks: Update task details (coming soon)
- Complete Tasks: Mark tasks as done with satisfying animations
- Delete Tasks: Remove tasks with smooth transitions
- Filter Tasks: View all, active, or completed tasks instantly
- High Priority: For urgent and important tasks
- Medium Priority: For standard tasks
- Low Priority: For tasks that can wait
- Light Mode: Clean and bright interface
- Dark Mode: Easy on the eyes for extended use
- System Sync: Automatically matches your system preferences
- Persistent: Your theme choice is saved
| Variable | Description | Required |
|---|---|---|
MONGODB_URI |
MongoDB connection string | Yes |
npm run build
npm run startContributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Design inspiration from modern task management apps
- Built with amazing open-source tools and libraries
- Icons by Lucide
- UI components by shadcn/ui
Built with Next.js and React