Melita Fit Gym

Freelance fitness and wellness platform engineered with Next.js 15+ and tRPC.

WebNext.jsReact.jsTailwindShadcn-UITypescriptAuth.jsPrismaPostgreSQLFreelance Work
June 28, 2026•Strahinja
Project image
Click on the image to see it in full screen

Melita Fit Gym - Fitness & Wellness Platform

Freelance Project for Melita from Apatin and Her Clients

A high-performance fitness and wellness platform engineered with Next.js 15+ and tRPC. This system implements a strict Server-First rendering strategy with asynchronous data validation via Zod schemas. The architecture supports granular Role-Based Access Control (RBAC) and automated client onboarding through a normalized PostgreSQL database.

Technical Architecture

Core Stack

  • Runtime: Node.js v20+
  • Framework: Next.js 15 (App Router architecture)
  • API Layer: tRPC (End-to-end type-safety)
  • ORM: Prisma
  • Database: PostgreSQL
  • Security: NextAuth.js (JWT Strategy / RS256)
  • Styling: Tailwind CSS (JIT engine)

Technical Specifications

  • Asynchronous Data Mutation: Implementation of tRPC procedures for atomic creation and upsertion of client profiles.
  • Biometric Analytics: Normalization and validation of complex biometric inputs through Zod transformations.
  • RBAC (Role-Based Access Control): Granular access control enforced at the server level (Middleware) and API endpoints (protectedProcedures).
  • Resource Access Logic: Dynamic access control based on Plan and Tier enums (BASIC, PREMIUM, PREMIUM_PLUS).
  • Rendering Optimization: Reduction of Cumulative Layout Shift (CLS) through Server Components and pre-fetching strategies.

Implementation & Deployment

Environment Configuration

The following parameters must be configured in the .env file:

  • DATABASE_URL: Connection string for the PostgreSQL instance.
  • NEXTAUTH_SECRET: Cryptographic key for JWT signing.
  • NEXT_PUBLIC_TRPC_URL: Endpoint for the tRPC router.

Build Procedure

  1. Dependency Installation: npm install --frozen-lockfile
  2. Schema Migration: npx prisma migrate dev
  3. Build Profile: npm run build
  4. Production Execution: npm run start

UI Design Patterns

The system adheres to the SDS (Studio Design System) specifications:

  • Scalable Typography: Implementation of fluid font-size values for responsive typography (scales ranging from 6xl to 9xl).
  • Iconographic Contextualization: Integration of Hugeicons SVG elements for rapid visual data mapping and reduced cognitive load.
  • Data Injection: Elimination of client-side loading states via direct data injection into Server Components.

Project Scope

This is a freelance development project specifically created for Melita from Apatin and her fitness training clients. The platform serves as a comprehensive solution for:

  • Client Management: Secure user profiles with detailed health and fitness data
  • Content Delivery: Premium blog posts and video content for training programs
  • Progress Tracking: Dashboard analytics for client progress monitoring
  • Administrative Control: Full content management and user administration capabilities

License

Distributed under the MIT License.