Todo List Manager with Category Organization & Statistics

Description:

This full-stack task management application provides comprehensive organization capabilities with color-coded categories, priority levels, and real-time statistics tracking. Built with Node.js, Express, and MongoDB, it demonstrates full CRUD operations, database modeling with Mongoose, and dynamic EJS templating for a seamless user experience. Unlike basic todo apps, this implementation features category-based organization with custom colors, priority indicators, progress tracking per category, and a real-time statistics dashboard - delivering professional-grade productivity tools with complete control over task management. The application showcases RESTful API design, server-side rendering, responsive UI patterns, and real-time DOM updates - essential capabilities for building sophisticated web applications that require robust data management and engaging user interfaces.

The Challenge:

Most todo applications lack visual organization and progress tracking. I wanted to create a comprehensive task management solution that provides visual categorization with color coding, priority management, and real-time progress statistics while maintaining a clean, responsive interface across all devices.

Development Story:

This project required full-stack development with proper separation of concerns and robust data modeling. The most challenging aspect was implementing the category-todo relationship management with cascading deletes - ensuring that deleting a category properly removes all associated todos while maintaining data integrity.

Key Challenge: Creating a seamless user experience with real-time updates and modal-based forms, while maintaining clean MVC architecture with proper routing, database operations, and error handling.

Technologies Used:

• Node.js - Backend runtime environment
• Express.js - Web framework for routing and middleware
• MongoDB - NoSQL database for flexible data storage
• Mongoose ODM - Object Data Modeling for MongoDB
• EJS - Embedded JavaScript templating for server-side rendering
• SCSS/CSS3 - Advanced styling with variables and mixins
• JavaScript (ES6+) - Client-side interactivity and DOM manipulation
• Method-Override - HTTP method override for PUT/DELETE support
• Dotenv - Environment variable management

Technical Architecture:

• MVC Architecture - Models, Views, Controllers separation
• RESTful API - Standard HTTP methods for CRUD operations
• MongoDB Schema Design - Relationships between Categories and Todos
• Server-Side Rendering - Dynamic EJS templates with partials
• Real-Time Updates - Client-side DOM manipulation without page refreshes

Technical Implementation:

• Category Management: CRUD operations with custom colors and descriptions
• Todo Operations: Create, read, update, delete with priority levels
• Database Relations: Mongoose references and cascading deletes
• Statistics Engine: Real-time calculations for dashboard metrics
• Modal-Based Forms: Elegant client-side modals for data entry

Core Functionality:

• Create, edit, and delete categories with custom colors
• Add, edit, toggle completion, and delete todos within categories
• Priority levels with visual indicators (Low, Medium, High)
• Real-time statistics dashboard (categories, todos, completed, pending)
• Progress tracking with visual completion bars per category

User Experience:

• Clean, modern interface with smooth animations and transitions
• Modal-based forms for creating and editing items
• Color-coded categories for visual organization
• Responsive design that works seamlessly on all devices
• Interactive elements with hover effects and user-friendly feedback
• Empty state messages for better user experience

Technical Features:

• Full CRUD operations with RESTful API design
• MongoDB database with Mongoose ODM
• Server-side rendering with EJS templates
• Cascading deletes for category-todo relationships
• Real-time DOM updates without page refreshes
• Environment variable configuration
• Method-override for PUT and DELETE support

How to Use:

• Clone the repository and install dependencies with npm
• Set up environment variables and start MongoDB
• Run the application with npm run devStart
• Create categories with custom names, descriptions, and colors
• Add todos to categories with titles, descriptions, and priority levels
• Track progress with real-time statistics and completion bars

Code Highlight:

async function toDoEditData(todoID) {
   try {
      const response = await fetch('http://localhost:3000/task/fetch', {
         method: 'POST',
         headers: {
            'Content-Type': 'application/json',
         },
         credentials: 'include',
         body: JSON.stringify({ todoID })
      });

      const taskData = await response.json();

      if (response.ok) {
         toDoEditDataFeedback(taskData);
      }
   } catch (error) {
      console.log(error);
   }
}

Key Learnings:

• Mastered full-stack development with Node.js, Express, and MongoDB
• Deep understanding of Mongoose schema design and database relationships
• Learned to implement RESTful APIs with proper routing and middleware
• Gained expertise in server-side rendering with EJS templates
• Developed skills in creating responsive, data-driven web applications

Future Enhancements:

• User authentication and multi-user support
• Task due dates with calendar view
• Email notifications for upcoming tasks
• Drag-and-drop task reordering
• Advanced filtering and search functionality
• Dark mode theme toggle
• Export/import data functionality
• Mobile app with PWA support
• Task sharing and collaboration features
• Recurring tasks automation

Github:

Live demo:

Recommended Tools:

This project is hosted on Hostinger - get 20% off your first plan with my referral code.

Features:

• Responsive design
• Minimal design
• Color-coded category management
• Priority levels (Low, Medium, High) with visual indicators
• Real-time statistics dashboard
• Progress tracking with completion bars
• Modal-based forms for CRUD operations
• Responsive design for all devices
• Smooth animations and transitions
• Category-specific todo views
• Cascading delete for categories
• Real-time DOM updates
• MongoDB database integration
• Server-side rendering with EJS
• No page refreshes for CRUD operations