TrackFit Frontend

A modern, intuitive fitness tracking web application built with React for seamless workout performance visualization and analysis.

---

✨ Visual Features

• 🎨 Modern UI/UX Design - Clean, minimalist interface with smooth animations
• 📊 Interactive Data Visualizations - Dynamic charts and progress tracking with Recharts
• ⚡ Fluid Animations - Seamless page transitions and micro-interactions with Framer Motion
• 📱 Responsive Design - Optimized experience across all devices
• 🎯 Intuitive Navigation - Smart routing with React Router for effortless user experience

Core Visual Components

• Performance Dashboard - Interactive analytics with tabbed views for different metrics
• Exercise Form Interface - Elegant workout input with smart validation
• Progress Visualization - Beautiful charts showing workout trends and improvements
• Results Display - Clean, organized presentation of performance metrics

Quick Start

Prerequisites

• Node.js 18+ (for development)
• Modern web browser (Chrome, Firefox, Safari, Edge)

Installation & Setup

# Clone the repository
git clone https://github.com/CarlosOchoa8/trackfit-frontend.git
cd trackfit-frontend

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Environment Configuration

Create a .env file in the root directory:

VITE_EXERCISE_BACKEND_API=[TrackFit_Backend]

TrackFit_Backend

📊 Performance Visualization

Chart Types

• Line Charts - Progress tracking over time with trend indicators
• Bar Charts - Volume and intensity comparisons
• Area Charts - Cumulative performance metrics
• Interactive Tooltips - Detailed information on hover

Data Presentation

• Metric Cards - Clean, card-based layout for key performance indicators
• Color Coding - Intuitive color system for progress visualization

🎯 User Experience Focus

• Simplicity First - "No complications, just info" - clean, focused interface
• Performance Oriented - Fast loading and smooth interactions
• Accessibility - Keyboard navigation and screen reader support
• Mobile First - Responsive design that works perfectly on all devices

---

📋 Project Roadmap

UI/UX Enhancements (In Progress)

• Modern, responsive design system
• Smooth animations and transitions
• Interactive data visualizations
• Intuitive navigation flow
• Dark mode theme support
• Advanced animation patterns
• Improved accessibility features
• Enhanced mobile experience

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

🔗 Project Ecosystem

• Live Demo - Experience TrackFit in action
• TrackFit Backend - FastAPI backend service

---

📞 Support & Feedback

For questions, suggestions, or UI/UX feedback:

• 🐛 Issues: GitHub Issues
• 💬 Feature Requests: Share your ideas for improving the user experience
• 🎨 Design Suggestions: We love feedback on visual improvements