✅ Cada vez que crea una aplicación de lista de tareas, ¿un cachorro? muere?

¿Sabes cuándo estás tratando de aprender algo nuevo, pero te aburres muchísimo de crear la aplicación de ejemplo predeterminada?

Esa es la motivación ILL1 KILLER.

No quiero que mis alumnos se desmotiven y se rindan.

Así que hice esta lista gigantesca de 28 ideas de aplicaciones divertidas que puedes crear mientras aprendes a usar React con Ruby on Rails.

Esta lista asumirá que ya se siente cómodo con Ruby on Rails (o algún otro marco de desarrollo web). Por lo tanto, el bit de backend puede ser un poco complejo para los principiantes, pero el bit de React de front-end debería ser relativamente simple.

Proyecto n. ° 1: una aplicación de calendario para hacer citas (como el calendario de Google)

Esto puede comenzar como una aplicación simple que puede mejorar gradualmente agregando más funciones y mejoras de UX.

Le ayudará a practicar el uso de componentes anidados (como un componente de día, anidado dentro de un componente de semana o un componente anidado dentro de un mes).

Utilizo esto como una aplicación de ejemplo en mi curso Free Complete React on Rails. Así que compruébalo si quieres probar esto.

Puede ver el código completo paso a paso aquí:

Learnetto / calreact

calreact - Aplicación de citas de calendario React and Rails 5 github.com

Proyecto n. ° 2: una aplicación de exploración de Github para encontrar repositorios de código interesantes

Puede crear la parte de búsqueda únicamente en el lado del cliente, pero puede hacerla más divertida almacenando las búsquedas en una base de datos usando Rails y mostrando las búsquedas más populares.

Practicará el uso de una API externa y el manejo de la respuesta JSON. Puede experimentar con la representación previa del componente en el servidor.

Vea este complemento de navegador de Algolia para que fluya su idea:

algolia / github-awesome-autocomplete

github-awesome-autocomplete -: octocat: agrega capacidades de búsqueda instantánea a la barra de búsqueda de GitHub github.com

Proyecto n. ° 3: una aplicación para tomar notas

Podrías ver el poder de React manejando muchos cambios de estado, por ejemplo, habilitando el guardado automático. Consulte Simplenote para ver un buen ejemplo de una aplicación de notas simple pero poderosa.

Si es demasiado difícil como primera aplicación, primero puede probar con un componente de editor de texto externo para aprender cómo funciona, y luego implementar el suyo:

facebook / draft-js

draft-js: un marco de React para crear editores de texto. github.com

Proyecto n. ° 4: agregue un widget de chat de Slack a su sitio

Utilice el componente react-slack-chat para agregar un widget de chat a su sitio existente de Rails. El componente hace la mayor parte del trabajo pesado, pero puedes divertirte creando tu propio bot en Rails y personalizando el widget en React.

El código del componente está en Github:

5punk / reaccionar-slack-chat

react-slack-chat: un hermoso widget de integración web de Slack Chat con diseño de materiales / pegajoso. github.com

Proyecto # 5: generador de memes

Rails puede manejar el almacenamiento y el servicio de una biblioteca de imágenes y memes existentes. Use React para renderizar y manejar el formulario para hacer el meme.

Puede generar el meme en el servidor usando ImageMagick o en el navegador usando canvas. Vea este repositorio de Hung Tran:

tranhungt / creador de memes

meme-maker - ¡Crea tus memes favoritos y envíelos a tu amigo! github.com

Proyecto n. ° 6: aplicación de búsqueda de imágenes gratuita en tiempo real

Utilice la API Unsplash para obtener fotos gratuitas de alta calidad:

unsplash / unsplash_rb

unsplash_rb: contenedor de Ruby para la API Unsplash. github.com

Agrega animaciones geniales usando los complementos de animación de React.

Permita que los usuarios marquen sus imágenes favoritas. Incluso podría experimentar haciendo que el backend sea solo una aplicación de la API de Rails y hacer una aplicación React separada para el front-end.

Proyecto # 7: Club de lectura

Una aplicación simple donde usted y sus amigos pueden compartir sus libros favoritos y discutirlos (como Goodreads). El backend podría ser una simple aplicación Rails CRUD, pero podrías convertir el front-end en una aplicación React de una sola página y jugar con el enrutador React y Redux.

Proyecto # 8: cliente web de Twitter para múltiples cuentas (como Tweetdeck)

Una aplicación de cliente web de Twitter en la que puede conectar más de una cuenta de Twitter (usando OAuth) y luego agregar varias columnas a la interfaz de usuario, para cosas como el feed, las notificaciones, la búsqueda, los mensajes directos.

Utilice la joya de Twitter de Erik Michaels-Ober:

sferik / twitter

twitter: una interfaz Ruby para la API de Twitter. github.com

Esto le dará la incomparable alegría de lidiar con los ridículos límites de tasa de API de la empresa más amigable para los desarrolladores del mundo.

Puede agregar la búsqueda automática al estilo Tweetdeck de nuevos tweets y notificaciones mediante sondeo o Action Cable.

Muchos componentes anidados y puedes probar algunas animaciones simples en React.

Podría ser mejor comenzar con la construcción de capacidades de lectura. Una vez que tenga eso, puede agregar la capacidad de publicar, dar me gusta y retuitear.

Proyecto n. ° 9: IU personalizada de OpenStreetMap

¿Sabías que el sitio web de OpenStreetMap es una aplicación Rails?

Puede obtener el repositorio aquí, configurarlo en su propia máquina y luego jugar con la adición de React al front-end.

openstreetmap / openstreetmap-sitio web

openstreetmap-website - Aplicación Mirror of the Rails que impulsa //www.openstreetmap.org (alojado en git: // git… github.com

Proyecto # 10: Ruleta de almuerzo en equipo

Un sitio web para ayudarte a decidir dónde ir a almorzar con tu equipo. El backend de Rails solo necesita ser una aplicación CRUD simple que permita a los miembros del equipo ingresar sugerencias de lugares. Puede utilizar la API de Foursquare para realizar búsquedas y completar automáticamente.

¡Y usa React para algunas animaciones ridículas!

Si no le gusta el almuerzo, tome café o cócteles o algo más emocionante.

Proyecto # 11: Super Procrastinator

Un único sitio web al que puede acceder para evitar el trabajo: lea Reddit, Hacker News, Product Hunt, Medium, Slashdot y más en un solo lugar.

Utilice el backend de Rails para guardar las cuentas de usuario y las preferencias, y hablar con las diferentes API. También puede obtener datos de las API directamente del lado del cliente.

¿Quieres crear estas aplicaciones conmigo? Ven, echa un vistazo a mi curso completo gratuito de React on Rails, donde te enseñaré cómo ser un profesional en el uso de React with Rails, mientras construyes algunas cosas divertidas.

Proyecto # 12: Sala de chat con Action Cable

Además de aprender a React, esto sería un gran proyecto para probar Action Cable, una nueva característica genial de Rails 5 que agrega soporte WebSocket a Rails. Vea estos ejemplos para comenzar:

rails / actioncable-examples

actioncable-examples - Action Cable Examples github.com

Proyecto # 13: Extra pequeño (un clon mediano)

Consulte esta serie de publicaciones de blog de Andrea Mazzini, en las que describe en detalle cómo construyó un clon de Medium con una aplicación Rails API, React y Flux.

FancyPixel / rieles pequeños

small-rails: pequeño, un pequeño clon de Medium. Rails API github.com FancyPixel / small-frontend

small-frontend: pequeño, un pequeño clon de Medium. React + Flux frontend github.com

Puede construirlo sin usar Flux, pero valdría la pena intentarlo si está preparado para el desafío.

Proyecto # 14: etiquetador de caras

Una aplicación donde puedes subir fotos y etiquetar personas (como en Facebook). Utilice la gema OpenCV Ruby para la detección automática de rostros:

ruby-opencv / ruby-opencv

ruby-opencv - Bifurcación versionada de la gema OpenCV para Ruby github.com

Proyecto # 15: ActiveAdmin con esteroides

Probablemente haya utilizado ActiveAdmin para administrar los registros de su aplicación. Pero la interfaz de usuario no es precisamente inspiradora. Puede cambiar eso tomando una vista a la vez y convirtiéndola en un componente React con un estilo agradable.

Mire el código ActiveAdmin aquí:

activeadmin / activeadmin

activeadmin: el marco de administración para las aplicaciones Ruby on Rails. github.com

Proyecto # 16: Una tienda de comercio electrónico

Mermelada, cerveza, banderas de Inglaterra, curry, todo servido por React on Rails. Si no desea desarrollar las funciones de la tienda en Rails, simplemente use Spree y concéntrese en practicar los componentes de React para la interfaz.

juerga / juerga

spree - Spree es una completa solución de comercio electrónico de código abierto para Ruby on Rails. github.com

¿Adivina qué? Estoy construyendo esta idea de tienda en línea en una serie de tutoriales. ¡El primero se publicará aquí mismo en el blog freeCodeCamp! Asegúrate de seguirme en Medium y registrarte en Learnetto para recibirlo en tu bandeja de entrada.

Proyecto n. ° 17: Solo envíe por correo a ningún chimpancé

Una aplicación de boletín informativo por correo electrónico con una buena interfaz de usuario que no hace que quieras arrancarte el pelo. ¿Y no hay tonterías de mono lindo?

Aún puedes usar la API de Mailchimp o usar Sendgrid. Si ha usado Mailchimp, sabe que hay un montón de funciones que puede intentar crear: ver / filtrar / administrar suscriptores, diseñar formularios, crear campañas y más.

Simplemente elija una función e intente crearla. La mayoría de las funciones implicarán algún tipo de forma, por lo que debería ser una buena práctica dividir su UI en componentes React que manejarán el estado y algunos componentes funcionales sin estado.

Proyecto n. ° 18: Gmail on Rails

Gmail tiene una interfaz de usuario bastante compleja, pero puede comenzar simplemente creando la interfaz de usuario para enumerar y leer correos electrónicos. ¿O tal vez la búsqueda podría ser más divertida?

Use la gema google-api-client y consulte este increíble tutorial de React y el repositorio de código de Mark Brown ☕ para comenzar:

markbrown4 / gmail-react

gmail-react - Un tutorial de React.js - Gmail github.com

Proyecto # 19: DJ Spotify

Una aplicación de DJ construida sobre Spotify. Obtén recomendaciones, crea y mezcla listas de reproducción e incluso permite que otros agreguen canciones a tus listas de reproducción.

Use una gema de envoltura de Ruby para la API de Spotify:

guilhermesad / rspotify

rspotify: un contenedor ruby ​​para la API web de Spotify github.com

He creado una pequeña aplicación con él antes y es bastante fácil de usar. Spotify solo permite que la música se reproduzca con sus propias aplicaciones, por lo que debe mantener la aplicación ejecutándose al mismo tiempo.

Proyecto # 20: tablero de Heroku

Como desarrollador de Rails, probablemente estés muy familiarizado con Heroku. Es un servicio increíble para implementar y alojar rápidamente aplicaciones Rails, perfecto cuando estás haciendo muchas cosas pequeñas para aprender.

Cree un panel simple que enumere sus aplicaciones y le permita ver rápidamente información clave sobre cada una de ellas. Puede agregar capacidades de edición como un segundo paso.

Utilice esta gema para acceder a la API de Heroku:

heroku / platform-api

platform-api: cliente HTTP Ruby para la API de Heroku github.com

Proyecto n. ° 21: cliente AWS S3

Cree una interfaz de usuario moderna y agradable para administrar su cuenta de AWS S3. Utilice la gema Ruby y comience construyendo un componente de navegador de archivos simple. Luego agregue un componente de formulario para cargar archivos.

aws / aws-sdk-ruby

aws-sdk-ruby: el SDK de AWS oficial para Ruby. github.com

Proyecto n. ° 22: panel de análisis de Stripe

Un panel para mostrar algunas estadísticas y gráficos basados ​​en datos de Stripe. La API está muy bien documentada y esta es una gran oportunidad para intentar usar D3 con React (mira esto y esto).

Proyecto n. ° 23: panel de análisis de Google

El panel web predeterminado de Google Analytics está desordenado y es confuso. Podría crear uno más simple que solo muestre la información más importante.

Otra oportunidad para usar D3 o puede probar con otra biblioteca.

Puede acceder a la API de GA con esta joya.

Proyecto # 24: Rastreador de hábitos

¿Cree una aplicación para realizar un seguimiento de sus hábitos diarios y semanales: rutinas matutinas, sesiones de gimnasio, correr, cocinar, meditar, practicar la guitarra, ceremonias del té?

Para inspirarte, echa un vistazo a Loop Habit Tracker o Coach.

Hágalo compatible con dispositivos móviles para que pueda usarlo sobre la marcha. Una vez que se sienta cómodo con React, incluso podría crear una aplicación móvil usando React Native.

Proyecto # 25: Tablero de fitness

Cree un panel para todos sus datos personales de fitness, que extraiga datos de diferentes aplicaciones y presente algunas estadísticas útiles en una interfaz de usuario agradable.

Dependiendo de lo que usen usted, su familia y amigos, puede obtener fácilmente datos de varias API: Fitbit, Google Fit, Moves, Runkeeper, Strava, Withings y muchas más.

Incluso podría permitir que el usuario ingrese datos manualmente para cosas simples como seguimiento de peso y rutinas de ejercicio.

Puede comenzar mostrando informes y luego mejorarlos con nuevas funciones como agregar notas y compartir.

Creé un panel simple para los datos de Fitbit. Vea el código aquí:

Learnetto / reactfit

reactfit: una aplicación de tablero de fitness creada con Rails 5.1 y React.js github.com

Proyecto # 26: Guess My Sketch (juego)

Crea una aplicación de dibujo en la que puedas dibujar con un mouse y un amigo tenga que adivinar lo que dibujaste. Puedes usar lienzo para dibujar. Vea react-sketchpad de Michal Svrček para obtener algunas ideas sobre cómo comenzar:

svrcekmichal / react-sketchpad

react-sketchpad - Bloc de dibujo creado con lienzo github.com

Utilice Rails para cargar y guardar el dibujo y mostrárselo a alguien en otra computadora.

Como ejercicio avanzado de diversión, agregue el aprendizaje automático y haga que la computadora adivine.

Proyecto # 27: Escribes como

Cree una aplicación de clasificación de texto que combine su estilo de escritura con el de un autor famoso, como I Write Like (hecho por Dmitry Chestnykh).

Use classifier-reborn para clasificar el texto y React para manejar el formulario. Esta aplicación es principalmente de backend, así que experimenta con algunas animaciones de la interfaz de usuario. Vea este repositorio para obtener algunas ideas interesantes:

FormidableLabs / react-animaciones

react-animations: una colección de animaciones para bibliotecas de estilo en línea github.com

Proyecto # 28: Tablero de ideas

Cree una aplicación de tablero de ideas utilizando una aplicación de API Rails 5.1 y una aplicación React separada creada con la aplicación Create React. El tablero de ideas es un tablero simple que muestra ideas en forma de mosaicos cuadrados. Puede agregar ideas, editar ideas existentes y eliminar ideas.

¡Ya construí este! Vea estos dos tutoriales en video que le mostrarán cómo construir este paso a paso:

Parte 1:

Tutorial de Rails 5 API y React.js - Cómo hacer una aplicación de tablero de ideas | Learnetto

Tutorial de Rails 5 API y React.js - Cómo hacer una aplicación de tablero de ideas | Learnettolearnetto.com

Parte 2:

Cómo animar un componente usando React Transition Group | Learnetto

Cómo animar un componente usando React Transition Group | Learnettolearnetto.com

Estos tutoriales cubren muchos conceptos prácticos que incluyen componentes funcionales sin estado, componentes basados ​​en clases, uso de axios para realizar llamadas a API, ayuda de inmutabilidad y más.

¡Hay un montón de ideas interesantes para que inicies tu viaje de React on Rails!

¿Quieres crear estas aplicaciones conmigo? Ven, echa un vistazo a los tutoriales gratuitos sobre React, Rails y más en Learnetto.com.

¿Tienes otras ideas? Compártelos en una respuesta a continuación.

Por favor ? r ecommend / clap? y comparte este artículo!