https://github.com/harish-govindasamy/react-todo-task

A simple Todo App built with React, featuring dynamic form validation, status-based styling, and responsive design. Users can add, edit, and delete tasks with descriptions. Includes a status filter and a footer with GitHub link. Created by Harish G - Batch59WD-T.
https://github.com/harish-govindasamy/react-todo-task

reactjs todo-app vite

Last synced: 29 days ago
JSON representation

A simple Todo App built with React, featuring dynamic form validation, status-based styling, and responsive design. Users can add, edit, and delete tasks with descriptions. Includes a status filter and a footer with GitHub link. Created by Harish G - Batch59WD-T.

• Host: GitHub
• URL: https://github.com/harish-govindasamy/react-todo-task
• Owner: harish-govindasamy
• Created: 2024-12-03T15:36:09.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-12-04T01:36:48.000Z (about 2 months ago)
• Last Synced: 2024-12-04T02:27:53.452Z (about 2 months ago)
• Topics: reactjs, todo-app, vite
• Language: JavaScript
• Homepage: https://react-todo-task1.netlify.app/
• Size: 231 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 📝 React To-Do App

Welcome to the **React To-Do App**! This project is a simple and elegant to-do list application built with React and Vite. It allows you to add, edit, delete, and filter your tasks efficiently.

## 🚀 Features

- **Add Tasks**: Quickly add new tasks with a name and description.

- **Edit Tasks**: Modify existing tasks to keep your list up-to-date.

- **Delete Tasks**: Remove tasks that are no longer needed.

- **Filter Tasks**: Filter tasks by their status (All, Not Completed, Completed).

- **Responsive Design**: Optimized for both desktop and mobile devices.

## 🛠️ Technologies Used

- **React**: A JavaScript library for building user interfaces.

- **Vite**: A fast build tool and development server.

- **CSS**: Custom styles for a sleek and modern look.

- **ESLint**: A tool for identifying and fixing linting issues in your code.

## 📸 Screenshots

![App Screenshot](./src/assets/screenshot.png)

## 📦 Installation

1. Clone the repository:

   ```sh

   git clone https://github.com/harish-govindasamy/react-todo-task.git

   ```

2. Navigate to the project directory:

   cd react-todo-task

3. Install dependencies:

   npm install

   🏃‍♂️ Running the App

   To start the development server, run:

   npm run dev

   To build the project for production, run:

   npm run build

   To preview the production build, run:

   npm run preview

📚 Usage

   

   Add a Task: Enter the task name and description, then click "Add Todo".

   Edit a Task: Click the "Edit" button, modify the task details, and click "Save".

   Delete a Task: Click the "Delete" button to remove the task.

   Filter Tasks: Use the dropdown menu to filter tasks by their status.

   

🤝 Contributing

   Contributions are welcome! Please fork the repository and create a pull request with your changes.

📄 License

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

👨‍💻 Author

   Created by Harish G - Batch59WD-T

🌟 Acknowledgements

  React

  Vite

  ESLint

  Made with ❤️ by Harish G