Modo claro

Modo oscuro

https://lemax-pilates.vercel.app/

Aplicación web desarrollada en React como trabajo final de la cátedra Front-End de ADA, basada en un caso real: un estudio de pilates que requería una presencia digital moderna, clara y funcional.

El proyecto consistió en diseñar e implementar una solución digital centrada en la experiencia de usuario, utilizando una arquitectura de componentes reutilizables, manejo de datos estructurados y buenas prácticas de desarrollo Front-End.

• Experiencia digital para bienestar y movimiento
• Deploy
• Índice
• Tecnologías
  • Frontend
  • UI / Estilos
  • Herramientas y entorno
  • Manejo de datos
• Estructura del proyecto
• Características principales
• Características técnicas
• Arquitectura del proyecto
• Desafío del proyecto
• Instalación
• Autoras

• React
• JavaScript (ES6+)
• HTML5
• CSS3

• Material UI (MUI)
• Theming (modo claro / oscuro)
• Responsive Design

• Vite
• Git
• GitHub

• JSON

Lemax_Pilates/
│
├── node_modules/
├── public/
│   └── logo.png
│
├── src/
│   ├── assets/
│   ├── components/
│   ├── data/
│   ├── features/
│   ├── theme/
│   ├── utils/
│   │
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
│
├── .env.example
├── .gitignore
├── .prettierrc
├── eslint.config.js
├── index.html
├── jsconfig.json
├── package.json
├── package-lock.json
├── vite.config.js
└── README.md

• Visualización dinámica de sedes desde archivos JSON
• Sección de reseñas de clientes
• Información de contacto accesible
• Información sobre servicios y disciplinas ofrecidas
• Presentación de instructores calificados
• Beneficios del método Pilates
• Diseño moderno con estética wellness

• Arquitectura basada en componentes reutilizables
• Manejo de datos desacoplado mediante JSON
• Renderizado condicional para estados de carga (Skeleton)
• Implementación de theming dinámico (modo claro / oscuro)
• Diseño responsive con enfoque mobile-first
• Separación de responsabilidades (UI / lógica / datos)
• Optimización de experiencia de usuario (UX)

El proyecto está organizado siguiendo una arquitectura modular basada en funcionalidades (feature-based structure), lo que permite escalar la aplicación de forma ordenada y mantenible.

• features/: contiene las distintas secciones de la aplicación (hero, reviews, locations, etc.), agrupando lógica y UI por funcionalidad
• components/: componentes reutilizables separados por responsabilidad (common y layout)
• theme/: configuración centralizada de estilos y theming
• assets/: recursos estáticos como imágenes y logos
• data/: manejo de datos desacoplado mediante JSON

Esta organización favorece la reutilización, escalabilidad y claridad del código en proyectos de mayor tamaño.

Este proyecto implicó abordar un escenario real, trasladando necesidades concretas de un cliente a una solución digital funcional.

• Interpretación de requerimientos reales
• Diseño de una experiencia intuitiva y accesible
• Organización eficiente de la información
• Implementación de componentes reutilizables
• Trabajo colaborativo mediante control de versiones (Git y GitHub)

Además, se aplicaron buenas prácticas de desarrollo enfocadas en escalabilidad, mantenibilidad y experiencia de usuario.

git clone https://github.com/Antonela89/Lemax_pilates.git
cd Lemax_pilates
npm install
npm run dev

• BORGOGNO, Antonela

• GIAVEDONI, Brisa

• MARTINEZ H, M. Gabriela

Proyecto desarrollado como trabajo final de la cátedra Front-End en ADA, aplicando buenas prácticas de desarrollo, diseño UI/UX y trabajo colaborativo.