Svaki put kad napravite aplikaciju za popis obveza, štene? umre?

Znate kad pokušavate naučiti nešto novo, ali da li vam je reeeeeeallly dosadno graditi zadanu primjeru aplikacije?

To je motivacija №1 KILLER.

Ne želim da se moji studenti demotiviraju i odustanu.

Stoga sam napravio ovaj gigantski popis od 28 zabavnih ideja za aplikacije koje možete izgraditi dok učite koristiti React s Ruby on Rails.

Ovaj će popis pretpostaviti da vam je već ugodno s Ruby on Rails (ili nekim drugim okvirom za web razvoj). Dakle, pozadinski bit može biti pomalo složen za početnike, ali prednji kraj React bita trebao bi biti relativno jednostavan.

Projekt br. 1: aplikacija Kalendar za zakazivanje sastanaka (poput Google kalendara)

Ovo može početi kao jednostavna aplikacija koju možete postupno poboljšavati dodavanjem dodatnih značajki i UX poboljšanja.

Pomoći će vam u vježbanju upotrebe ugniježđenih komponenata (poput dnevne, ugniježđene unutar tjedne komponente ili ugniježđene unutar mjesečne).

Koristim ovo kao primjer aplikacije na svom tečaju Free Complete React on Rails. Pa provjerite želite li ovo isprobati.

Cjelovit detaljni kod možete pogledati ovdje:

Learnetto / Calreact

calreact - React and Rails 5 aplikacija za kalendarske sastanke github.com

Projekt br. 2: Github explorer aplikacija za pronalaženje zanimljivih spremišta koda

Dio za pretraživanje možete izgraditi isključivo na strani klijenta, ali to možete učiniti zabavnijim spremanjem pretraživanja u bazu podataka pomoću Rails-a i prikazivanjem najpopularnijih pretraživanja.

Vježbat ćete koristiti vanjski API i rukovati JSON odgovorom. Možete eksperimentirati s prethodnim prikazivanjem komponente na poslužitelju.

Pogledajte ovaj dodatak za preglednik tvrtke Algolia kako biste krenuli s vašim idejama:

algolia / github-awesome-autocomplete

github-awesome-autocomplete -: octocat: Dodajte mogućnosti trenutnog pretraživanja na GitHub-ovu traku za pretraživanje github.com

Projekt br. 3: Aplikacija za bilježenje

Mogli ste vidjeti moć React-a kako rješava mnoge promjene stanja, recimo, omogućavanjem automatskog spremanja. Pogledajte Simplenote za dobar primjer jednostavne, ali moćne aplikacije za bilješke.

Ako je to previše teško kao prva aplikacija, prvo možete isprobati komponentu vanjskog uređivača teksta da biste saznali kako to radi, a zatim implementirati vlastitu:

facebook / draft-js

draft-js - React okvir za izgradnju urednika teksta. github.com

Projekt # 4: Dodajte widget Slack chat na svoje web mjesto

Upotrijebite komponentu response-slack-chat za dodavanje widgeta za chat na vašu postojeću web stranicu Rails. Komponenta odrađuje većinu dizanja teških tereta, ali možete se zabaviti izradom vlastitog bota u Railsu i prilagodbom widgeta u Reactu.

Kôd komponente nalazi se na Githubu:

5punk / reagiraj-mlitavo-ćaskaj

response-slack-chat - Prekrasan gnjecavi / Materijalni dizajn Slack Chat Web integrirajući widget. github.com

Projekt # 5: Meme generator

Rails mogu podnijeti pohranu i posluživanje biblioteke slika i postojećih mema. Koristite React za prikazivanje i rukovanje obrascem za izradu mema.

Meme možete generirati na poslužitelju pomoću ImageMagicka ili u pregledniku pomoću platna. Pogledajte ovaj izvještaj Hung Trana:

tranhungt / izrađivač memea

izrađivač mema - Napravite svoje omiljene meme i pošaljite ih svom prijatelju! github.com

Projekt br. 6: Aplikacija za pretraživanje besplatnih slika u stvarnom vremenu

Koristite Unsplash API za visokokvalitetne besplatne fotografije:

unsplash / unsplash_rb

unsplash_rb - Ruby omot za Unsplash API. github.com

Dodajte cool animacije pomoću dodataka React Animation.

Omogućite korisnicima da označe svoje omiljene slike. Možete čak i eksperimentirati s izradom pozadine samo od Rails API aplikacije i napraviti zasebnu React aplikaciju za prednji kraj.

Projekt # 7: Klub knjiga

Jednostavna aplikacija u kojoj vi i vaši prijatelji možete dijeliti svoje omiljene knjige i raspravljati o njima (poput Goodreads-a). Zaštita može biti jednostavna Rails CRUD aplikacija, ali možete napraviti React aplikaciju od jedne stranice i igrati se s React usmjerivačem i Reduxom.

Projekt br. 8: Twitter web-klijent za više računa (poput Tweetdecka)

Aplikacija web-klijenta Twittera u kojoj možete povezati više od jednog Twitter računa (pomoću OAuth-a), a zatim dodati više stupaca u korisničko sučelje - za stvari poput feeda, obavijesti, pretraživanja, izravnih poruka.

Koristite dragulj Twittera Erika Michaels-Obera:

sferik / twitter

twitter - Ruby sučelje za Twitter API. github.com

To će vam pružiti neusporedivu radost suočavanja sa smiješnim ograničenjima API stope od tvrtke najprikladnije za programere na svijetu.

Možete dodati automatsko dohvaćanje novih tweetova i obavijesti u stilu Tweetdecka pomoću ankete ili akcijskog kabela.

Puno ugniježđenih komponenata i možete isprobati neke jednostavne animacije u Reactu.

Možda bi bilo najbolje započeti s izgradnjom sposobnosti samo čitanja. Nakon što to imate, možete dodati mogućnost objavljivanja, lajkovanja i ponovnog tweetova.

Projekt # 9: Prilagođeno korisničko sučelje OpenStreetMap

Jeste li znali da je web mjesto OpenStreetMap aplikacija Rails?

Repo možete dobiti ovdje, postaviti ga na svom računalu, a zatim se poigrati dodavanjem React-a na prednji kraj!

openstreetmap / openstreetmap-web stranica

openstreetmap-web stranica - Pokretanje aplikacije Mirror of the Rails //www.openstreetmap.org (hostirano na git: // git… github.com

Projekt # 10: Rulet timskog ručka

Web stranica koja vam pomaže da odlučite gdje ćete sa svojim timom otići na ručak. Rails pozadina samo treba biti jednostavna CRUD aplikacija koja članovima tima omogućuje unos prijedloga mjesta. Možete koristiti Foursquare API za pretraživanje i automatsko dovršavanje.

I upotrijebite React za neke smiješne animacije!

Ako ne volite ručak, napravite kavu ili koktele ili nešto drugo uzbudljivije.

Projekt # 11: Super Procrastinator

Jedino web mjesto na kojem možete izbjeći posao - čitajte Reddit, Hacker News, Product Hunt, Medium, Slashdot i još mnogo toga na jednom mjestu.

Upotrijebite pozadinu Rails za spremanje korisničkih računa i postavki i razgovor s različitim API-ima. Također možete dohvatiti podatke iz API-ja izravno s klijentske strane.

Želite li sa mnom graditi ove aplikacije? Dođite, pogledajte moj besplatni tečaj Complete React on Rails, gdje ću vas naučiti kako biti profesionalac u korištenju React with Rails, dok gradite neke zabavne stvari.

Projekt br. 12: Chatroom s akcijskim kabelom

Uz učenje React-a, ovo bi bio sjajan mali projekt za isprobavanje Action Cable-a, nove nove značajke Rails 5 koja dodaje podršku za WebSocket Rails-u. Pogledajte ove primjere za početak:

tračnice / primjeri kabela

actioncable-examples - Primjeri akcijskih kabela github.com

Projekt # 13: Ekstra mali (srednji klon)

Pogledajte ovu seriju objava na blogu Andree Mazzinija, u kojoj detaljno opisuje kako je izgradio Medium klon s Rails API aplikacijama, React i Flux.

FancyPixel / male tračnice

male tračnice - male, maleni klon srednje veličine. Rails API github.com FancyPixel / small-frontend

small-frontend - Mali, maleni klon Srednje. React + Flux sučelja github.com

Možete ga izraditi bez upotrebe Fluxa, ali možda bi bilo vrijedno pokušati ako ste spremni za izazov.

Projekt # 14: Označavanje lica

Aplikacija u koju možete prenijeti fotografije i označiti ljude (na primjer na Facebooku). Koristite OpenCV Ruby dragulj za automatsko otkrivanje lica:

rubin-opencv / rubin-opencv

ruby-opencv - Verzijska vilica OpenCV dragulja za Ruby github.com

Projekt # 15: ActiveAdmin na steroidima

Vjerojatno ste koristili ActiveAdmin za upravljanje zapisima aplikacija. Ali korisničko sučelje nije baš inspirativno. To možete promijeniti tako što ćete snimati jedan po jedan prikaz i pretvarati ga u lijepo oblikovani React komponentu.

Ovdje pogledajte ActiveAdmin kod:

aktivni administrator / aktivni administrator

activeadmin - Administrativni okvir za aplikacije Ruby on Rails. github.com

Projekt br. 16: E-trgovina

Džem, pivo, zastave Engleske, curry, a sve to poslužuje React on Rails. Ako ne želite nadograđivati ​​značajke trgovine u Railsu, samo upotrijebite Spree i usredotočite se na uvježbavanje React komponenata za prednji kraj.

sprej / sprej

spree - Spree je cjelovito rješenje za e-trgovinu s otvorenim kodom za Ruby on Rails. github.com

Pogodi što? Ovu ideju o internetskoj trgovini gradim u nizu vodiča. Prva će biti objavljena upravo ovdje na blogu freeCodeCamp! Obavezno me pratite na Mediumu i prijavite se na Learnetto da biste je dobili u pristigloj pošti.

Projekt # 17: Just Mail No Chimp

Aplikacija za bilten e-pošte s dobrim korisničkim sučeljem zbog kojega ne želite čupati kosu. I nema slatkih majmunskih gluposti?

Još uvijek možete koristiti Mailchimp API ili Sendgrid. Ako ste koristili Mailchimp, znate da postoji mnoštvo značajki koje možete isprobati - pregledavanje / filtriranje / upravljanje pretplatnicima, dizajniranje obrazaca, stvaranje kampanja i još mnogo toga.

Samo odaberite jednu značajku i pokušajte je izgraditi. Većina značajki uključivat će neku vrstu obrasca, pa bi to trebala biti dobra praksa za dijeljenje korisničkog sučelja na komponente React koje će obrađivati ​​stanje i neke funkcionalne komponente bez stanja.

Projekt # 18: Gmail na tračnicama

Gmail ima prilično složeno korisničko sučelje, ali možete početi tako što ćete samo izgraditi korisničko sučelje za popis i čitanje e-pošte. Ili bi možda potraga mogla biti zabavnija?

Upotrijebite dragulj google-api-client i pogledajte ovaj sjajni tutorial za React i repo koda od Marka Browna ☕ za početak:

markbrown4 / gmail-reagiraj

gmail-response - Vodič za React.js - Gmail github.com

Projekt # 19: DJ Spotify

DJ'ing aplikacija izgrađena na vrhu Spotifyja. Primajte preporuke, stvarajte i miješajte popise pjesama, pa čak i dopustite drugima da dodaju pjesme na vaše popise pjesama.

Koristite Ruby omotač dragulja za Spotify API:

Gilhermesad / rspotify

rspotify - rubin omot za Spotify Web API github.com

S njom sam već izgradio malu malu aplikaciju i vrlo je jednostavna za upotrebu. Spotify omogućuje samo reprodukciju glazbe s njihovim vlastitim aplikacijama, tako da aplikaciju morate nastaviti raditi.

Projekt # 20: Heroku nadzorna ploča

Kao programer Railsa, vjerojatno vam je Heroku dobro poznat. To je sjajna usluga za brzo postavljanje i hosting aplikacija Rails - savršena kada izrađujete puno sitnica za učenje

Izradite jednostavnu nadzornu ploču na kojoj su navedene vaše aplikacije i omogućuje vam brz pregled ključnih podataka o svakoj od njih. Kao drugi korak možete dodati mogućnosti uređivanja.

Upotrijebite ovaj dragulj za pristup Heroku API-ju:

heroku / platforma-api

platform-api - Ruby HTTP klijent za Heroku API github.com

Projekt # 21: AWS S3 klijent

Izgradite lijepo moderno korisničko sučelje za upravljanje vašim AWS S3 računom. Upotrijebite Ruby dragulj i započnite izgradnjom jednostavne komponente preglednika datoteka. Zatim dodajte komponentu obrasca za prijenos datoteka.

aws / aws-sdk-rubin

aws-sdk-ruby - službeni AWS SDK za Ruby. github.com

Projekt # 22: Nadzorna ploča za analitiku pruga

Nadzorna ploča za prikaz nekih statistika i grafikona na temelju podataka pruge. API je vrlo dobro dokumentiran i ovo je sjajna prilika da pokušate koristiti D3 s Reactom (pogledajte ovo i ovo).

Projekt # 23: Nadzorna ploča Google analitike

Zadana nadzorna ploča Google Analyticsa pretrpana je i zbunjujuća. Mogli biste izraditi jednostavniji koji samo pokazuje najvažnije informacije.

Još jedna prilika za upotrebu D3 ili možete isprobati drugu knjižnicu.

Ovim draguljem možete pristupiti GA API-ju.

Projekt # 24: Tragač navika

Izgradite aplikaciju za praćenje dnevnih i tjednih navika - jutarnje rutine, sjednice u teretani, trčanje, kuhanje, meditacija, vježbanje gitare, čajne ceremonije?

Za inspiraciju posjetite Loop Habit Tracker ili Coach.

Neka bude prilagođen mobilnim uređajima kako biste ga mogli koristiti u pokretu. Jednom kada se osjećate ugodno s Reactom, možete čak stvoriti i mobilnu aplikaciju koristeći React Native.

Projekt # 25: Nadzorna ploča za fitness

Izradite nadzornu ploču za sve svoje osobne podatke o kondiciji, koja uvlači podatke iz različitih aplikacija i prikazuje neke korisne statistike u lijepom korisničkom sučelju.

Ovisno o tome što vi, vaša obitelj i prijatelji koristite, lako možete uvući podatke s brojnih API-ja - Fitbit, Google Fit, Moves, Runkeeper, Strava, Withings i još mnogo toga!

Možete čak dopustiti korisniku da ručno unosi podatke za jednostavne stvari poput praćenja težine i rutine vježbanja.

Možete započeti samo prikazivanjem izvješća, a zatim ga poboljšati novim značajkama poput dodavanja bilješki i dijeljenja.

Izradio sam jednostavnu nadzornu ploču za Fitbit podatke. Kôd pogledajte ovdje:

learnnetto / reagirati

Reactfit - aplikacija za fitnes nadzornu ploču izrađena pomoću Rails 5.1 i React.js github.com

Projekt # 26: Pogodi moju skicu (igra)

Napravite aplikaciju za crtanje u kojoj možete crtati mišem, a prijatelj mora pogoditi što ste nacrtali. Za crtanje možete koristiti platno. Pogledajte ideje za reagiranje Michala Svrčeka za neke ideje o tome kako započeti:

svrcekmichal / reagiraj-sketchpad

response-sketchpad - Podloga za skice kreirana na platnu github.com

Upotrijebite Rails za prijenos i spremanje crteža i prikazivanje nekome na drugom računalu.

Kao naprednu vježbu u zabavi dodajte strojno učenje i natjerajte računalo da pogodi?

Projekt # 27: Vi pišete like

Napravite aplikaciju za klasifikovanje teksta koja odgovara vašem stilu pisanja poznatom autoru - baš kao što i ja pišem (napisao Dmitrij Čestnih).

Koristite klasifikator-reborn za klasificiranje teksta i React za rukovanje obrascem. Ova je aplikacija pretežno pozadinska, pa eksperimentirajte s nekim UI animacijama. Pogledajte ovaj repo za neke super ideje:

FormidableLabs / reakcija-animacije

response-animations - Zbirka animacija za ugrađene biblioteke stilova github.com

Projekt # 28: Odbor za ideje

Izradite aplikaciju Idea board pomoću Rails 5.1 API aplikacije i zasebnu React aplikaciju izrađenu pomoću Create React App. Ploča Idea jednostavna je ploča koja prikazuje ideje u obliku četvrtastih pločica. Možete dodavati ideje, uređivati ​​postojeće ideje i brisati ideje.

Ovaj sam već izgradio! Pogledajte ova dva video vodiča koja će vam pokazati kako napraviti ovaj korak-po-korak:

1. dio:

Rails 5 API i udžbenik React.js - Kako napraviti aplikaciju Idea board | Learnetto

Rails 5 API i udžbenik React.js - Kako napraviti aplikaciju Idea board | Learnettolearnetto.com

2. dio:

Kako animirati komponentu pomoću React Transition Group | Learnetto

Kako animirati komponentu pomoću React Transition Group | Learnettolearnetto.com

Ovi vodiči pokrivaju mnoge praktične koncepte, uključujući funkcionalne komponente bez državljanstva, komponente temeljene na klasi, upotrebu axiosa za pozivanje API-ja, pomoćnik za nepromjenjivost i još mnogo toga.

Eto, to je puno zanimljivih ideja za pokretanje vašeg React on Rails putovanja!

Želite li sa mnom graditi ove aplikacije? Dođite, pogledajte besplatne vodiče o Reactu, Railsu i mnogim drugim na Learnetto.com.

Imate li još ideja? Podijelite ih u donjem odgovoru.

Molim te ? r ecommend / prasak? i podijelite ovaj članak!