To-Do Application

Description

This is a simple To-Do application built with React and TypeScript. It allows users to add, complete, and delete tasks, and it persists the data in local storage.

Features

• Add Tasks: Users can add new tasks to their to-do list.
• List Tasks: Displays all added tasks.
• Mark as Complete: Users can mark tasks as complete. Completed tasks are displayed with a strikethrough.
• Delete Tasks: Users can delete tasks from the list.
• Local Storage Persistence: The to-do list is saved in local storage, so data persists across page reloads.
• Responsive Design: The application is designed to be responsive and work on different screen sizes.

Technologies Used

• React: A JavaScript library for building user interfaces.
• TypeScript: A superset of JavaScript that adds static typing.
• Vite: A build tool that provides a fast development environment.
• CSS Modules: Used for styling, providing component-level CSS scoping.
• Local Storage: Used to persist to-do items in the browser.

Setup

1. Clone the repository:

   git clone https://github.com/meKushdeepSingh/react-todo-app.git
   cd react-todo-app

2. Install dependencies:

   yarn

3. Run the application:

   yarn dev

4. Open in your browser: The application will be running at http://localhost:<port>, where <port> is usually 5173.

Code Structure

The application is structured as follows:

• src/: Contains the main application code.
  • App.tsx: The main component that manages the application state and renders the other components.
  • components/: Contains the individual components:
    • AddTask.tsx: Component for adding new tasks.
    • AddTask.module.css: CSS Module for AddTask component.
    • TodoList.tsx: Component for displaying the list of tasks.
    • TodoList.module.css: CSS Module for TodoList component.
    • TodoItem.tsx: Component for displaying individual to-do items.
    • TodoItem.module.css: CSS Module for TodoItem component.
  • types/:
    • todo.ts: Defines the Todo interface.
  • index.css: Global styles for the application.
  • main.tsx: Entry point for the application.

Explanation of Key Parts

App.tsx

• Manages the todos state using useState.
• Loads initial todos from localStorage and saves updates to localStorage using useEffect.
• Contains the addTask, toggleComplete, and deleteTask functions to modify the todos.
• Renders the AddTask and TodoList components.

Component Structure

• The application follows a component-based architecture. Each component is responsible for a specific part of the UI and its functionality.
• Props are used to pass data down from parent to child components. For example, the todos array and functions to update them are passed from App to TodoList, and then individual todo items and functions to handle their actions are passed to TodoItem.

Styling

• CSS Modules are used to scope the CSS to each component, preventing naming conflicts and making the styles more maintainable.
• Global styles (for the body) are in index.css.

Data Persistence

• localStorage is used to store the todos array. This ensures that the data is not lost when the user refreshes the page.

Future Improvements

• Add ability to edit existing tasks.
• Implement drag-and-drop sorting of tasks.
• Add more advanced state management (e.g., Context API, Redux) for larger applications.
• Implement unit tests for components.
• Add more complex UI features, such as filtering or categories.