Evolux Platform Frontend

React/PWA frontend for the Evolux platform, focused on workout planning, active training sessions, progress tracking, calories, body metrics, check-ins, and AI support.

Overview

evolux-platform-frontend is the visual application of the Evolux ecosystem. It consumes the main backend for authentication and workout data, and can communicate with the AI Service for chat and workout plan generation.

The application is built as a mobile-first PWA with a modular structure inspired by Feature-Sliced Design. Some flows still use local storage as a fallback while backend integration evolves.

By default, the local development stack uses:

Frontend:    http://localhost:5173
Backend:     http://localhost:3000
AI Service:  http://localhost:3001

Features

• Dashboard with workout, routine, nutrition, and alert metrics.
• Routine management at /fichas.
• Active workout screen at /em-treino/:planId/:dayId.
• Workout history.
• Progress page with charts and estimates.
• Calories and nutrition control.
• Body and body metrics page.
• Check-ins page at /checkins.
• Achievements based on training, nutrition, and progress state.
• Exercise/content library.
• Profile and authentication.
• Floating AI chat.
• AI workout plan generator.
• Premium dark design with custom components.
• PWA support via vite-plugin-pwa.

Stack

• React 19
• TypeScript
• Vite
• Tailwind CSS
• React Router DOM 7
• TanStack Query
• Framer Motion
• Anime.js
• Radix UI primitives
• Recharts
• Sonner
• Next Themes
• Vite PWA Plugin
• Iconify React
• Lucide React

Visual direction

The interface follows a dark, heavy, old-school visual direction focused on real training, discipline, and physical progress.

Main elements:

• black/graphite backgrounds;
• blood-red and aged-gold accents;
• dense premium surfaces;
• strong borders and a slightly brutalist aesthetic;
• direct microcopy;
• controlled animations;
• less generic SaaS feel and more training-oriented identity.

Architecture

src/
  app/                      # Application entry, routes, providers, and global styles
  pages/                    # Route screens
  widgets/                  # Layout, sidebar, navigation, and shell
  features/                 # Features such as auth, AI chat, and AI generator
  entities/                 # Domain models and API services
  shared/                   # API client, config, hooks, libs, and base UI

Important files:

src/app/App.tsx                         # Route tree
src/app/main.tsx                        # React entry point
src/app/styles/index.css                # Global styles and tokens
src/shared/config/env.ts                # Vite env reader
src/shared/api/client.ts                # Backend HTTP client
src/shared/lib/storage.ts               # Local storage helpers
src/shared/ui/ui/                       # Base components
src/shared/ui/premium/                  # Premium visual components
src/shared/ui/anime/AnimeOrchestrator.tsx
src/widgets/layout/ui/AppLayout.tsx
src/widgets/sidebar/ui/DesktopSidebar.tsx
src/widgets/navigation/ui/BottomNav.tsx

Implemented routes

Based on src/app/App.tsx:

/onboarding
/em-treino/:planId/:dayId
/
/fichas
/fichas/:id
/treino
/historico
/calorias
/corpo
/checkins
/conquistas
/ai-generator
/progresso
/biblioteca
/perfil

Design system

The application uses custom components built with Tailwind and Radix UI:

• Button
• Card
• Badge
• Input
• Select
• Dialog
• Sheet
• Tabs
• Toast
• Surface
• PageChrome

These components are not a pure shadcn theme. They were adapted for the Evolux visual identity.

Motion design

Anime.js is used for global orchestration in:

src/shared/ui/anime/AnimeOrchestrator.tsx

Framer Motion is also used in specific pages/components.

Guidelines:

• keep animations short and purposeful;
• avoid childish or excessive motion;
• preserve mobile performance;
• avoid animating large layout regions;
• prefer subtle stagger, hover feedback, and section reveals.

API integration

The app reads configuration through Vite:

• VITE_API_URL: main backend URL;
• VITE_APP_ENV: environment label;
• VITE_APP_NAME: displayed application name.

The frontend calls the backend only. It must not call the AI Service directly.

Integration files:

src/shared/api/client.ts
src/shared/api/me.ts
src/features/auth/api/authService.ts
src/features/ai-chat/api/aiChatService.ts
src/features/ai-generator/api/aiGeneratorService.ts
src/entities/exercise/api/exerciseService.ts
src/entities/routine/api/routineService.ts
src/entities/session/api/sessionService.ts
src/entities/record/api/recordService.ts

Some flows still fall back to local storage when there is no token or when the API does not respond.

Environment variables

Based on .env.example, src/shared/config/env.ts, Dockerfile, and compose.yaml:

Variable	Required	Description	Example
VITE_API_URL	Recommended	Main backend API URL	http://localhost:3000
VITE_APP_ENV	No	Environment label	development
VITE_APP_NAME	No	Application name	evoluX

Local example:

VITE_API_URL=http://localhost:3000
VITE_APP_ENV=development
VITE_APP_NAME=evoluX

Production example:

VITE_API_URL=https://evolux-platform-backend.onrender.com
VITE_APP_ENV=production
VITE_APP_NAME=evoluX

Do not commit a real .env file.

Local installation

cp .env.example .env
npm install
npm run dev

Open:

http://localhost:5173

For full integration, also run:

Backend:    http://localhost:3000
AI Service: http://localhost:3001, reached only through the backend

Scripts

Command	Description
npm run dev	Starts the Vite dev server
npm run build	Generates a production build
npm run preview	Serves the production build locally
npm run format	Formats files with Prettier
npm run typecheck	Typechecks without emitting files
npm run test	Currently runs typecheck
npm run lint	Currently runs typecheck

Build

npm run typecheck
npm run build
npm run preview

The current build may warn about large chunks. This is not a failure, but it indicates an opportunity for code splitting with React.lazy and Suspense.

Docker

The Dockerfile uses VITE_API_URL as a build argument:

docker compose up --build

The current Compose setup publishes the frontend at:

http://localhost:8080

PWA

The PWA configuration is in vite.config.ts with vite-plugin-pwa.

Configured behavior:

• auto-update registration;
• manifest for evoluX;
• portrait orientation;
• dark theme and background;
• static asset caching through Workbox.

The complete offline-first flow is not guaranteed yet.

Recommended validation

npm run typecheck
npm run build

Manual validation:

• /onboarding with login/register;
• /perfil with a valid token;
• routine listing/creation at /fichas;
• routine details at /fichas/:id;
• workout start and /em-treino/:planId/:dayId screen;
• history at /historico;
• calories at /calorias;
• body page at /corpo;
• check-ins at /checkins;
• progress at /progresso;
• floating AI chat;
• plan generator at /ai-generator;
• mobile and desktop navigation;
• PWA installation.

Project status

This repository is under active development.

Current focus:

• stabilize backend integration;
• reduce dependency on local storage fallback;
• improve AI user experience;
• strengthen the premium design system;
• add real tests;
• improve accessibility;
• optimize bundle size and animations.

Known limitations

• Unit/component tests are not configured yet.
• npm run test currently only runs typecheck.
• Some flows use local storage fallback.
• Authenticated screens may show fallback data without a token.
• PWA offline behavior is currently limited to the existing Workbox cache.
• The build may warn about large bundles.
• package.json declares ISC, but the repository contains a proprietary LICENSE. Align this to a single policy.

Roadmap

Short term

• Add route-based code splitting.
• Add tests for auth, routines, AI chat, and generator.
• Improve empty/loading/error states.
• Normalize handling of { ok, data, meta } responses.

Medium term

• Add visual tests for the design system.
• Improve offline support for active workouts.
• Add keyboard navigation to screens and dialogs.
• Create reusable metric widgets.
• Document the custom icon system.

Long term

• Add E2E tests for login, routine creation, and workout completion.
• Create a shared contract package with backend and AI Service.
• Optimize charts and animations on low-end devices.
• Build a full offline-first training log flow.

Commit convention

This project follows Conventional Commits:

feat(scope): add new capability
fix(scope): correct broken behavior
docs: update documentation
style(scope): update visual styling
refactor(scope): improve structure without changing behavior
test(scope): add or update tests
chore(scope): maintain tooling or configuration

License

This project is proprietary and closed-source. All rights are reserved by the original author.

The code may be viewed for educational, auditing, or portfolio purposes, but copying, modifying, distributing, hosting, selling, or using it commercially is prohibited without express written permission.

See LICENSE at the repository root.