Original article: https://www.freecodecamp.org/news/8-reactjs-project-ideas-to-start-learning-by-doing/

Una de las mejores formas de aprender es haciendo. Pero a veces a los desarrolladores se les dificulta la pregunta de qué construir.

Aquí hay ocho ideas de proyectos, con resumen del proyecto e ideas de bosquejo incluidas, para que puedas empezar a aprender mediante la práctica.

Esto es un avance del libro electrónico gratuito 50 Projects for React & the Static Web. Puedes encontrar las 50 ideas de proyecto (incluidas estas 8) en 50reactprojects.com.

Mapa de información estadística

Categoría: Negocios y Mundo real

Crea un mapa que muestre información estadística y geográfica sobre la enfermedad COVID-19.

Resumen

Tratar de abordar una pandemia global significa que los virus como el coronavirus impactan en el mundo de forma distinta, de acuerdo a la ubicación geográfica.

Tener un mapa detallado con la información estadística de cada país es útil para poder determinar en que países tuvo un mayor impacto.

Nivel 1

La manera más fácil de ver las estadísticas de cada país es tener un mapa navegable, con las estadísticas de ese país al lado de su nombre.

Crea una aplicación de mapeo que use la API Coronavirus disease.sh para añadir marcadores para cada país y el número de casos de COVID-19.

Nivel 2

Si bien es útil tener estadísticas de cada país, sería aún más útil poder comparar esas estadísticas con el número de casos en todo el mundo.

Añade un tablero estadístico que muestre el número de casos de COVID-19 alrededor del mundo y cualquier otra estadística de la API que sea útil.

Nivel 3

Obtener estadísticas actualizadas nos sirve para entender la situación mundial actual, pero ¿cómo se comparan históricamente?

Usa la API de información estadística para mostrar gráficos en el tablero que den contexto al crecimiento y esparcimiento del virus.

Tareas a realizar

  • Crear una nueva aplicación de mapa
  • Obtener de la API información de los países
  • Añadir marcadores al mapa
  • Añadir estadísticas a los marcadores
  • Obtener de la API información mundial
  • Crea un tablero estadístico
  • Añadir estadísticas mundiales
  • Obtener de la API información histórica
  • Añadir gráficos al mapa

Caja de herramientas

Tutoriales

Inspiración

Idea de bosquejo

Bosquejo del mapa de información estadística sobre Coronavirus
Idea de maquetado del mapa estadístico 

Instrumento musical

Categoría: Divertido e Interesante

Crear un piano interactivo en el cual puedas tocar música usando tu teclado.

Resumen

No todos tienen el placer de tener un instrumento musical, pero quizás si tienen una computadora, un teléfono o una tablet. Tener un piano es una forma poderosa de que las personas puedan tocar música aún si nunca tuvieron oportunidad de hacerlo.

Nivel 1

Usando el navegador y APIs de sonidos web, es posible crear sonidos que, al usarlos todos juntos, pueden crear una melodía.

Crea una serie de botones que al apretarlos suenen las notas en una escala.

Nivel 2

Aunque no todos hayan tocado un instrumento, el concepto y la interfaz de un instrumento como el piano es generalmente más intuitivo que un par de botones.

Crea un bosquejo de un teclado de piano a través de botones que funcionen haciendo clic o con el teclado de la computadora.

Nivel 3

Si bien tenemos un espacio limitado en el navegador, hay una amplia variedad de notas, escalas y sonidos que un teclado eléctrico podría reproducir con algunos efectos adicionales.

Crea botones para alternar los sonidos de las notas cuando están activados.

Tareas a realizar

  • Crear botones
  • Realizar un sonido cuando se hace clic
  • Ubicar las notas en una escala
  • Crear el bosquejo del piano
  • Programar eventos del teclado
  • Crear efectos para el bosquejo
  • Alternar efectos de audio

Caja de herramientas

Tutoriales

Inspiración

Idea de bosquejo

Musical-Instrument---Layout
Idea de bosquejo del instrumento musical

Blog

Categoría: Personal y Portfolio

Crea un blog que puedas usar para compartir tu experiencia laboral y proyectos.

Resumen

Para cualquier campo laboral, tener un blog para compartir tus experiencias es una buena forma para que los demás puedan saber en que estás trabajando y que los demás puedan aprender de tus experiencias.

También es una manera de reforzar lo que ya aprendiste para poder usarlo como referencia a ello en el futuro.

Nivel 1

Para poder compartir tus experiencias, necesitas una estructura de sitio web que te permita tanto crear nuevo contenido como administrar el que ya existe.

Una forma de hacerlo es crear archivos de lenguaje de marcado para que tu sitio web pueda utilizarlos para crear nuevas páginas y mostrar los distintos posteos.

Crea un blog usando archivos de lenguaje de marcado como fuente del contenido.

Nivel 2

Tener tu contenido en archivos de lenguaje de marcado es una buena manera de gestionar contenido estático pero quizás no es lo mejor estar editando el código cada vez que escribes o editas un posteo.

Integrar un sistema de gestión del contenido que te permita añadir nuevo contenido o editar el que ya existe con una interfaz de usuario bonita.

Nivel 3

Si vas a compartir código en tu blog, HTML viene con herramientas nativas integradas que te ayudan a darle formato al código de forma legible. Pero éste no incluye ninguna herramienta que ayuda a resaltar la sintaxis del código y de esta manera mejorar la legibilidad.

Integra una herramienta que resalte los bloques de códigos para hacerlos más legibles.

Lista de tareas

  • Crear un blog
  • Añadir primero contenido estático
  • Busca contenido estático
  • Integra un CMS
  • Añadir código al contenido
  • Añadir herramienta para resaltar la sintaxis del código

Herramientas

Tutoriales

Inspiración

Idea de bosquejo

Blog---Layout
Idea de bosquejo de Blog

Cuaderno de notas

Categoría: Productividad

Crea una app de notas para agregar, gestionar y organizar notas.

Resumen

Tomar notas es una gran manera de registrar nuestros pensamientos o aspectos claves de una reunión. Para poder encontrarlos después,  es importante poder organizarlos de manera fácil.

Nivel 1

El primer requisito de un cuaderno de notas es que se pueda hacer notas en él. Esto puede ser bastante simple para empezar ya que necesitamos algún campo de entrada que tome lo que escribas ahí y lo guarde en algún lado para poder usarlo más tarde.

Crea un formulario para añadir nuevas notas y visualizarlas en una lista.

Nivel 2

Para poder encontrar después las notas, vas a querer tener una forma de organizarlas y buscarlas. Eso incluye agregar categorías o algún tipo de sistema de etiquetado y también armar una interfaz de usuario para poder hacer búsquedas.

Agrega la posibilidad de etiquetar o categorizar notas y  un campo de búsqueda para filtrarlas.

Nivel 3

Aunque nos demos cuenta o no, podemos encontrar conexiones entre nuestros pensamientos y nuestras notas. Esa red de pensamientos nos servirá para poder usar en nuestro cuaderno de notas.

Agrega un sistema de enlazado de notas inspirado en Roam Research para crear una red de pensamientos.

Lista de tareas

  • Crear un formulario
  • Almacenar nuevas notas
  • Listar notas
  • Agregar etiquetas o categorías
  • Agregar búsqueda de notas
  • Agregar red de notas

Caja de herramientas

Tutoriales

Inspiración

Idea de bosquejo

Notebook---Layout
Idea de bosquejo para el cuaderno de notas

Space Invaders

Categoría: Puzzles y Juegos

Crear un juego de disparos de naves espaciales basado en el Space Invaders para disparar a varias olas de naves enemigas.

Resumen

Space Invaders es un videojuego clásico de arcade en el cual te enfrentas a una invasión alienígena. Mientras tratas de dispararles, ellos devuelven el fuego y solo tienes protección limitada dentro de tu nave espacial hasta que se acaba y quedas al descubierto para que te disparen.

Nivel 1

La parte central el juego es que te estás moviendo dentro de tu nave espacial mientras tratas de dispararles a los aliens. Mientras que tu estás solo, hay un montón de ellos.

Crea una nave espacial que pueda moverse y dispararle a los aliens que no se mueven.

Nivel 2

Lo que hace al juego difícil es que los aliens se están moviendo constantemente. Cada vez que se pegan contra el borde del área de juego, bajan una línea y aumentan su velocidad, acercándose cada vez más a tu nave.

Agrega movimiento a los aliens que van de lado a lado del área de juego. Cada vez que los aliens llegan al borde, deberían bajar un nivel y aumentar su velocidad a determinados intervalos.

Nivel 3

Estás a tu suerte, pero por lo menos tienes algo de protección. Tienes escudos tras los que puedes esconderte y que te ayudarán a protegerte mientras duren.

Delante de la nave de tu jugador, crea varios escudos que puedan aguantar un número limitado de ataques.

Lista de tareas

  • Crear una partida nueva
  • Crear aliens estáticos
  • Crear la nave espacial del jugador
  • Agregar controles de la nave espacial
  • Agregar armas a la nave espacial
  • Configurar daño a los aliens
  • Hacer que los aliens devuelvan el fuego
  • Hacer que los aliens se muevan
  • Agregar intervalos de los aliens
  • Agregar escudos

Tutoriales

Inspiración

Idea de Bosquejo

Space-Invaders---Layout
Idea de bosquejo para Space Invaders

Tema para librería de Gatsby

Categoría: Herramientas y Librerías

Crear un tema para Gatsby que instale un proyecto con la librería Tailwind CSS.

Resumen

Como desarrolladores, muchas veces tenemos que hacer los mismos pasos cada vez que creamos un proyecto nuevo. Pero herramientas como los temas nos permiten abstraer esos pasos y empaquetarlos de forma fácil para reutilizarlos en cada proyecto nuevo.

Nivel 1

Los temas de Gatsby son como una extensión de sistema con el cual podemos usar la arquitectura en pipeline de Gatsby para compartir funcionalidades como un paquete de NPM.

Esto nos abre las puertas para poder hacer cualquier cosa que haríamos en un sitio Gatsby pero reusable en cualquier sitio Gatsby.

Crea un nuevo tema de Gatsby que, cuando se use, cree una nueva guía de estilo en cualquier proyecto al cual se agregue.

Nivel 2

El objetivo de los temas no es solo crear páginas, sino también agregar funcionalidades que nos sirva. Esto incluye librerías y configuraciones de proyecto.

Agrega un librería CSS al tema Gatsby que permita al proyecto en donde se agrega usar esa librería.

Nivel 3

A veces nos sirve tener nuestra propia opinión y pensar que los temas sirven mejor como herramientas. Una forma de agregar funcionalidades útiles a una librería CSS es crear un stock de componentes.

Crea componentes reusables de React que usen la librería que puede ser usada por el proyecto al que el tema esté siendo usado.

Lista de tareas

  • Crear un nuevo tema
  • Añadir proyecto de prueba
  • Crear nueva página de estilo
  • Añadir librería de CSS
  • Usar CSS en el proyecto de prueba
  • Crear componentes
  • Usar componentes

Caja de herramientas

Tutoriales

Inspiración

Idea de Bosquejo

Framework-Theme---Layout
Idea de bosquejo para Tema de Librería

Webmentions

Categoría: Complementos para Proyectos

Agregar una integración de webmentions al sitio web para que muestre las interacciones de Twitter con el sitio web.

Resumen

La interacción social es una forma poderosa de atraer más audiencia y discusión sobre los temas que escribimos.

Tener algo en un sitio web que muestre esa interacción puede ser útil tanto para inspirar a las personas que quieren ayudar o hacer que las personas sientan que pueden ser parte.

Nivel 1

Para poder Webmetions, un sitio web tiene que tener configurado los metas tags para suministrar información.

Agrega los meta tags correctos a un sitio web y valídalos con webmention.io.

Nivel 2

La API de Webmentions es una forma ordenada de ver conexiones entre las interacciones sociales desde una URL de tu sitio web. Te muestra el tipo de interacción y hasta la foto de perfil de una persona.

Conecta un sitio web a Webmentions y agrega una lista de interacciones sociales a las páginas de un blog.

Nivel 3

Ahora que el sitio web muestra todas las interacciones, tendría que haber una manera fácil de sumarnos a la discusión.

Lista de tareas

  • Agregar meta tags al sitio web
  • Validar meta tags
  • Conectarse a Webmention
  • Conectar las cuentas de redes sociales a Bridgy  
  • Lista las interacciones
  • Agrega botón para crear un tweet

Caja de herramientas

Tutoriales

Inspiración

Idea de Bosquejo

Webmentions---Layout
Idea de bosquejo para Webmentions

Product Hunt

Categoría: Clones

Crear un clon de Product Hunt que permita a los usuarios publicar un nuevo producto con calificaciones.

Resumen

Todos usamos productos, ya sea nuestros móviles o las aplicaciones que usamos en nuestras computadoras portátiles.

Si bien hay toneladas de productos en el mundo, puede ser difícil distinguir lo bueno de lo malo. Herramientas como Product Hunt ofrecen una plataforma para aprender sobre nuevas herramientas y obtener reseñas de otras personas.

Nivel 1

La parte más importante de aprender sobre nuevos productos es el propio producto.

Vamos a querer saber sobre qué es el producto, su apariencia y cómo funciona.

Crea una página que te permita añadir un nuevo producto a un sitio con un título, imagen y descripción.

Nivel 2

Cuando estamos aprendiendo sobre nuevos productos, las reseñas son una forma de confiar en el producto antes de comprarlo. Nos ayuda a crear confianza en lo que vamos a comprar o utilizar nuestro tiempo.

Añade la posibilidad de que las personas agreguen reseñas sobre cada producto.

Nivel 3

Las personas aman los productos, por eso hay toneladas de ellos en el mundo. Debido a que hay demasiados para clasificarlos y ordenarlos manualmente, necesitamos crear un mecanismo para buscar y filtrar.

Añade la posibilidad de buscar productos y filtrarlos por categoría.

Lista de tareas

  • Crear sitio web del producto
  • Crear la base de datos
  • Añadir formulario de productos
  • Añadir producto a la base de datos
  • Hacer un petición de la página de producto
  • Añadir formulario de reseña
  • Añadir reseñas a la base de datos
  • Añadir reseñas al producto
  • Añadir buscador de productos
  • Añadir categorías de producto

Caja de herramientas

  • Hasura (en inglés, hasura.io)

Tutoriales

Idea de bosquejo

Product-Hunt---Layout
Idea de bosquejo de Product Hunt

Más Proyectos

Si quieres más ideas de proyectos, podés visitar el sitio:  50 Proyectos para React y la web estática 50 Projects for React & the Static web!

Stop asking yourself what should I build?

Descárgalo gratis en 50reactprojects.com

Follow me for more Javascript, UX, and other interesting things!