ricardious
ricardious
Guatemala, GT

Proyecto Seleccionado

Semestrix

Plataforma de planificación académica enfocada en organización semestral, creación de horarios, seguimiento del progreso y visualización de datos del estudiante.

Visitar sitio

Fecha

2026

Rol

Product Design, Frontend Development

Stack

React, TypeScript, FastAPI, PostgreSQL

Resumen

Semestrix

Semestrix es un sistema de planificación académica pensado para estudiantes de ingeniería. Reúne organización de cursos, horarios semanales, historial académico, planificación de semestres y seguimiento del progreso en una sola experiencia de producto.

Landing, onboarding y vistas internas diseñadas como un solo sistema visual.

Planificación semanal, organización por semestre e historial académico dentro del mismo flujo.

Frontend estructurado con Atomic Design, custom hooks y capa de servicios.

Backend API construido alrededor de auth, scraping, historial, perfiles, cursos, horarios y analíticas.

Preview for Semestrix

Contexto

Diseñado alrededor del flujo académico real

El objetivo no era solo mostrar datos, sino ayudar al estudiante a entender en qué punto está dentro de la carrera, qué cursos puede llevar después y cómo cada decisión de semestre afecta su progreso a largo plazo.

Eso implicó diseñar un producto capaz de moverse con naturalidad entre planificación, validación, visualización y uso diario sin sentirse como un conjunto de herramientas separadas.

Sistema

Frontend y backend pensados como un solo producto

El frontend resuelve la capa interactiva: landing, dashboard, constructor de horarios, flujos de perfil y vistas académicas. El backend soporta autenticación, datos académicos, scraping, historial y endpoints de analíticas.

Juntos forman un asistente académico mucho más completo que un dashboard aislado.

Enfoque

Claridad visual sin perder profundidad de producto

La interfaz usa tarjetas de alto contraste, flujos guiados y una jerarquía clara para mantener legible información académica compleja. La animación y el acabado visual se usan para orientar, no para distraer del objetivo principal.

El resultado es un producto expresivo, pero anclado en utilidad, orden y progresión.

Stack

Herramientas

Frontend

  • React
  • TypeScript
  • Vite 7
  • Tailwind CSS 4
  • TanStack Query
  • React Router DOM 7
  • Framer Motion
  • Three.js + React Three Fiber

Backend

  • FastAPI
  • SQLAlchemy
  • PostgreSQL / Neon
  • JWT Auth
  • Pydantic
  • httpx + aiohttp
  • BeautifulSoup + lxml

Alcance

  • Landing y onboarding
  • Planificación semanal de horarios
  • Importación de historial académico
  • Organización por semestre
  • Seguimiento del progreso
  • Perfiles y analíticas

Galería

Vistas del Proyecto

Presentación principal de Semestrix
Semestrix landing page in light mode
Semestrix login modal
Semestrix dashboard progress view
Semestrix semester planning dashboard
Semestrix weekly schedule builder
Semestrix profile dashboard
Semestrix settings page
Semestrix dashboard overview
Next project: Liquid Glass

Siguiente Proyecto

Liquid Glass