https://github.com/risudev/time-tracker-pie-chart
In this beginner-friendly React project, we’ll build a Time Tracker app that lets you enter daily activities and visualize your time with a clean, colorful Pie Chart. Perfect for improving your React fundamentals and learning how to use Chart.js in real projects.
https://github.com/risudev/time-tracker-pie-chart
chartjs css reactchartjs reactjs shadcn-ui tailwindcss typescript useeffect usestate
Last synced: 5 months ago
JSON representation
In this beginner-friendly React project, we’ll build a Time Tracker app that lets you enter daily activities and visualize your time with a clean, colorful Pie Chart. Perfect for improving your React fundamentals and learning how to use Chart.js in real projects.
- Host: GitHub
- URL: https://github.com/risudev/time-tracker-pie-chart
- Owner: risudev
- Created: 2025-08-13T10:54:42.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-08-13T11:04:25.000Z (5 months ago)
- Last Synced: 2025-08-13T13:15:58.399Z (5 months ago)
- Topics: chartjs, css, reactchartjs, reactjs, shadcn-ui, tailwindcss, typescript, useeffect, usestate
- Language: TypeScript
- Homepage:
- Size: 306 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎯 Time Tracker Pie Chart App
A beginner-friendly React project to track your daily activities and visualize them with a beautiful, colorful pie chart using **Chart.js**.
---
## 🚀 Features
- Add activities with custom hours and colors
- View total hours tracked (max 24 hrs/day)
- Pie chart visualization using Chart.js
- Color picker for each activity
- Persistent data storage using `localStorage`
- Clean UI with Tailwind CSS & ShadCN components
---
## 🧠 What I Learned
- Chart.js integration with React
- Controlled components and form validation
- State management using `useState` and `useEffect`
- Building reusable components
- Styling with Tailwind CSS & ShadCN
---
## 🛠 Tech Stack
- React + Vite (TypeScript)
- Tailwind CSS
- ShadCN UI
- Chart.js
- localStorage (for saving tasks)
---
🙏 Credits
Huge thanks to [@Code Javid .] for mentoring and guiding me through this project.