Portfolio · Proyectos de práctica

Lo que construyo mientras aprendo

Una colección honesta de proyectos de práctica. Algunos son ejercicios técnicos, otros son ideas que quería explorar. Todos tienen código real y lo que aprendí con cada uno.

12
Proyectos
8
Tecnologías
2024
Actualizado
Stack cubierto:
React Next.js Node.js Express PostgreSQL MongoDB Tailwind Docker REST APIs TypeScript
Filtrar: Mostrando 8 proyectos
🎬
Frontend API
Buscador de Películas

App de búsqueda y exploración de películas usando la API de TMDB. Con sistema de favoritos, historial de búsqueda y páginas de detalle completas.

ReactReact RouterCSS ModulesTMDB API
Funcionalidades
  • Búsqueda en tiempo real con debounce
  • Sistema de favoritos con persistencia
  • Páginas de detalle con reparto y trailers
  • Filtros por género y año
  • Modo oscuro / claro
Aprendizajes clave
  • Custom hooks para fetch con caché
  • React Router v6 con lazy loading
  • Debounce y cancelación de requests
  • CSS Modules con themes dinámicos
Frontend Performance
Landing Page de Alta Conversión

Landing page para un SaaS ficticio optimizada para conversión y velocidad. Lighthouse 98/100. Animaciones CSS puras, zero JS para el render inicial.

HTML5CSS3Vanilla JSSEO
Funcionalidades
  • Lighthouse 98/100 en performance
  • Core Web Vitals en verde
  • Animaciones CSS sin dependencias
  • Formulario con validación nativa
  • Schema markup para SEO
Aprendizajes clave
  • Optimización de fuentes y recursos
  • Critical CSS y render-blocking
  • Intersection Observer API
  • Copywriting para conversión
📋
Fullstack Backend
API REST con Autenticación

API REST completa construida con Express y PostgreSQL. Incluye autenticación con JWT, roles de usuario, rate limiting, documentación con Swagger y tests.

Node.jsExpressPostgreSQLJWTJest
Funcionalidades
  • Auth con JWT + refresh tokens
  • Roles: admin, user, moderator
  • Rate limiting por IP y por usuario
  • Documentación Swagger auto-generada
  • Tests de integración con Jest
Aprendizajes clave
  • Diseño de API RESTful
  • Middlewares de Express
  • Testing de endpoints con Supertest
  • Migraciones de BD con Knex.js
📊
Frontend Dashboard
Dashboard de Analítica

Panel de métricas interactivo con gráficos dinámicos, datos en tiempo real simulados y múltiples vistas configurables. Modo oscuro nativo.

ReactRechartsTypeScriptTailwind
Funcionalidades
  • 6 tipos de gráficos diferentes
  • Actualización de datos en tiempo real
  • Filtros por período y métricas
  • Exportación de datos a CSV
  • Modo oscuro / claro persistente
Aprendizajes clave
  • Recharts para visualización
  • TypeScript con React
  • Patrones de composición de componentes
  • Custom hooks para datos simulados
💬
Fullstack Tiempo Real
Chat en Tiempo Real

Aplicación de mensajería con salas de chat, mensajes privados, indicadores de escritura y notificaciones. Backend con Socket.io.

ReactSocket.ioNode.jsRedis
Funcionalidades
  • Salas de chat públicas y privadas
  • Mensajes directos entre usuarios
  • Indicadores de escritura en tiempo real
  • Estado online/offline
  • Historial de mensajes con Redis
Aprendizajes clave
  • WebSockets con Socket.io
  • Redis para pub/sub
  • Gestión de eventos en tiempo real
  • Optimistic UI en chat
🌦
Frontend API
App del Tiempo

Aplicación meteorológica con geolocalización, búsqueda por ciudad, pronóstico a 7 días y visualización de datos históricos. Mi primer proyecto con APIs externas.

Vanilla JSOpenWeather APIChart.js
Funcionalidades
  • Geolocalización del navegador
  • Búsqueda por nombre de ciudad
  • Pronóstico a 7 días
  • Gráfico de temperaturas con Chart.js
Aprendizajes clave
  • Fetch API y manejo de errores
  • Geolocation API del navegador
  • Async/await con múltiples requests
  • Chart.js para visualización
📝
Fullstack SaaS
App de Notas con Markdown

Gestor de notas con soporte Markdown, etiquetas, búsqueda full-text y sincronización entre dispositivos. Editor WYSIWYG incluido.

Next.jsPostgreSQLPrismaNextAuth
Funcionalidades
  • Editor Markdown con preview en tiempo real
  • Búsqueda full-text en PostgreSQL
  • Auth con Google y GitHub via NextAuth
  • Etiquetas y organización por carpetas
Aprendizajes clave
  • Next.js App Router y Server Components
  • Prisma ORM con migraciones
  • Full-text search en PostgreSQL
  • OAuth con múltiples proveedores
Registro de aprendizaje

Qué estoy aprendiendo

Un log honesto de mis objetivos de aprendizaje: lo que ya domino, en qué estoy trabajando ahora y qué viene a continuación.

⚛️
Frontend
React Avanzado

Patrones avanzados, optimización de renders, Suspense y Server Components.

Dominado
🔷
Backend
TypeScript Profundo

Tipos avanzados, generics, conditional types y decorators.

En progreso
🐳
DevOps
Kubernetes

Orquestación de contenedores, Helm charts y CI/CD pipelines.

Próximamente
🧪
Testing
Testing E2E

Playwright para tests end-to-end, visual regression testing.

En progreso
Actividad

GitHub — último año

Ver perfil →
487
Commits
12
Repos públicos
34
PRs mergeadas
8
Issues cerradas
Progreso técnico

Dónde estoy ahora mismo

Autoevaluación honesta de mis niveles por área. No hay "experto" en este mundo, siempre hay más que aprender.

JavaScript / TypeScript90%
React & Ecosistema85%
Node.js / Express80%
SQL / PostgreSQL75%
DevOps / Docker / AWS60%
Testing (Jest/Cypress)65%
Hoja de ruta
Fundamentos sólidos

HTML, CSS, JavaScript nativo. DOM, eventos, asíncrono. Sin frameworks primero.

Completado — Ene 2024
React + Backend básico

Componentes, hooks, estado. Node.js con Express. Primera API REST funcional.

Completado — Mar 2024
Proyectos fullstack reales

Base de datos, autenticación, despliegue. Primeros proyectos para clientes reales.

Completado — Jul 2024
TypeScript + Testing

Código tipado, tests unitarios e integración. Calidad de código profesional.

En progreso — 2024 Q4
DevOps & Arquitectura

Kubernetes, CI/CD avanzado, microservicios, arquitectura de sistemas escalables.

Próximo — 2025
Herramientas

Lo que uso cada día

No las herramientas más populares, sino las que me hacen más productivo.

💻
VS Code
Editor de código

Con extensiones cuidadosamente seleccionadas. Prettier, ESLint, GitLens y Tailwind IntelliSense son imprescindibles.

🎨
Figma
Diseño UI/UX

Para wireframes, prototipos y diseño final antes de empezar a programar. Agiliza mucho el proceso de desarrollo.

🐙
GitHub
Control de versiones

GitHub Actions para CI/CD. Convenciones de commits con Conventional Commits. PRs y code review aunque trabaje solo.

🐳
Docker
Contenedores

Para entornos de desarrollo reproducibles y despliegue consistente. Compose para desarrollo local, swarm para producción simple.

🔌
Postman
Testing de APIs

Para documentar y testear APIs. Colecciones compartidas con clientes y equipos. Últimamente combinando con Thunder Client.

📝
Notion
Gestión de proyectos

Documentación técnica, gestión de tareas y comunicación con clientes. Plantillas reutilizables para cada tipo de proyecto.

¿Tienes un proyecto en mente? Cuéntamelo.

Primera consulta gratuita. Respondo en menos de 24 horas.

Trabajemos juntos →