https://github.com/mohdraza216/task-tracker
A React-based Task Tracker App to manage tasks efficiently. Features include adding, viewing, deleting, and toggling reminders for tasks. Uses useState, useEffect, and React Router for functionality, with a JSON Server backend for local data storage and CRUD operations. Ideal for learning React fundamentals and building dynamic web apps.
https://github.com/mohdraza216/task-tracker
css3 curd-application html5 javascript nodejs reactjs
Last synced: 12 days ago
JSON representation
A React-based Task Tracker App to manage tasks efficiently. Features include adding, viewing, deleting, and toggling reminders for tasks. Uses useState, useEffect, and React Router for functionality, with a JSON Server backend for local data storage and CRUD operations. Ideal for learning React fundamentals and building dynamic web apps.
- Host: GitHub
- URL: https://github.com/mohdraza216/task-tracker
- Owner: MohdRaza216
- License: mit
- Created: 2024-11-24T08:41:49.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-26T07:51:49.000Z (about 1 year ago)
- Last Synced: 2025-02-04T18:52:40.725Z (11 months ago)
- Topics: css3, curd-application, html5, javascript, nodejs, reactjs
- Language: JavaScript
- Homepage: https://task-tracker-phi-nine.vercel.app
- Size: 187 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Task Tracker App
Task Tracker is a simple React-based application for managing tasks. It allows users to add, delete, and toggle reminders for tasks. It uses a mock backend powered by JSON Server for data storage and retrieval.
## Features
- Add new tasks with a reminder option.
- Delete existing tasks.
- Toggle task reminders with a double-click.
- Navigate to an About page.
## Tech Stack
- **Frontend**: React.js
- **Mock Backend**: JSON Server
- **Styling**: CSS
## Installation
1. Clone the repository:
```bash
git clone https://github.com/MohdRaza216/Task-Tracker.git
cd Task-Tracker
```
2. Install dependencies:
```bash
npm install
```
3. Start the React development server:
```bash
npm start
```
4. Start the JSON Server (on port 5000):
```bash
npm run server
```
## Usage
1. Open your browser and navigate to:
```
http://localhost:3000
```
2. Use the UI to:
- Add tasks using the "Add" button.
- View the list of tasks.
- Double-click on a task to toggle its reminder.
- Delete tasks using the delete icon.
## File Structure
```
src/
├── components/
│ ├── Header.js
│ ├── Tasks.js
│ ├── Task.js
│ ├── AddTask.js
│ └── Footer.js
├── App.js
├── index.js
└── db.json
```
- **`components/`**: Contains reusable React components.
- **`db.json`**: The mock database for tasks.
## Dependencies
- React Router: For navigation
- JSON Server: For mock backend
- React Icons: For icons like the delete button
## License
This project is open-source and available under the [MIT License](LICENSE).
## Contributing
Feel free to fork the repository, make improvements, and submit pull requests. Contributions are welcome!
```