Una de las mejores maneras de aprender es haciendo. Pero a menudo los desarrolladores luchan con la gran pregunta «¿qué debo construir?»

Aquí hay 8 ideas de proyectos, completos con resúmenes de proyectos e ideas de diseño, para empezar a aprender haciendo.

• Negocios &Mundo real: Tablero de estadísticas de mapas
• Diversión &Interesante: Instrumento musical
• Personal &Cartera: Blog
• Productividad: Cuaderno
• Puzzles &Juegos: Space Invaders
• Herramientas &Bibliotecas: Framework Theme
• Proyectos complementarios: Webmentions
• Clones: Product Hunt

Este es un avance del ebook gratuito 50 Proyectos para React &la Web Estática. Puedes encontrar las 50 ideas de proyectos completas, incluyendo estas 8, en 50reactprojects.com.

Map Statistics Dashboard

Categoría: Negocios &Mundo real

Crear un panel de control de mapa que muestre estadísticas e información geográfica sobre el COVID-19.

Breve

Tratar con una pandemia global significa que los virus como el Coronavirus impactan en el mundo de forma diferente según la ubicación geográfica.

Tener un mapa con un desglose de las estadísticas de cada país es una forma útil de poder determinar cosas como qué países han sido más impactados.

Nivel 1

La forma más fácil de ver las estadísticas país por país es tener un mapa por el que se pueda navegar con las estadísticas de cada país disponibles junto a ese país.
Crear una aplicación de mapas que utilice la API de Coronavirus de disease.sh para añadir marcadores al mapa de cada país junto con el número de casos de COVID-19.

Nivel 2

Aunque tener las estadísticas de cada país es útil, podría serlo poder comparar esas estadísticas con el número de casos en todo el mundo.
Añadir un panel de estadísticas que muestre el número de casos de COVID-19 en todo el mundo, así como cualquier otra estadística útil de la API.

Nivel 3

Obtener estadísticas actuales es una buena manera de entender el estado actual del mundo, pero ¿cómo se compara históricamente?
Utilice la API de datos históricos para mostrar gráficos en el tablero de instrumentos que proporcionen contexto al crecimiento y la propagación del virus.

Para hacer

• Crear una nueva aplicación de mapas
• Obtener datos de países de la API
• Añadir marcadores al mapa
• Añadir estadísticas a los marcadores
• Obtener datos globales de la API
• Crear un panel de estadísticas
• Añadir estadísticas globales
• Obtener datos históricos de la API
• Añadir gráficos al mapa

Toolbox

• Abrir la API de datos de enfermedades (disease.sh)
• React Leaflet (react-leaflet.js.org)
• Gatsby Leaflet Starter (github.com)

Tutoriales

• Cómo crear un Dashboard de Coronavirus (COVID-19) & Map App en React con Gatsby y Leaflet (freecodecamp.org)
• Cómo añadir estadísticas de casos de Coronavirus (COVID-19) a tu dashboard de mapas en React con Gatsby (freecodecamp.org)
• Mapas con React Leaflet (egghead.io)

Inspiración

• Dashboard de COVID-19 por el Centro de Ciencia e Ingeniería de Sistemas (CSSE) de la Universidad Johns Hopkins (JHU) (coronavirus.jhu.ed)
• Demo del panel de control del coronavirus (COVID-19) (coronavirus-map-dashboard.netlify.app)

Idea de diseño

Instrumento musical

Categoría: Diversión &Interesante

Crea un piano interactivo con el que puedas tocar música con tu teclado.

Breve

No todo el mundo tiene el lujo de poseer un instrumento musical, pero quizá esas personas tengan un portátil, un teléfono o una tableta. Tener un piano es una manera poderosa de permitir a la gente tocar música incluso si no tuvieron la oportunidad antes.

Nivel 1

Usando el navegador y las APIs de audio web, podemos crear sonidos que, cuando se juntan, pueden sonar realmente como música.
Crear un conjunto de botones que reproduzcan notas de una escala cuando se hace clic.

Nivel 2

Aunque no todo el mundo ha tocado un instrumento antes, el concepto y la interfaz de un instrumento como un piano es, en general, más intuitivo que un montón de botones.
Crea un diseño de piano usando botones que funcionen bien pulsando el botón o usando el teclado físico.

Nivel 3

Puede que tengamos un espacio limitado en el navegador, pero hay una amplia gama de notas, escalas y sonidos que un teclado eléctrico podría hacer con algunos efectos añadidos.
Crea toggles de efectos que cambien el sonido de las notas cuando se activan.

Para hacer

• Crear botones
• Reproducir sonido al hacer clic
• Organizar notas en una escala
• Crear diseño de piano
• Establecer eventos de teclado
• Crear diseño de efectos
• Activar efectos de audio

Toolbox

• React HotKeys (github.com)

Tutoriales

• Construir un piano con React Hooks (dev.to)
• Cómo construir un teclado de piano usando Vanilla JavaScript (freecodecamp.org)
• ¡Construir un piano con tone.js! (dev.to)
• Cómo hice un piano en sólo 1kb de JavaScript (frankforce.com)

Inspiración

• React Guitar (react-guitar.com)

Idea de diseño

Blog

Categoría: Personal &Portafolio

Crea un blog que puedas utilizar para compartir las experiencias y proyectos de tu carrera.

Breve

Con cualquier carrera, tener un blog para compartir tus experiencias es una buena manera de que la gente sepa en qué estás trabajando y ayudar a otros a aprender de tus experiencias.

También es una forma de reforzar lo que has aprendido para poder consultarlo en el futuro.

Nivel 1

Para poder compartir tus experiencias, necesitas una estructura de sitio web que te permita crear nuevos contenidos y gestionar los existentes.

Una forma de hacerlo es creando archivos markdown de los que se nutre tu sitio web para crear nuevas páginas y mostrar los posts.
Crea un blog utilizando archivos markdown como fuente de contenido.

Nivel 2

Tener tu contenido en archivos markdown es una buena forma de gestionar el contenido estático, pero puede que no quieras tener que editar código cada vez que escribas o edites un post.
Integre un sistema de gestión de contenidos que le permita añadir nuevos contenidos o editar los existentes con una interfaz de usuario agradable.

Nivel 3

Si está compartiendo código en su blog, HTML soporta de forma nativa el código y las preetiquetas que le ayudan a formatear el código de forma legible. Pero eso no incluye el resaltado de sintaxis que ayuda a mejorar la legibilidad.
Integra un resaltador de sintaxis que hace que los bloques de código sean más legibles.

Para hacer

• Crear un blog
• Añadir el primer contenido estático
• Fuente de contenido estático
• Integrar CMS
• Añadir código al contenido
• Añadir resaltado de sintaxis

Toolbox

• Netlify CMS (netlifycms.org)
• Prism.js (prismjs.com)

Tutoriales

• Hacer un blog Gatsby con Netlify CMS (gatsbyjs.org)
• Cómo construir tu blog de codificación desde cero usando Gatsby y MDX (freecodecamp.org)

Inspiración

• Gatsby Netlify CMS Starter (gatsby-netlify-cms.netlify.app)

Idea de diseño

Notebook

Categoría: Productividad

Crea una app de bloc de notas para añadir, gestionar y organizar un grupo de notas.

Breve

Tomar notas es una gran manera de asegurarnos de que hacemos un seguimiento de nuestros pensamientos o de recordar los puntos importantes de una reunión. Ser capaz de gestionarlas y organizarlas fácilmente es importante para encontrarlas más tarde!

Nivel 1

El primer requisito de un cuaderno es poder tomar notas. Esto puede ser bastante simple para empezar, donde realmente necesitas algún tipo de entrada que recoja lo que escribes y lo almacene en algún lugar para más tarde.
Crea un formulario para añadir nuevas notas y verlas en una lista.

Nivel 2

Para encontrar tus notas más tarde, quieres alguna forma de organizar esas notas y una manera de buscarlas. Eso incluye añadir categorías o un sistema de etiquetado, así como una interfaz de usuario desde la que realizar búsquedas.
Añadir la posibilidad de etiquetar o categorizar las notas y una entrada para buscar en ellas.

Nivel 3

Nos demos cuenta o no, podemos encontrar conexiones entre nuestros pensamientos y, lo que es más importante, nuestras notas, en las que podemos aprovechar esa red de pensamientos para nuestro cuaderno.
Añadir la vinculación de notas impulsada por Roam Research para crear una red de pensamientos.

Para hacer

• Crear un formulario
• Almacenar nuevas notas
• Lista de notas
• Añadir etiquetas o categorías
• Añadir búsqueda de notas
• Añadir red de notas

Caja de herramientas

• Gatsby Brain Theme (github.com)
• Fuse.js (fusejs.io)

Tutoriales

• Cómo añadir búsquedas a una aplicación React con Fuse.js (freecodecamp.org)

Inspiración

• Foam (foambubble.github.io)
• Roam Research (roamresearch.com)
• Gatsby Garden Theme (github.com)

Idea de diseño

Space Invaders

Categoría: Puzzles &Juegos

Crea un juego de disparos de naves espaciales invasoras del espacio para disparar a múltiples oleadas de naves enemigas.

Breve

Space Invaders es un clásico de las recreativas que te pone en una nave espacial contra una invasión alienígena. Mientras intentas derribarlos, ellos te devuelven los disparos, y sólo tienes una cantidad limitada de protección antes de estar expuesto a ser golpeado.

Nivel 1

La parte central del juego es que te mueves por una nave espacial tratando de golpear a un montón de alienígenas con tus armas. Mientras hay uno de ti, hay muchos de ellos.
Crea una nave espacial que pueda moverse y disparar a los aliens que no se mueven.

Nivel 2

Lo que hace que el juego sea complicado, es que los aliens se mueven constantemente. Cada vez que llegan al borde de la zona de juego, bajan y se aceleran, acercándose a tu nave.
Añade movimiento a los aliens yendo de lado a lado en la zona de juego. Cada vez que los alienígenas llegan a un lado deberían bajar un nivel. También deberían acelerar en ciertos intervalos.

Nivel 3

Estás solo, pero por suerte puedes conseguir algo de protección. Tienes escudos tras los que puedes esconderte y que te ayudan a protegerte mientras duran.
Crea varios escudos delante de la nave espacial del jugador que pueden soportar una cantidad limitada de daño.

Para hacer

• Crear una nueva partida
• Crear alienígenas estáticos
• Crear una nave espacial del jugador
• Añadir los controles de la nave espacial
• Añadir el arma de la nave espacial
• Configurar el alienígena daño
• Hacer que los alienígenas devuelvan los disparos
• Hacer que los alienígenas se muevan
• Añadir intervalos de alienígenas
• Añadir escudos

Tutoriales

• Aprende JavaScript construyendo 7 juegos (freecodecamp.org)

Inspiración

• Invasores del espacio (codepen.io)

Idea de diseño

Tema de marco

Categoría: Herramientas &Librerías

Crea un tema Gatsby que configure un proyecto con el framework CSS Tailwind.

Breve

Como desarrolladores, comúnmente tenemos que hacer un montón de pasos similares cada vez que creamos un nuevo proyecto. Pero herramientas como los temas nos permiten abstraer esos pasos y empaquetarlos de una manera fácil de usar que puede funcionar para cualquier proyecto nuevo.

Nivel 1

Los temas de Gatsby son un sistema similar a un plugin en el que podemos aprovechar la tubería de Gatsby para compartir la funcionalidad como un paquete en npm.

Esto abre la puerta a hacer realmente cualquier cosa que haríamos en un sitio Gatsby, pero haciéndolo reutilizable a cualquier sitio Gatsby.
Crear un nuevo tema Gatsby que, cuando se usa, crea una nueva página de guía de estilo en cualquier proyecto al que se agrega.

Nivel 2

El objetivo de los temas no es sólo crear páginas, sino añadir funcionalidad que nos haga productivos. Esto incluye cosas como marcos de trabajo y configuraciones de proyectos.
Añadir un marco de trabajo CSS al tema Gatsby que permita que el proyecto al que se añade utilice ese marco de trabajo.

Nivel 3

A veces los temas son mejores sólo como herramientas, a veces es útil opinar. Una forma de añadir funcionalidad útil a un framework CSS es crear componentes de stock.
Crear componentes React reutilizables usando el framework CSS que puedan ser usados en el proyecto al que se añade el tema.

Para hacer

• Crear un nuevo tema
• Añadir al proyecto de ejemplo
• Crear una nueva página de estilo
• Añadir el framework CSS
• Utilizar CSS en el ejemplo
• Crear componentes
• Utilizar componentes

Toolbox

• Temas Gatsby (gatsbyjs.org)
• Tailwind (tailwindcss.com)

Tutoriales

• Construir un tema (gatsbyjs.org)
• ¿Qué es Tailwind CSS y cómo puedo añadirlo a mi sitio web o aplicación React? (freecodecamp.org)

Inspiración

• Tema Tailwind de Gatsby (github.com)

Idea de diseño

Menciones web

Categoría: Project Add-Ons

Añadir integración de webmentions a un sitio web que muestre las interacciones de Twitter con el sitio web.

Breve

La interacción social es una forma impactante de aportar más audiencia y conversación a los temas sobre los que escribimos.

Tener algo en un sitio web muestra que la interacción puede ser útil tanto para inspirar a la gente a querer involucrarse como para que la gente sienta que puede ser parte de ella.

Nivel 1

Para hacer uso de las Webmentions, un sitio web necesita estar configurado con metaetiquetas para proporcionar información.
Agrega las metaetiquetas adecuadas a un sitio web y valida su uso con webmention.io.

Nivel 2

La API de Webmentions es una forma de ver programáticamente las conexiones en las interacciones sociales desde una URL de tu sitio web. Te permite obtener el tipo de interacción e incluso el avatar del perfil de la persona.
Conecta un sitio web a Webmentions y añade una lista de interacciones sociales a las páginas de las entradas del blog.

Nivel 3

Ahora que el sitio web está mostrando todas las interacciones, debe haber una manera fácil de unirse a la conversación.
Añadir un enlace social que, cuando se hace clic, crea un tweet con un enlace a la página.

Para hacer

• Añadir metaetiquetas al sitio web
• Validar metaetiquetas
• Conectar con Webmention
• Conectar social a Bridgy
• Lista de interacciones
• Añadir botón de tweet

Caja de herramientas

• Webmention.io (webmention.io)
• Bridgy (brid.gy)
• Gatsby Plugin Webmention (github.com)

Tutoriales

• Indieweb pt2: Uso de Webmentions en Eleventy (mxb.dev)
• Clientside Webmentions (swyx.io)
• Getting started with Webmentions in Gatsby (knutmelvaer.no)
• Building Gatsby Plugin Webmentions (christopherbiscardi.com)

Inspiración

• Knut Melvær (knutmelvaer.no)
• Swyx (swyx.io)

Idea de diseño

Caza de productos

Categoría: Clones

Crea un clon de Product Hunt que permita a la gente publicar un nuevo producto con valoraciones.

Breve

Todos vivimos para los productos, ya sean nuestros teléfonos móviles o las aplicaciones que usamos en nuestros portátiles.

Aunque hay toneladas de productos en el mundo, puede ser difícil navegar entre los buenos y los malos. Herramientas como Product Hunt proporcionan una plataforma para conocer nuevas herramientas y obtener reacciones y reseñas de otros.

Nivel 1

La parte más importante del aprendizaje de nuevos productos es el producto en sí. Queremos saber qué es el producto, qué aspecto tiene y cómo funciona.
Cree una página que le permita añadir un nuevo producto a un sitio web con un título, una imagen y una descripción.

Nivel 2

Cuando aprendemos sobre productos, las reseñas son una forma de confiar en un producto antes de comprarlo. Nos ayuda a ganar confianza en aquello en lo que vamos a gastar nuestro dinero o tiempo.
Añadir la posibilidad de que la gente añada reseñas sobre cada producto.

Nivel 3

A la gente le encantan los productos, así que hay montones de ellos en el mundo. Hay demasiados para tratar de clasificarlos manualmente, por lo que necesitamos un mecanismo para buscar y navegar.
Añadir la posibilidad de buscar productos y navegar por categorías.

Para hacer

• Crear página web de productos
• Crear base de datos
• Añadir formulario de productos
• Añadir producto a la base de datos
• Solicitar producto para página
• Añadir formulario de reseñas
• Añadir reseñas a la base de datos
• Añadir reseñas al producto
• Añadir búsqueda de productos
• Añadir categorías de productos

Toolbox

• Hasura (hasura.io)

Tutoriales

• Construir una app clon de Product Hunt usando Hasura y Next.js (logrocket.com)
• Cómo construir una versión básica de Product Hunt usando React (freecodecamp.org)

Idea de diseño

Más proyectos

Si quieres más ideas de proyectos, ¡consulta 50 proyectos para React & la web estática!

Descarga gratis en 50reactprojects.com