FitDiary Plus

Inspiration

I wanted a fitness tracker that was simple, beautiful, and actually enjoyable to use. Most fitness logs either feel like spreadsheets or are too overwhelming with features. FitDiary+ started with a basic idea: give people a way to track their workouts easily, see real progress, and feel good about their effort — all in a visually engaging way.

What it does

FitDiary+ lets users log their daily workouts, view their workout history, track estimated calories burned per day/month, and get smart activity suggestions based on their patterns. It also saves user profile info (like age and weight) and visualizes progress with a live chart. Everything is stored locally, so it's quick and private.

How we built it

I built FitDiary+ as a responsive web app using plain HTML, CSS (Tailwind), and JavaScript. I styled it with a dark-neon theme and added interactive elements like hover effects, live chart rendering with Chart.js, and local storage to save workout logs and user data. The focus was on keeping the experience fast, clean, and usable across devices.

Challenges we ran into

Styling the dark theme was trickier than expected — making dropdowns readable, balancing colors, and keeping accessibility in mind took time. Chart rendering was also a bit of a challenge when syncing updates with log changes. We also had to simplify some features to fit within the time limits while still keeping the app functional and polished.

Accomplishments that we're proud of

I am proud of how clean and smooth the final product feels. The UI came together just the way I imagined — lightweight, responsive, and visually satisfying. Also, seeing the live chart update instantly as you log workouts felt like a great milestone.

What we learned

I learned a lot about designing interfaces that feel good to use, especially with dark themes. I also realized the importance of keeping things minimal — focusing on the core experience instead of trying to add every possible feature. Small touches like hover animations, tips, and emoji make a big difference in how the app feels.

What's next for FitDiary Plus

I would love to integrate Firebase for real-time sync across devices, allow users to export their logs as CSV, and add personalized weekly insights. There’s also potential to turn this into a mobile app with reminders, habit tracking, and social sharing features. But for now, it’s a solid foundation — and I am excited to keep building on it.

Built With

• css3
• html5
• javascript
• tailwind