Chessmate

Una academia de ajedrez online con cursos interactivos.

Destacado
2025
Frontend
Proyecto personal

Sobre el proyecto

Chessmate es una plataforma web moderna para aprender ajedrez online mediante cursos interactivos.

La diseñé desde cero en Figma y la desarrollé con React y TypeScript, simulando un backend completo desde el cliente.

Funcionalidades

Registro y login
Filtro y búsqueda de cursos
Compra de cursos
Dashboard personalizado
Classrooms virtuales
Seguimiento de progreso

Stack tecnológico

Lenguajes y frameworks

React
TypeScript

Librerías y utilidades

React Query
Zustand
React Router
React Hook Form
Zod (+ resolvers)
Embla Carousel
React Player

Diseño y estilos

CSS Modules
Figma
Diseño responsive

Herramientas

Vite
Git
npm

Proceso de desarrollo

Chessmate se diseñó y desarrolló desde cero para simular una plataforma real de aprendizaje online, completamente del lado del cliente y sin backend. El objetivo era rehacer una versión anterior del proyecto con todo lo que había aprendido desde entonces de diseño y código.

Planifiqué la arquitectura en Figma, con componentes reutilizables para cada sección (Home, Courses, Dashboard, Classroom…). En el código usé Zustand para el estado global y React Query para manejar los datos simulados en localStorage, imitando llamadas a una API real. Así funcionan compras, progreso y autenticación sin servidor, con feedback dinámico ante errores y rutas inválidas.

Las rutas privadas usan React Router y los formularios se validan con React Hook Form y Zod. En lo visual, CSS Modules, Embla Carousel y React Player mantuvieron un diseño fluido y con buen rendimiento, con Vite para el build.

Retos técnicos

Validación y feedback visual ante posibles errores
Protección de rutas
Sincronización en tiempo real entre componentes
Optimización de rendimiento con React Query

Notas

Nota: La demo de GitHub Pages usa un router con hash porque GitHub Pages solo sirve archivos estáticos. En local, el router del navegador da URLs limpias y enlaces directos reales (/dashboard, /course/:id, /classroom).

Pruébalo

Inicia sesión, compra un par de cursos y explora el panel. El README explica cómo forzar errores desde la consola del navegador para ver el sistema de feedback en acción.