🏋️ HeavyLifting - Fitness Tracking Platform

📖 About The Project (https://lnkd.in/dGFA7_9w)

HeavyLifting is a comprehensive, full-stack fitness tracking application designed to help athletes monitor their progress, track workout volumes, and achieve their personal records. The platform operates on a Freemium Business Model, providing robust tracking features for free users, while offering a premium tier for advanced analytics and professional Coach integration.

This project was built with a strong emphasis on Clean Architecture, SOLID principles, and Modern UI/UX design utilizing a custom glassmorphism design system.

✨ Key Features

• Real-Time Workout Tracking: Log sets, reps, and weights dynamically during a session.
• Advanced Analytics & Dashboards: Visualize training volume (Line Charts) and Personal Records (Bar Charts) using Chart.js.
• Freemium Subscription Model:
  • Basic Tier: Access to core workout tracking and basic dashboards.
  • Premium Tier: Unlocks the "Explore Coaches" feature, allowing users to hire and interact with professional trainers.
• Coach Integration: Coaches can monitor their assigned athletes' progress and adjust training parameters.
• Intelligent Caching: Implemented in-memory caching to optimize database queries for analytics and dashboard metrics.

🏗️ System Architecture & Design

The system is decoupled into a standalone frontend Single Page Application (SPA) and a robust RESTful API backend.

Backend (.NET Core Web API)

The backend enforces Clean Architecture to maintain separation of concerns, testability, and scalability:

• Domain Layer: Contains core entities (WorkoutSession, WorkoutSet, Exercise) and custom exceptions.
• Application Layer: Handles business logic, DTOs, and interfaces (IWorkoutService). Utilizes AutoMapper for data transformation.
• Infrastructure Layer: Implements the Repository Pattern (WorkoutRepository) and manages Entity Framework Core configurations and SQL Server integration.
• Presentation Layer (API): Minimal APIs and Controllers secured by JWT (JSON Web Tokens).

Frontend (Angular 17+)

• Standalone Components: For modularity and lazy loading.
• Reactive Forms: For secure and validated data entry (Login, Registration, Profile updates).
• State Management: Handled via Angular Services (AuthService, AnalyticsService, ProfileService) with RxJS Observables.
• Security: Route Guards to protect authenticated routes and premium features.

💻 Tech Stack

• Frontend: Angular, TypeScript, RxJS, Chart.js (ng2-charts), HTML5/CSS3 (Custom Glassmorphism).
• Backend: C#, ASP.NET Core 8 Web API, Entity Framework Core.
• Database: SQL Server.
• Authentication: ASP.NET Core Identity + JWT Bearer Tokens.

📂 Repository Structure

HeavyLifting-Monorepo/
│
├── Backend/                 # ASP.NET Core Web API (Clean Architecture)
│   ├── HeavyLiftingTracker.API/
│   ├── HeavyLiftingTracker.Application/
│   ├── HeavyLiftingTracker.Domain/
│   └── HeavyLiftingTracker.Infrastructure/
│
├── Frontend/                # Angular SPA
│   ├── src/
│   │   ├── app/             # Standalone Components (Dashboard, Profile, Auth)
│   │   ├── core/            # Services, Guards, Interceptors
│   │   └── models/          # TypeScript Interfaces & DTOs
│   ├── angular.json
│   └── vercel.json          # Deployment & Proxy Configuration
│
└── README.md

🌍 Hosting, Deployment & The "Proxy" Solution

Deploying this application required solving a critical infrastructure challenge regarding Mixed Content (HTTP vs HTTPS).

Frontend Hosting: Deployed on Vercel (Automatically enforces HTTPS).

Backend Hosting: Deployed on runasp.net (A free tier hosting that only supports HTTP).

🔧 The Vercel API Proxy (Solving ERR_CONNECTION_RESET) Browsers actively block secure frontend applications (HTTPS) from communicating with insecure APIs (HTTP). To bypass this without upgrading to a paid SSL backend server, a Reverse Proxy was configured on the Vercel edge network using vercel.json:

{
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "[http://heavylifting-gym.runasp.net/api/:path](http://heavylifting-gym.runasp.net/api/:path)*"
    },
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

How it works:

1. The Angular app sends secure API requests directly to Vercel (e.g., https://heavylifting.vercel.app/api/workouts).
2. Vercel acts as a proxy, securely forwarding the request to the HTTP backend.
3. This completely resolves CORS and Mixed Content issues while keeping the application highly responsive.

👨‍💻 Author

Abdelrahman Abdelhalem

Full Stack Software Engineer

ITI 9-Month Professional Diploma (Intake 46) - Professional Development & Infused-BI CRM Track