Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shubhamsharmax/react-todolist
hyper TODO is a React todo list app with local storage support. It lets you add, delete, and edit tasks. Styled with Tailwind CSS, it offers an intuitive interface for easy task management.
https://github.com/shubhamsharmax/react-todolist
react-project tailwindcss todo-list todo-reactjs
Last synced: about 1 month ago
JSON representation
hyper TODO is a React todo list app with local storage support. It lets you add, delete, and edit tasks. Styled with Tailwind CSS, it offers an intuitive interface for easy task management.
- Host: GitHub
- URL: https://github.com/shubhamsharmax/react-todolist
- Owner: ShubhamSharmax
- Created: 2024-08-29T11:18:49.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-09-01T15:20:12.000Z (4 months ago)
- Last Synced: 2024-10-11T05:42:18.650Z (2 months ago)
- Topics: react-project, tailwindcss, todo-list, todo-reactjs
- Language: JavaScript
- Homepage: https://hypertodos.netlify.app
- Size: 60.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# hyper TODO
A simple React-based task management application built with Tailwind CSS. Manage your tasks by adding, editing, completing, and deleting them, with persistent storage via local storage.
## Features
- **Add Tasks**: Quickly add tasks using the input field.
- **Edit Tasks**: Update your existing tasks by clicking the edit button.
- **Mark as Complete**: Check off tasks once you complete them.
- **Delete Tasks**: Remove tasks you no longer need.
- **Local Storage**: All tasks are stored in local storage, so your tasks are preserved even after refreshing the page.
- **Responsive Design**: Fully responsive design using Tailwind CSS.
## Installation
1. Clone the repository:
```bash
git clone https://github.com/ShubhamSharmax/React-TodoList.git
```
2. Navigate to the project directory:
```bash
cd your-repo-name
```
3. Install dependencies:
```bash
npm install
```
4. Start the development Server
```bash
npm run dev
```
5. **Open your web browser :** Go to `http://localhost:5173` to view the app.
## Usage
- **Adding a Task**: Enter your task in the input field and click the "Add" button. The task will be added to your task list.
- **Editing a Task**: Click the edit button next to the task you want to modify, update the task, and click "Save".
- **Completing a Task**: Check the checkbox next to a task to mark it as completed.
- **Deleting a Task**: Click the delete button next to a task to remove it from your list.
## Technologies Used
- **React**: JavaScript library for building user interfaces.
- **Tailwind CSS**: Utility-first CSS framework for styling.
- **UUID**: Library for generating unique IDs for tasks.
- **Local Storage**: Browser storage to persist tasks between sessions.