11 — Proyectos de Práctica

Vas a aprender 10x más construyendo cosas que mirando tutoriales.

🟢 Nivel 1 — Principiante (semanas 1-4)

Solo HTML + CSS + un toque de JS.

  1. Página personal / CV online
    • Tu nombre, foto, bio, skills, links.
    • Deploy: GitHub Pages.
  2. Landing page de un producto inventado
    • Hero, features, testimonios, CTA.
    • Tip: copiá el diseño de una web real (no para publicar, para practicar).
  3. Calculadora simple
    • Solo suma/resta/multiplicación/división.
    • HTML para botones, JS para la lógica.
  4. Lista de tareas (To-Do)
    • Agregar, marcar completada, borrar.
    • Guardar en localStorage.
  5. Reloj digital + cronómetro
    • Practicás setInterval y Date.

🟡 Nivel 2 — Intermedio (semanas 5-12)

Ya con frameworks (React) y APIs externas.

  1. App del clima
    • Buscás una ciudad → mostrás el clima.
    • API gratis: OpenWeatherMap.
  2. Buscador de películas / Pokemon
    • Input + lista de resultados.
    • APIs: OMDb, PokeAPI.
  3. Quiz interactivo
    • Preguntas, opciones, score final.
    • Datos de una API o JSON local.
  4. Clon de Twitter (frontend solo, mockeado)
    • Feed, likes, retweet (sin backend).
  5. Carrito de compras
    • Productos, agregar al carrito, total dinámico.
  6. Conversor de monedas
    • Selector de monedas, conversión en vivo.
  7. App de notas tipo Notion (básica)
    • Crear, editar, borrar notas.
    • LocalStorage o backend simple.

🟠 Nivel 3 — Avanzado (semanas 13-24)

Full-stack: frontend + backend + BD + autenticación.

  1. Blog personal full-stack
    • Login, crear/editar/borrar posts, comentarios.
    • Stack: Next.js + Prisma + PostgreSQL.
  2. Acortador de URLs (tipo bit.ly)
    • Frontend simple, backend que genera links cortos.
  3. Clon de YouTube (UI + backend simple)
    • Subir y reproducir videos.
    • Bonus: comentarios y likes.
  4. App de finanzas personales
    • Categorías de gastos, gráficos, exportar a CSV.
  5. Chat en tiempo real
    • Stack: Socket.io o Server-Sent Events.
  6. E-commerce completo
    • Productos, carrito, checkout (Stripe en modo test).
  7. Red social mini (Twitter-like)
    • Usuarios, posts, seguir, feed.
  8. Kanban estilo Trello
    • Drag & drop, columnas, tarjetas.

🔴 Nivel 4 — Pro / Portfolio killer

  1. App con IA (chatbot personalizado)
    • Frontend + API de Claude/OpenAI.
    • Bonus: streaming de respuestas.
  2. Buscador semántico de documentos (RAG)
    • Subís PDFs → preguntás → IA responde citando.
  3. Plataforma SaaS multi-tenant
    • Login, planes, dashboards, facturación.
  4. Mobile app real (React Native o Flutter)
    • Publicada en TestFlight / Play Store interno.
  5. Open source contribution
    • Bug fix o feature en un proyecto real.
    • El mejor “proyecto” para tu CV.

🎯 Tips para QUE no abandones

  1. Empezá pequeño. Mejor algo terminado que algo perfecto.
  2. Hacé un MVP primero, despues mejorás.
  3. Subilo a GitHub aunque sea feo. Hecho > perfecto.
  4. Deployalo aunque sea simple. Vercel es 1 click.
  5. Mostralo. LinkedIn, Twitter, Discord. Feedback temprano.
  6. Documentá con un README mínimo: qué hace, cómo correrlo, screenshot.

📋 Template de README para tus proyectos

# Nombre del Proyecto

> Una línea de descripción.

![Screenshot](./screenshot.png)

## 🚀 Demo
[Ver en vivo](https://tu-url.vercel.app)

## 🛠️ Stack
- React
- TailwindCSS
- Vercel

## 📦 Instalación local
\`\`\`bash
git clone <url>
npm install
npm run dev
\`\`\`

## ✨ Features
- Feature 1
- Feature 2

## 📄 Licencia
MIT