Producto propio

programemos.dev

Una plataforma diseñada para aprender programación de forma práctica, estructurada y motivadora.

Descripción

Programemos.dev es una plataforma educativa creada para centralizar el aprendizaje de programación en un solo lugar, ofreciendo una experiencia práctica y guiada completamente en español.

Los usuarios pueden acceder libremente al blog para consultar artículos técnicos, guías y contenido orientado al desarrollo de software.

Al registrarse, la plataforma incorpora un sistema de gamificación donde los estudiantes obtienen experiencia, suben de nivel, mantienen rachas y desbloquean insignias a medida que avanzan.

La Academia permite practicar con ejercicios reales, mientras que las Rutas de Aprendizaje organizan el contenido en un recorrido progresivo. Además, los Roadmaps ayudan a visualizar qué tecnologías aprender según el perfil profesional que se quiera alcanzar.

La plataforma también incluye proyectos prácticos para fortalecer el portafolio, una comunidad donde compartir el progreso y herramientas que facilitan el trabajo diario de los desarrolladores.

Todo el producto fue concebido con un objetivo claro: ofrecer una experiencia de aprendizaje completa que combine teoría, práctica, comunidad y seguimiento del progreso desde una única plataforma.

Mi participación

  • ▹Diseñé la arquitectura Full Stack de la plataforma.
  • ▹Desarrollé el frontend utilizando Next.js, React y TypeScript.
  • ▹Construí el backend con NestJS, Prisma y PostgreSQL.
  • ▹Diseñé el modelo de datos y la estructura de la base de datos.
  • ▹Implementé la autenticación y autorización mediante Auth0.
  • ▹Diseñé la experiencia de usuario y las interfaces de la plataforma en Figma.
  • ▹Desarrollé el panel de administración para gestionar contenido.
  • ▹Implementé el sistema de gamificación (niveles, experiencia, rachas e insignias).
  • ▹Realizo el mantenimiento y la evolución continua del producto.

Módulos implementados

01

Blog

Publicación de artículos técnicos organizados por categorías y etiquetas, accesibles sin necesidad de registro.

02

Inicio / Aventura

Panel principal del usuario con sistema de niveles, experiencia, rachas, progreso y objetivos de aprendizaje.

03

Academia

Espacio para resolver ejercicios prácticos y reforzar conocimientos mediante aprendizaje activo.

04

Rutas de aprendizaje

Cursos organizados por módulos y lecciones para seguir un recorrido de aprendizaje estructurado.

05

Roadmaps

Mapas interactivos que muestran las tecnologías y habilidades necesarias para diferentes perfiles profesionales.

06

Proyectos

Colección de proyectos prácticos para aplicar conocimientos y construir experiencia real.

07

Comunidad

Espacio social donde los usuarios pueden compartir publicaciones, interactuar y seguir el progreso de otros desarrolladores.

08

Perfil e insignias

Perfil público con estadísticas, logros desbloqueados e historial de progreso.

09

Herramientas

Colección de utilidades para desarrolladores, como generadores de README, formateadores JSON y otras herramientas prácticas.

10

Panel de administración

Sistema para administrar artículos, cursos, ejercicios, rutas de aprendizaje y el contenido de toda la plataforma.

Retos técnicos

01

Diseñar una arquitectura escalable capaz de soportar múltiples módulos dentro de una misma plataforma.

02

Mantener una separación clara entre frontend, backend y acceso a datos para facilitar el crecimiento del proyecto.

03

Diseñar un modelo de base de datos flexible para soportar cursos, ejercicios, usuarios, gamificación y comunidad.

04

Implementar autenticación segura y control de acceso mediante Auth0 y JWT.

05

Construir una experiencia de usuario consistente entre todos los módulos de la plataforma.

06

Diseñar un panel de administración que permitiera gestionar el contenido sin depender del código.

Tecnologías utilizadas

Frontend

  • ▹Next.js 16 (App Router)
  • ▹React 19
  • ▹TypeScript
  • ▹Tailwind CSS 4
  • ▹Auth0
  • ▹react-markdown + remark-gfm
  • ▹ESLint + React Compiler

Backend

  • ▹NestJS
  • ▹TypeScript
  • ▹Prisma + PostgreSQL
  • ▹Passport JWT + Auth0
  • ▹class-validator / class-transformer
  • ▹Express (Nest Platform)

Herramientas

  • ▹Node.js
  • ▹Git
  • ▹GitHub
  • ▹Vercel
  • ▹Postman
  • ▹Jest
  • ▹Supertest
  • ▹Prettier

Lo que aprendí

  • ▹Planificar un producto antes de escribir código permite tomar mejores decisiones de arquitectura.
  • ▹Diseñar pensando en la experiencia del usuario es tan importante como implementar la funcionalidad.
  • ▹Construir un producto completo implica equilibrar desarrollo, diseño, rendimiento y mantenibilidad.
  • ▹Crear un proyecto desde cero fortaleció mi capacidad para tomar decisiones técnicas y resolver problemas de manera autónoma.
  • ▹Desarrollar un producto propio me permitió comprender el ciclo completo de desarrollo, desde la idea inicial hasta una aplicación en producción.

Capturas

Recorrido visual por algunos de los módulos y funcionalidades desarrolladas dentro de la plataforma.