A simple yet effective task-tracking application to help you manage daily tasks efficiently. Built with React, this app showcases essential front-end skills, including component-based development, state management, and asynchronous API interactions. The design emphasizes responsiveness, offering a smooth user experience on both desktop and mobile devices.
- Add tasks with task details, due date, and reminders.
- Toggle reminders for tasks.
- Delete tasks after they are complete.
- Responsive design suitable for both desktop and mobile experiences.
- Built with a focus on simplicity and user-friendliness.
To run the project locally, follow these steps:
-
Clone the repository:
git clone https://github.com/your-username/task-tracker.git cd task-tracker -
Install the dependencies:
npm install
-
Start the development server:
npm start
-
Open the project in your browser at
http://localhost:3000.
- React: JavaScript library for building the user interface.
- React Router: For routing between pages.
- React Icons: For adding icons to the application.
- JSON Server: A mock API for managing tasks.
- React Spring or Framer Motion: For smooth animations.
- CSS: Custom styles for layout and design.
The Task Tracker app allows you to add tasks with reminders, delete tasks, and manage your daily tasks easily.
- Click the green "Add" button to open the form.
- Fill in the task name, day & time, and set a reminder if needed.
- Click "Save Task" to add it to your list.
- Double-click the task to toggle the reminder.
- Click the red cross icon next to a task to delete it.
This project is licensed under the MIT License. Feel free to use and modify the code.
Hello, I'm Zahra Mosayebi, a front-end developer passionate about building functional, user-friendly applications. This project demonstrates key concepts in front-end development using React, and I hope it serves as a useful tool for anyone looking to improve their daily productivity.
For more projects and updates, follow me on GitHub.