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.
- Negocios y Mundo Real: Mapa de información estadística
- Divertido e interesante: Instrumento musical
- Personal y Portfolio: Blog
- Productividad: Notebook
- Puzzles y Juegos: Space Invaders
- Herramientas y Librerías: Tema para la librería Gatsby
- Complementos para el proyecto: Webmentions
- Clon: Product Hunt
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
- Open Disease Data API (disease.sh)
- React Leaflet (react-leaflet.js.org)
- Gatsby Leaflet Starter (github.com)
Tutoriales
- Cómo crear una aplicación de mapeo del Coronavirus en React con Gatsby y Leaflet (en inglés, freecodecamp.org)
- Cómo agregar estadísticas de casos de Coronavirus (COVID-19) a tu mapa de información con Gatsby (en inglés, freecodecamp.org)
- Mapear con React Leaflet (en inglés, egghead.io)
Inspiración
- Tablero COVID-19 del Centro para Sistemas, Ciencia e Ingeniería de la Universidad Johns Hopkins (UJH) (coronavirus.jhu.ed)
- Versión demo del tablero Coronavirus (COVID-19) (coronavirus-map-dashboard.netlify.app)
Idea de bosquejo
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
- React HotKeys (en inglés, github.com)
Tutoriales
- Construyendo un piano con React Hooks (en inglés, dev.to)
- Cómo construir un teclado de piano con Vanilla JavaScript (en inglés, freecodecamp.org)
- ¡Construye un piano con tone.js! (en inglés, dev.to)
- Como creé un piano de solo 1kb de JavaScript (en inglés,frankforce.com)
Inspiración
- React Guitar (en inglés, react-guitar.com)
Idea de bosquejo
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
- Netlify CMS (en inglés, netlifycms.org)
- Prism.js (en inglés, prismjs.com)
Tutoriales
- Creando un Blog con Gatsby y Netifly CMS (en inglés, gatsbyjs.org)
- Cómo crear desde cero tu blog sobre código usando Gatsby y MDX (en inglés, freecodecamp.org)
Inspiración
- Gatsby Netlify CMS Starter (gatsby-netlify-cms.netlify.app)
Idea de bosquejo
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
- Gatsby Brain Theme (github.com)
- Fuse.js (en inglés, fusejs.io)
Tutoriales
- Cómo agregar una búsqueda a una aplicación React con Fuse.js (en inglés, freecodecamp.org)
Inspiración
- Foam (en inglés, foambubble.github.io)
- Roam Research (en inglés, roamresearch.com)
- Gatsby Garden Theme (en inglés, github.com)
Idea de bosquejo
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
- Aprende JavaScript mientras construyes 7 juegos (en inglés, freecodecamp.org)
Inspiración
- Space Invaders (codepen.io)
Idea de Bosquejo
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
- Temas Gatsby (en inglés, gatsbyjs.org)
- Tailwind (en inglés, tailwindcss.com)
Tutoriales
- Creando un Tema( en inglés, gatsbyjs.org)
- Qué es Tailwind CSS y cómo puedo añadirlo a mi sitio web o aplicación React (en inglés, freecodecamp.org)
Inspiración
- Tema Gatsby con Tailwind (en inglés, github.com)
Idea de Bosquejo
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
- Webmention.io (en inglés, webmention.io)
- Bridgy (en inglés, brid.gy)
- Extensión de Webmention para Gatsby (github.com)
Tutoriales
- Indieweb, parte 2: Usando Webmentions en Elventy (en inglés, mxb.dev)
- Webmentions del lado de cliente (en inglés, swyx.io)
- Introducción a Webmentions con Gatsby (en inglés, knutmelvaer.no)
- Creando una extensión de Webmentions para Gatsby (en inglés, christopherbiscardi.com)
Inspiración
- Knut Melvær (knutmelvaer.no)
- Swyx (swyx.io)
Idea de Bosquejo
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
- Construyendo un clon de Product Hunt con Hasura y Next.js (en inglés, logrocket.com)
- Cómo construir una versión básica de Product Hunt con React (en inglés, freecodecamp.org)
Idea de bosquejo
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!
Descárgalo gratis en 50reactprojects.com
- ? Sígueme en Twitter
- ?️ Suscríbete a mi canal de Youtube
- ✉️ Suscríbete a mi boletín de noticias