Your Todo List – Organize Tasks Effortlessly with MERN

Introduction

Staying organized and productive is easier than ever with Your Todo List, a feature-rich task manager built using the powerful MERN stack—MongoDB, Express, React, and Node.js. Designed for simplicity and scalability, this app streamlines task management, letting users focus on what truly matters: getting things done.

Live Demo

Experience it live: Your Todo List App

Key Features

• User Authentication: Secure login and registration ensure your todos are private and protected.
• Add, Delete, and Track Todos: Effortlessly create and remove tasks as your day evolves.
• Dark Mode: Enjoy a visually pleasing experience with light and dark themes.
• Responsive Design: Fully optimized for desktops and mobile devices using Tailwind CSS.
• Seamless Navigation: Built with react-router-dom for smooth transitions between pages.
• Robust API Integration: Frontend and backend communicate via Axios and RESTful endpoints.

Technology Stack

• Frontend: React, Tailwind CSS, Axios, react-router-dom
• Backend: Node.js, Express
• Database: MongoDB
• Authentication: Custom JWT-based authentication for secure access

How It Works

1. Sign Up/Login: New users can register with their name, email, and password. Returning users can log in to view their personalized todo list.
2. Personal Dashboard: Once authenticated, users access a dashboard to add new tasks, mark them as completed, or delete them.
3. Dark/Light Mode Toggle: Switch between themes for maximum comfort, with state persisted using cookies.
4. Data Persistence: Todos are stored in MongoDB, ensuring your data is safe, even if you close your browser.

Code Highlights

• Frontend: Built in React with functional components and hooks (useState, useEffect). The UI is styled using Tailwind CSS for a modern look and feel. Authentication tokens and theme preferences are managed with cookies.
• Backend: Node.js and Express form secure REST APIs to handle user registration, authentication, and CRUD operations for todos.
• Authentication: Passwords are verified and user sessions are managed using JWT tokens, ensuring each user's todos are private.

Sample Component: Register.js

function Register() {
  // ...input management and form handling...
  const register = (e) => {
    e.preventDefault();
    // Validates input and posts to the backend for registration
    if (valid) {
      axios.post(`${BASE_URL}/register`, user).then((res) => {
        // Handle registration result
      });
    }
  };
  // ...UI for registration form...
}

About the Project

"Our MERN stack Todo website helps you manage your daily tasks easily. Built with MongoDB, Express, React, and Node.js, our platform is efficient and scalable. Keep track of your to-dos and stay productive with us."
— About Page

Getting Started

Clone the repo and run both frontend and backend:

git clone https://github.com/siddharth9300/todoListUsingMERN.git
cd todoListUsingMERN
 
# Backend setup
cd backend
npm install
npm start
 
# Frontend setup
cd ../frontend
npm install
npm start

Open http://localhost:3000 in your browser.

Conclusion

Your Todo List demonstrates the power and flexibility of the MERN stack for building modern, full-stack web applications. With a clean UI, robust features, and thoughtful UX touches like dark mode, it's the perfect starting point for anyone looking to build their own productivity tools.

Author: @siddharth9300
License: MIT
Source Code: GitHub Repository