https://github.com/ravi8054/todo_react_app

a minimal, user-friendly To-Do List app built with React and Vite.Allows users to add, delete, edit, and mark tasks as completed.Uses React Router DOM for client-side routing and smooth navigation between pages.Implements UUID to generate unique IDs for each task.Styled with utility-first CSS for a clean and responsive user interface.
https://github.com/ravi8054/todo_react_app

javascript react-hooks react-js react-router react-router-dom tailwind-css

Last synced: 2 months ago
JSON representation

a minimal, user-friendly To-Do List app built with React and Vite.Allows users to add, delete, edit, and mark tasks as completed.Uses React Router DOM for client-side routing and smooth navigation between pages.Implements UUID to generate unique IDs for each task.Styled with utility-first CSS for a clean and responsive user interface.

• Host: GitHub
• URL: https://github.com/ravi8054/todo_react_app
• Owner: RAVI8054
• Created: 2025-06-29T15:47:03.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2025-07-18T12:22:46.000Z (11 months ago)
• Last Synced: 2025-07-18T16:57:11.963Z (11 months ago)
• Topics: javascript, react-hooks, react-js, react-router, react-router-dom, tailwind-css
• Language: JavaScript
• Homepage: https://github.com/RAVI8054/ToDo_React_App
• Size: 70.3 KB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
#  To-Do React App

## 📌 Overview

- A minimal, user-friendly **To-Do List** app built with **React** and **Vite**.  

- Allows users to **add**, **delete**, **edit**, and **mark tasks as completed**.  

- Uses **React Router DOM** for client-side routing and smooth navigation between pages.  

- Implements **UUID** to generate unique IDs for each task.  

- Styled with **utility-first CSS** for a clean and responsive user interface.  

---

🔗 GitHub Repository

📎 https://github.com/RAVI8054/ToDo_React_App

## 🚀 Features

- ✅ Add new tasks

- ✅ Delete tasks

- ✅ Edit existing tasks

- ✅ Mark tasks as complete/incomplete

- ✅ Responsive and styled UI 

---

##  Project Structure

```bash

src/

├── components/

│   ├── EventHandler.js       # Contains add/edit/delete/complete logic handlers

│   ├── Footer.jsx            # App footer 

│   ├── Header.jsx            # App header/title

│   ├── ToDoItem.jsx          # Single task UI with edit/delete/complete

│   └── ToDoList.jsx          # Maps through tasks, renders ToDoItem list

├── App.jsx                   # Main app, manages state

├── main.jsx                  # App entry point

└── index.css                 # Global styles (Tailwind )

---

## ⚙️ Technologies Used

- ⚛️ React (Functional Components + Hooks+react-router)

- ⚡ Vite

- 🎨 CSS (tailwind)

- ✅ JavaScript (ES6+)

---

## 📌 Instructions to Run the App

Follow these step-by-step instructions to run the To-Do React App on your local machine:

### 1. Make sure you have Node.js installed

###2. Clone the GitHub repository && Then navigate into the project folder:

      git clone https://github.com/RAVI8054/ToDo_React_App.git

      cd ToDo_React_App

###3. Install dependencies

      npm install

###4. Start the development server

      npm run dev

###5. Open the app in your browser

      http://localhost:5173