Overview of the TodoApp Project

• Backend: Handles server-side logic, including database interactions, user authentication, and API endpoints.
• Frontend: Manages client-side logic, providing a user-friendly interface for seamless interaction.

Technologies Used

Backend

1. Node.js: JavaScript runtime for building the backend server.
2. Express.js: Web framework for creating APIs and handling server-side logic.
3. MongoDB: NoSQL database for storing todos and user information.
4. Mongoose: Object Data Modeling (ODM) library for MongoDB to define schemas and interact with the database.
5. JWT (JSON Web Tokens): For user authentication and securing API endpoints.
6. Nodemailer: For sending email reminders.
7. Cron: For scheduling automated email reminders based on due dates.
8. dotenv: For managing environment variables.

Frontend

1. React.js: JavaScript library for building the user interface.
2. React Router: For client-side routing and navigation between pages.
3. Axios: For making HTTP requests to the backend API.
4. Context API: For global state management (e.g., authentication state).
5. CSS: For styling the application and ensuring a consistent design.

Backend Overview

Directory Structure

• index.js: Entry point of the server. Initializes the Express app, connects to MongoDB, sets up middleware, routes, and a reminder cron job.
• db/dbConnect.js: Handles MongoDB connection using Mongoose with the URI from environment variables.
• models/: Defines Mongoose schemas and models.
  • Todo.js: Schema for todo items.
  • User.js: Schema for users.
• routers/: Defines API routes.
  • todoRoutes.js: Routes for CRUD operations on todos with authentication middleware.
  • userRoutes.js: Routes for user registration, login, and profile management.
• utils/: Contains utility functions.
  • reminderCron.js: Sets up cron jobs to send reminders for pending todos.
  • sendEmail.js: Handles email sending via Nodemailer.
  • auth.js: Middleware for authenticating users with JWT.
• .env: Stores environment variables (e.g., database URI, JWT secret, email credentials).
• package.json: Lists backend dependencies (e.g., Express, Mongoose, JWT, Nodemailer).

Key Functionalities

1. Server Initialization:
   • Middleware for CORS and body parsing.
   • Routes for todos and users.
   • Cron job for email reminders.
2. Database Connection: Manages MongoDB interactions via Mongoose.
3. Authentication: JWT-based authentication to secure protected routes.
4. CRUD Operations: APIs for creating, reading, updating, and deleting todos and users.
5. Email Reminders: Automated reminder emails using cron jobs and Nodemailer.

Frontend Overview

Directory Structure

• public/: Contains static assets (HTML template, images).
  • index.html: Main HTML file for the React app.
• src/: Source code directory.
  • components/: Reusable React components.
    • TodoItem.js: Displays individual todos.
    • TodoList.js: Displays lists of todos.
    • Header.js: Application header.
    • Login.js: Login form.
    • Register.js: Registration form.
  • pages/: Page components for routing.
    • HomePage.js: Home page.
    • LoginPage.js: Login page.
    • RegisterPage.js: Registration page.
  • App.js: Main component that manages routing and renders pages.
  • index.js: Entry point for rendering the React app.
  • api/: Functions for API calls using Axios.
    • todoApi.js: Handles todos API requests.
    • userApi.js: Handles user-related API requests.
  • context/: Global state management.
    • AuthContext.js: Manages authentication state.
  • styles/: CSS files for consistent design.
    • App.css: Main styling file.
• package.json: Lists frontend dependencies (React, React Router, Axios).

Key Functionalities

1. User Interface:
   • Components for todos, forms, and navigation.
2. Routing: React Router for navigating between pages (home, login, register).
3. API Integration: Axios-based functions for communicating with the backend.
4. State Management: AuthContext provides global state for authentication.
5. Styling: Ensures a consistent and responsive design.

Video Demo