Scribd
Upload
38 views13 pages

ToDo App

Uploaded by

nayansigupta29
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
38 views13 pages

ToDo App

Uploaded by

nayansigupta29
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 13

ToDo App

NAYANSI GUPTA
INDEX
1. Overview

2. Features

3. Task Management

4. User Interface

5. Additional Features

6. Technology Stack

7. Backend

8. Database

9. Application Flow

10. User Interface Component

11. Conclusion
Overview
The ToDo App is a full-stack web application built using the MERN stack
(MongoDB, Express.js, React, Node.js) along with additional libraries such as
CORS, Mongoose, JWT, Bcryptjs, Bootstrap, and React-Router-Dom. The app
allows users to manage their tasks with full CRUD (Create, Read, Update, Delete)
functionality and includes user authentication to secure access to personal task
data.
Features
• Registration: Users can create new account using an email
and password.
• Login: Existing user can log in with their credentials.
• Authentication: JWT (JSON WEB TOKEN) is used to secure user
sessions.
• Password Encryption: Passwords are encrypted using
Bcryptjs before being stored in the database.
Task Management
• Create Task: Users can create new task by providing a title,
description, due date.
• Read Task: Users can view all their tasks in a list format, with
each task displaying its details.
• Update Task: Users can edit the details of their tasks.
• Delete Task: Users can remove tasks that are no longer
needed.
User Interface
• Responsive Design: The app is styled using
Bootstrap for a clean and responsive user interface.
• Navigation: React-Router-Dom is used for seamless
navigation between different pages like login,
registration, and the task management interface.
Additional Features
• CORS Handling: CORS (Cross-Origin Resource
Sharing) is configured to allow requests from
different origins.
Technology Stack
Frontend
• React: For building the user interface.
• Bootstrap: For styling and responsive design.
• React-router-dom: For client-side routing.
Technology Stack
Backend
• Node.js: For running the server-side application.
• Express.js: For handling the HTTP requests and routing.
• Mongoose: For modeling and interacting with MongoDB database.
•CORS: For enabling cross-origin requests.
•JWT: For secure authentication.
•Bcryptjs: For hashing user password.
Technology Stack
Database
• MongoDB: For storing user data and tasks.
Application Flow
1. User Registration/Login:
• Users register or log in to access their personal task management space.
• Upon successful login, a JWT is issued for session management.

2. Task Management:
• Authenticated users can create, read, update, and delete tasks.

• Each task can have a title, description, due date, and an optional image.
User Interface Components
• Registration Page: Form for new users to create an account.
• Login Page: Form for existing user to login.
• Task List: Displays all tasks with options to create, edit, or
delete tasks.
• Task Form: Form for changing or updating a task, including
fields or title, description and due date.
• Task Detail: View displaying the task details.
Conclusion
The ToDo App provides a robust solution for managing
tasks with secure user authentication and a user-
friendly interface. By leveraging the MERN stack and
additional libraries, the app ensures a seamless and
secure experience for users to efficiently manage their
daily tasks.

You might also like