Todo App

A simple and responsive Todo application built using ReactJS. The app allows users to manage their tasks efficiently with features like adding, deleting, and marking tasks as completed.

Features

• Add Tasks: Quickly add new tasks to your todo list.
• Delete Tasks: Remove tasks from the list once they are no longer needed.
• Mark Tasks as Completed: Keep track of your progress by marking tasks as completed.
• Responsive Design: Works seamlessly across different devices and screen sizes.

Demo

Check out the live application here.

Technologies Used

• Frontend: ReactJS, HTML5, CSS3
• Hosting: GitHub Pages

Dependencies

The following packages are used in this project:

• file-saver ^2.0.5: For saving files on the client-side.
• firebase ^11.0.1: For backend as a service (BaaS), including authentication, database, and hosting.
• react ^18.3.1: Core library for building the user interface.
• react-dom ^18.3.1: For rendering React components to the DOM.
• react-icons ^5.3.0: Provides popular icon packs as React components.
• react-router-dom ^6.28.0: For routing and navigation in React applications.
• react-scripts 5.0.1: Scripts and configuration used by Create React App.
• react-tooltip ^5.28.0: A lightweight and customizable tooltip library for React.
• web-vitals ^2.1.4: For measuring web performance metrics.

---

Installation

Follow the steps below to run the application locally:

1. Clone the repository:

   git clone https://github.com/krishnendubr/todo-app.git

2. Navigate to the project directory:

   cd todo-app

3. Install dependencies:

   npm install

4. Start the development server:

   npm start

5. Open your browser and navigate to:

   http://localhost:3000
   
   

Folder Structure

   todapp/ 
   ├── build/ # Auto-generated build files 
   ├── node_modules/ # Project dependencies 
   ├── public/ # Public assets (index.html, etc.) 
   ├── src/ # Source code 
   │    ├── Assets/ # Images and icons used in the app 
   │    │   ├── Background/ # Background images 
   │    │   │       └── bg1.jpg 
   │    │   └── Icons/ # Icons for the app 
   │    │         ├── google-icon-logo-svgrepo-com.svg 
   │    │         ├── icons8-todo-list-16.png 
   │    │         └── to-do-list.png 
   │    ├── Components/ # Reusable components 
   │    │   ├── Home/ # Home page components 
   │    │   │     ├── Home.css 
   │    │   │     └── Home.jsx 
   │    │   ├── Login/ # Login page components 
   │    │   │     ├── Login.css 
   │    │   │     └── Login.jsx 
   │    │   ├── Navbar/ # Navigation bar components 
   │    │   │     ├── Navbar.css 
   │    │   │     └── Navbar.jsx 
   │    │   ├── Project/ # Project management components 
   │    │   │   ├── AddProject.css 
   │    │   │   ├── AddProject.jsx 
   │    │   │   ├── ListProjects.css 
   │    │   │   ├── ListProjects.jsx 
   │    │   │   ├── ProjectDetails.css 
   │    │   │   └── ProjectDetails.jsx 
   │    │   ├── Register/ # Registration page components 
   │    │   │   ├── Register.css 
   │    │   │   └── Register.jsx 
   │    │   ├── Task/ # Task management components 
   │    │   │   ├── TaskCard.css 
   │    │   │   ├── TaskCard.jsx 
   │    │   │   ├── TaskList.css 
   │    │   │   └── TaskList.jsx 
   │    │   ├── Trash/ # Deleted project management 
   │    │   │   ├── ProjectPage.css 
   │    │   │   └── ProjectPage.jsx 
   │    │   └── signinwithgooglebutton.jsx # Google sign-in button 
   │    ├── firebase.js # Firebase configuration 
   │    ├── App.css # Global styles 
   │    ├── App.js # Main application component 
   │    ├── index.js # Entry point for the app 
   ├── .gitignore # Ignored files for Git 
   ├── package.json # Dependencies and scripts 
   ├── package-lock.json # Dependency lock file 
   └── README.md # Project documentation

How to Use

• Open the app in your browser.
• Use the input field to type your task and click Add to save it.
• Mark tasks as completed by clicking the checkbox next to them.
• Remove tasks by clicking the delete button.

Future Enhancements

• Filter Tasks: Add filtering options (e.g., all, active, completed).Edit Tasks: Allow users to edit existing tasks.
• Persistent Data: Save tasks to local storage or a database for future sessions.

Contributing

• Contributions are welcome! If you would like to suggest improvements or report a bug, feel free to open an issue or create a pull request.

License

• This project is licensed under the MIT License. See the here file for details.