Todo App (MERN Stack)

A full-stack MERN Todo application with secure authentication, OTP verification, protected routes, and deadline-based task management.

Todo App (MERN Stack)

What Problem Does It Solve?

Many people forget their daily tasks or fail to organize them properly. This application helps users store, manage, and complete tasks whenever they have time.

Solution Overview

A full-stack Todo Application built using the MERN Stack. The app helps users manage their daily tasks efficiently with secure authentication, OTP verification, and role-based protected routes. Users can create, update, delete, and track todos with deadlines and completion status.

Key Features

  • User registration & login
  • OTP verification via email
  • JWT authentication with HTTP-only cookies
  • Protected routes (frontend & backend)
  • Auto logout on token expiry
  • Create, edit, delete todos
  • Due date & completion status
  • Prevent past due date selection
  • Responsive UI with toast notifications

Tech Stack

ReactViteReact Router DOMAxiosContext APITailwind CSSReact Hot ToastReact IconsNode.jsExpress.jsMongoDBMongooseJWTNodemailerCookie Parser

Deployment

  • Frontend: VPS Server
  • Backend: VPS Server
  • Database: VPS Server

Future Improvements

  • Drag & drop todos
  • Search & filter functionality
  • Priority levels
  • Reminder notifications
  • Admin dashboard