🥇8 proyectos de aprendizaje

«El maestro comete más errores que el principiante — intentos»

Ofrecemos 8 opciones de proyectos que se pueden hacer «por diversión», para obtener experiencia real en desarrollo.

Proyecto 1. Clon de Trello

Clon de Trello de Indrek Lasn .

Lo que aprenderás:

Organización de rutas de manejo de solicitudes (Routing).
Arrastrar y soltar.
Cómo crear nuevos objetos (tableros, listas, tarjetas).
Validación y manejo de datos de entrada.
Desde el lado del cliente: cómo usar el almacenamiento local, cómo guardar datos en el almacenamiento local, cómo leer datos del almacenamiento local.
Desde el lado del servidor: cómo usar bases de datos, cómo guardar datos en la base, cómo leer datos de la base.

Aquí un ejemplo de repositorio, hecho en React+Redux.

Proyecto 2. Panel de administración

Repositorio de Github.

Aplicación CRUD sencilla, ideal para aprender lo básico. Aprenderemos:

Crear usuarios, gestionar usuarios.
Interactuar con la base de datos: crear, leer, editar, eliminar usuarios.
Validación de entrada y trabajo con formularios.

Proyecto 3. Rastreador de criptomonedas (aplicación móvil nativa)

Repositorio de Github.

En cualquier cosa: Swift, Objective-C, React Native, Java, Kotlin.

Aprenderemos:

Cómo funcionan las aplicaciones nativas.
Cómo extraer datos de APIs.
Cómo funcionan los diseños nativos de páginas.
Cómo trabajar con simuladores móviles.

Prueba esta API. Si encuentras una mejor, escríbelo en los comentarios.

Si te interesa, aquí un tutorial.

Proyecto 4. Configura tu propio config de webpack desde cero

Técnicamente, esto no es una aplicación, pero es una tarea muy útil para entender cómo funciona webpack por dentro. Ahora no será una «caja negra», sino una herramienta comprensible.

Requisitos:

Compilar es7 a es5 (básico).
Compilar jsx a js — o .vue a .js (tendré que aprender about loaders)
Configurar webpack dev server y recarga de módulos en caliente. (vue-cli y create-react-app utilizan ambos)
Usar Heroku, now.sh o Github, aprender a desplegar proyectos de webpack.
Configurar tu preprocesador favorito para compilar css — scss, less, stylus.
Aprender a usar imágenes y svgs con webpack.

Aquí hay un recurso increíble para completos principiantes.

Proyecto 5. Clon de Hackernews

Cada jedi debe crear su propio Hackernews.

Lo que aprenderás en el camino:

Cómo interactuar con la API de hackernews.
Cómo crear una aplicación de una sola página.
Cómo implementar características como ver comentarios, comentarios individuales, perfiles.
Organización de rutas de manejo de solicitudes (Routing).

Proyecto 6. Todolist

TodoMVC.

¿En serio? ¿Todolist? Hay miles. Pero créeme, hay una razón para su popularidad.
Una aplicación de tareas es una excelente manera de asegurarte de que comprendes los fundamentos. Intenta escribir una aplicación en Javascript puro y otra en tu framework favorito.

Aprenderás: