Inspiration
💡Like many fitness enthusiasts, I found myself juggling between different apps for tracking workouts, steps, diet, and goals. Most were either overly complex or lacked personalization. I wanted to build something lightweight, visually appealing, and functional that anyone — from a beginner to a gym-goer — could use easily.
What it does
GymFolio is an all-in-one fitness dashboard that allows users to: 👤 Enter Personal Details: Capture name, age, gender, and basic health stats. ⚖️ Track Health Metrics: Input and manage data like weight, blood pressure, sugar level, and daily step count. 📊 View a Personalized Dashboard: Navigate to different modules like workout logging, diet plans, and goal setting. 💪 Log Workouts: Explore a dynamic list of exercises and view a chart of workout reps across the week. 🥗 View Weekly Diet Plans: Access curated diet charts for each day of the week. 🎯 Set Goals: Define personal goals like target weight, step count, and weekly workout frequency. 🔄 Seamlessly Navigate: Move between sections with smooth transitions and responsive UI — no page reloads required.
How we built it
Frontend: HTML5, CSS3 with custom styling using CSS variables, and vanilla JavaScript for interactivity. Design Approach: Clean, modern UI with a focus on user experience. Layouts were crafted to be mobile-responsive and intuitive. Functional Modules: User profile input (name, age, gender) Health metrics tracking (weight, blood pressure, sugar level, daily steps) Dashboard with access to: Workout logging Weekly diet plans Goal setting Calendar (planned) Data Visualization: Used HTML Canvas and Chart.js (optional) to display workout trends like reps over the week.
Challenges we ran into
Ensuring a smooth transition between pages/interfaces while preserving user input. Handling form validations effectively without affecting user flow. Implementing back navigation without reloading or losing user data. Making the design responsive across various screen sizes and maintaining consistency.
Accomplishments that we're proud of
What we learned
Mastered DOM manipulation and dynamic HTML content rendering. Improved CSS styling techniques, especially for responsive design and UI consistency. Learned how to handle multi-step forms and state management on the frontend without external libraries.
What's next for GymFolio
Integrating localStorage or a backend to persist user data. Adding authentication and multi-user support. Expanding the calendar module for goal and workout tracking. Adding reminders and progress insights based on data trends.
Log in or sign up for Devpost to join the conversation.