ToDo Application

Overview

This ToDo Application is built using React, providing users with the ability to add, edit, delete tasks, and mark tasks as completed. The application includes various components such as Task List, Add Task Form, and Edit Task Form, with a responsive design and local storage functionality for persistent data.

Table of Contents

1. Setup and Run
2. Project Structure
3. Design Choices
4. Additional Features
5. Screenshots

Setup and Run

To run the project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/SakethBhardwajV/ToDo-App.git

2. Navigate to the project directory:

   cd frontend

3. Install Dependencies:

   npm install

4. Run the application:

   npm start

   The application will be accessible at http://localhost:3000 in your web browser.

Project Structure

The project is organized as follows:

• src/components: Contains React components such as TaskList, AddTaskForm, EditTaskForm, and ViewTaskModal.
• src/styles Includes CSS files for styling components.
• src/slices: Contains Redux slices for state management.
• src/App.js: Main entry point of the application.
• src/index.js: React DOM rendering.

Design Choices

• React Components: Each major functionality is encapsulated within its own React component for better organization and maintainability..
• React Router: Used React Router for navigation, allowing users to move between the task list, add task, and edit task pages seamlessly
• State Management: Utilized React state within each component to manage their respective functionalities. Redux slices were used for global state management when necessary.
• LocalStorage: Tasks are saved in the browser's local storage to ensure data persistence even after a page refresh.
• Styling: Applied a responsive design using CSS, providing a visually appealing and user-friendly interface.

Additional Features

View Task

A View Task modal has been implemented, allowing users to view detailed information about a specific task. This modal is triggered by clicking on a task name in the Task List.

Screenshots

Task List - Displays tasks with status and options to mark as completed or delete.

Add Task Form - Allows users to add new tasks with a name, description, priority, and due date.

Edit Task Form - Enables users to edit the task name, description, and priority.

Mark as Complete - Tasks can be marked as complete with a visual indication.

Delete Task - Users can delete tasks, removing them from the list.

View Task - Detailed view of a specific task, including name, description, and priority.