FitLog
A dark-themed gym companion where you browse 12 workouts and build your daily training plan.
Description
FitLog is a dark-themed gym companion web app where users can browse a library of 12 workouts, view detailed instructions for each, and build their daily training plan. Data is fetched from a REST API, and plans are saved in the browser so they persist after reload.
Key features
- Responsive 3-column workout library that adapts to tablet and mobile.
- Detailed workout pages with key specs, step-by-step instructions and category tags.
- Daily plan and saved lists stored in localStorage, with live totals for exercises, minutes and calories.
- Sort the plan by duration, calories or rating, mark workouts as done, and get toast feedback on every action.
Challenges faced
- Keeping the daily plan and saved lists in localStorage so they survive a page reload.
- Calculating live totals for exercises, minutes and calories as the plan changes.
- Making the 3-column library adapt cleanly to tablet and mobile.
- Fetching workouts from the REST API and handling loading states.
Future plans and improvements
- Add user accounts so plans sync across devices.
- Add search and category filters to the workout library.
- Add progress charts for weekly workouts and calories.
Main technology stack
- Next.js (App Router)
- TypeScript
- Tailwind CSS
- Lucide React
- React Hot Toast
- REST API
- Vercel