excellent-ui

🚀 Animated Todo App

A modern, stylish, and animated todo application built with React.js frontend, Node.js backend, and MongoDB database.

✨ Features

• 🎨 Modern UI/UX: Beautiful glassmorphism design with smooth animations
• 📱 Responsive Design: Works perfectly on desktop, tablet, and mobile devices
• ⚡ Real-time Updates: Instant feedback with toast notifications
• 🎯 Task Management: Create, edit, delete, and toggle task completion
• 🏷️ Categories: Organize tasks by categories (Work, Personal, Shopping, etc.)
• 🔥 Priority Levels: Set low, medium, or high priority for tasks
• 📅 Due Dates: Add due dates to your tasks
• 📊 Statistics: View completion rates and task statistics
• 🔍 Filtering: Filter tasks by status, priority, and category
• 💾 Persistent Storage: All data saved in MongoDB database

🛠️ Tech Stack

Frontend

• React.js - UI framework
• Framer Motion - Smooth animations
• React Icons - Beautiful icons
• React Hot Toast - Toast notifications
• Date-fns - Date formatting

Backend

• Node.js - Runtime environment
• Express.js - Web framework
• MongoDB - Database
• Mongoose - ODM for MongoDB
• CORS - Cross-origin resource sharing
• Helmet - Security middleware
• Morgan - HTTP request logger

🚀 Quick Start

Prerequisites

• Node.js (v14 or higher)
• MongoDB (local installation or MongoDB Atlas)
• npm or yarn

Installation

1. Clone the repository

   git clone <repository-url>
   cd animated-todo-app
   

2. Install dependencies

   # Install backend dependencies
   npm install
      
   # Install frontend dependencies
   cd client
   npm install
   cd ..
   

3. Environment Setup

   # Copy environment variables
   cp env.example .env
      
   # Edit .env file with your MongoDB connection string
   MONGODB_URI=mongodb://localhost:27017/todo-app
   PORT=5000
   NODE_ENV=development
   

4. Start MongoDB

   # If using local MongoDB
   mongod
      
   # Or use MongoDB Atlas (cloud service)
   

5. Run the application

   # Development mode (runs both frontend and backend)
   npm run dev
      
   # Or run separately:
   # Backend only
   npm run server
      
   # Frontend only (in another terminal)
   npm run client
   

6. Open your browser
   • Frontend: http://localhost:3000
   • Backend API: http://localhost:5000

📁 Project Structure

animated-todo-app/
├── client/                 # React frontend
│   ├── public/
│   │   ├── components/     # React components
│   │   │   ├── Header.js
│   │   │   ├── TodoForm.js
│   │   │   ├── TodoList.js
│   │   │   ├── TodoItem.js
│   │   │   └── TodoStats.js
│   │   ├── App.js
│   │   ├── index.js
│   │   └── index.css
│   └── package.json
├── server/                 # Node.js backend
│   ├── models/            # MongoDB models
│   │   └── Todo.js
│   ├── routes/            # API routes
│   │   └── todos.js
│   └── index.js           # Server entry point
├── package.json
├── env.example
└── README.md

🔧 API Endpoints

Todos

• GET /api/todos - Get all todos
• GET /api/todos/:id - Get single todo
• POST /api/todos - Create new todo
• PUT /api/todos/:id - Update todo
• DELETE /api/todos/:id - Delete todo
• PATCH /api/todos/:id/toggle - Toggle todo completion
• GET /api/todos/stats/summary - Get todo statistics

Health Check

• GET /api/health - API health status

🎨 Features in Detail

Task Management

• Create Tasks: Add new tasks with title, description, category, priority, and due date
• Edit Tasks: Modify existing tasks inline with a beautiful edit interface
• Delete Tasks: Remove tasks with confirmation
• Toggle Completion: Mark tasks as complete/incomplete with smooth animations

Categories

• General 📋
• Work 💼
• Personal 👤
• Shopping 🛒
• Health 🏥
• Learning 📚

Priority Levels

• Low (Green) - Less urgent tasks
• Medium (Orange) - Normal priority tasks
• High (Red) - Urgent tasks

Filtering & Sorting

• Filter by completion status (All, Pending, Completed)
• Filter by priority (High Priority)
• Sort by creation date (newest first)

Statistics Dashboard

• Total tasks count
• Completed tasks count
• Pending tasks count
• High priority tasks count
• Completion rate with animated progress circle

🎭 Animations

The app features smooth animations powered by Framer Motion:

• Page Transitions: Fade-in animations on page load
• Task Cards: Hover effects and scale animations
• Form Expansion: Smooth expand/collapse for task details
• List Animations: Staggered animations for task items
• Button Interactions: Scale animations on hover/click
• Loading States: Spinning animations and skeleton loading

📱 Responsive Design

The application is fully responsive and works on:

• Desktop (1200px+): Full layout with side-by-side statistics
• Tablet (768px-1199px): Adjusted layout with stacked elements
• Mobile (320px-767px): Mobile-optimized layout with touch-friendly buttons

🔒 Security Features

• Helmet.js: Security headers
• CORS: Cross-origin resource sharing configuration
• Input Validation: Server-side validation for all inputs
• Error Handling: Comprehensive error handling and user feedback

🚀 Deployment

Frontend (React)

cd client
npm run build

Backend (Node.js)

npm start

Environment Variables for Production

MONGODB_URI=your_mongodb_atlas_connection_string
PORT=5000
NODE_ENV=production

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Framer Motion for amazing animations
• React Icons for beautiful icons
• MongoDB for reliable data storage
• Express.js for robust backend framework

📞 Support

If you have any questions or need help, please open an issue on GitHub.

---

Happy Coding! 🎉