Unul dintre cele mai bune moduri de a învăța este prin practică. Dar adesea dezvoltatorii se luptă cu marea întrebare „ce ar trebui să construiesc?”.

Iată 8 idei de proiecte, completate cu rezumate de proiect și idei de layout, pentru a vă ajuta să începeți să învățați făcând.

• Business & Real-World: Map Statistics Dashboard
• Distracție & Interesant: Instrument muzical
• Personal & Portofoliu: Blog
• Productivitate: Carnet de notițe
• Puzzle-uri & Jocuri: Space Invaders
• Unelte & Biblioteci: Framework Theme
• Proiect Add-Ons: Webmențiuni
• Clone: Product Hunt

Aceasta este o previzualizare a ebook-ului gratuit 50 Projects for React & the Static Web. Puteți găsi toate cele 50 de idei de proiecte, inclusiv aceste 8, la 50reactprojects.com.

Hartă statistică Tabloul de bord

Categorie: Proiecte pentru React: Business & Real-World

Creați un tablou de bord al hărții care arată statistici și informații geografice despre COVID-19.

Brief

Afacerea cu o pandemie globală înseamnă că viruși precum Coronavirusul au un impact diferit asupra lumii în funcție de locația geografică.

Având o hartă cu o defalcare a statisticilor fiecărei țări este o modalitate utilă de a putea determina lucruri precum care țări au fost cel mai mult afectate.

Nivelul 1

Cel mai simplu mod de a vedea statisticile de la o țară la alta este de a avea o hartă pe care să o puteți parcurge cu statisticile fiecărei țări disponibile în dreptul țării respective.
Creați o aplicație de cartografiere care utilizează API-ul disease.sh Coronavirus pentru a adăuga pe hartă markeri pentru fiecare țară împreună cu numărul de cazuri de COVID-19.

Nivelul 2

În timp ce a avea statisticile pentru fiecare țară este util, ar putea fi util să se poată compara aceste statistici cu numărul de cazuri din întreaga lume.
Adaugați un tablou de bord statistic care să arate numărul de cazuri COVID-19 din întreaga lume, precum și orice alte statistici utile din API.

Nivelul 3

Obținerea statisticilor actuale este o modalitate bună de a înțelege starea actuală a lumii, dar cum se compară acestea din punct de vedere istoric?
Utilizați API-ul de date istorice pentru a afișa grafice pe tabloul de bord care să ofere un context pentru creșterea și răspândirea virusului.

To Do

• Creați o nouă aplicație de hartă
• Căutați date API despre țări
• Adaugați markeri la hartă
• Adaugați statistici la markeri
• Căutați date API globale

.

• Creați un tablou de bord cu statistici
• Adaugați statistici globale
• Fetch API date istorice
• Adaugați grafice la hartă

Toolbox

• Open Disease Data API (disease.sh)
• React Leaflet (react-leaflet.js.org)
• Gatsby Leaflet Starter (github.com)

Tutoriale

• Cum se creează un tablou de bord Coronavirus (COVID-19) & Aplicație hartă în React cu Gatsby și Leaflet (freecodecamp.org)
• Cum să adăugați statisticile privind cazurile de Coronavirus (COVID-19) în tabloul de bord al hărții React cu Gatsby (freecodecamp.org)
• Mapping with React Leaflet (egghead.io)

Inspirație

• COVID-19 Dashboard by the Center for Systems Science and Engineering (CSSE) at Johns Hopkins University (JHU) (coronavirus.jhu.ed)
• Coronavirus (COVID-19) Dashboard Demo (coronavirus-map-dashboard.netlify.app)

Ideea de layout

Instrument muzical

Categorie: Distracție & Interesant

Creați un pian interactiv pe care îl puteți folosi pentru a cânta muzică cu ajutorul tastaturii.

Brief

Nu toată lumea are luxul de a deține un instrument muzical, dar poate că acele persoane au un laptop, un telefon sau o tabletă. A avea un pian este o modalitate puternică de a permite oamenilor să cânte muzică, chiar dacă nu au avut ocazia înainte.

Nivelul 1

Utilizând browserul și API-urile audio web, putem crea sunete care, atunci când sunt puse împreună, pot suna de fapt ca muzica.
Crearea unui set de butoane care redau notele unei game atunci când sunt apăsate.

Nivelul 2

Deși nu toată lumea a cântat la un instrument înainte, conceptul și interfața unui instrument precum un pian este, în general, mai intuitivă decât o grămadă de butoane.
Creați un layout de pian folosind butoane care funcționează fie prin apăsarea butonului, fie prin utilizarea tastaturii fizice.

Nivelul 3

S-ar putea să avem un spațiu limitat în browser, dar există o gamă largă de note, scări și sunete pe care o tastatură electrică ar putea fi capabilă să le producă cu câteva efecte adăugate.
Creați comutatoare de efecte care schimbă sunetul notelor atunci când sunt activate.

De făcut

• Creați butoane
• Play sound when clicked
• Aranjați notele într-o gamă
• Creați un layout de pian

.

• Setați evenimente de tastatură
• Creați un layout de efecte
• Activați efectele audio

Toolbox

• React HotKeys (github.com)

Tutoriale

• Construirea unui pian cu React Hooks (dev.to)
• Cum se construiește o tastatură de pian folosind Vanilla JavaScript (freecodecamp.org)
• Construirea unui pian cu tone.js! (dev.to)
• Cum am făcut un pian în doar 1kb de JavaScript (frankforce.com)

Inspirație

• React Guitar (react-guitar.com)

Idee de Layout

Blog

Categorie: Personal & Portofoliu

Creați un blog pe care îl puteți folosi pentru a vă împărtăși experiențele și proiectele din carieră.

Brief

Cu orice carieră, a avea un blog pentru a vă împărtăși experiențele este o modalitate bună de a lăsa oamenii să știe la ce lucrați și de a-i ajuta pe alții să învețe din experiențele voastre.

Este, de asemenea, o modalitate de a consolida ceea ce ați învățat, astfel încât să puteți face referințe în viitor.

Nivelul 1

Pentru a vă putea împărtăși experiențele, aveți nevoie de o structură de site web care să vă permită să creați conținut nou și să gestionați conținutul existent.

O modalitate de a face acest lucru este crearea de fișiere markdown din care sursele site-ului dvs. web să creeze pagini noi și să afișeze postările.
Crearea unui blog folosind fișiere markdown ca sursă de conținut.

Nivelul 2

Având conținutul dvs. în fișiere markdown este o modalitate bună de a gestiona conținutul static, dar s-ar putea să nu doriți să trebuiască să editați codul de fiecare dată când scrieți sau modificați o postare.
Integrați un sistem de gestionare a conținutului care vă permite să adăugați conținut nou sau să editați conținutul existent cu o interfață de utilizator plăcută.

Nivelul 3

Dacă partajați cod pe blogul dumneavoastră, HTML suportă în mod nativ tag-urile code și pre care vă ajută să formatați codul într-un mod lizibil. Dar asta nu include evidențierea sintaxei care ajută la îmbunătățirea lizibilității.
Integrați un evidențator de sintaxă care face blocurile de cod mai ușor de citit.

De făcut

• Creați un blog
• Adaugați primul conținut static
• Sursa de conținut static
• Integrați CMS
• Adaugați cod la conținut
• Adaugați evidențierea sintaxei

Toolbox

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

Tutoriale

• Realizarea unui blog Gatsby cu Netlify CMS (gatsbyjs.org)
• Cum să-ți construiești blogul de codare de la zero folosind Gatsby și MDX (freecodecamp.org)

Inspirație

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

Idee de layout

Cartet de notițe

Categorie: Productivitate

Creați o aplicație de notebook pentru a adăuga, gestiona și organiza un grup de notițe.

Brief

Să luăm notițe este o modalitate excelentă de a ne asigura că ținem evidența gândurilor noastre sau că ne amintim notele importante de la o întâlnire. A putea să le gestionăm și să le organizăm cu ușurință este important pentru a le găsi mai târziu!

Nivelul 1

Prima cerință a unui caiet este să poți lua notițe. Acest lucru poate fi destul de simplu pentru început, unde de fapt aveți nevoie de un fel de intrare care să colecteze ceea ce scrieți și să stocheze undeva pentru mai târziu.
Creați un formular pentru a adăuga noi notițe și a le vizualiza într-o listă.

Nivel 2

Pentru a găsi notițele mai târziu, doriți o modalitate de a organiza aceste notițe și o modalitate de a le căuta. Aceasta include adăugarea de categorii sau un sistem de etichetare, precum și o interfață utilizator din care să se facă căutări.
Adaugați posibilitatea de a eticheta sau de a clasifica notele și o intrare pentru a le căuta prin ele.

Nivelul 3

Cu sau fără să ne dăm seama, putem găsi conexiuni între gândurile noastre și, mai ales, între notele noastre, de unde putem profita de acea rețea de gânduri pentru caietul nostru de notițe.
Adaugați Roam Research-inpsired linking of notes to create a network of thoughts.

To Do

• Crearea unui formular
• Stocarea notelor noi
• Lista notelor
• Adaugați etichete sau categorii
• Adaugați căutare de note
• Adaugați rețea de note

Toolbox

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

Tutoriale

• Cum să adăugați căutare la o aplicație React cu Fuse.js (freecodecamp.org)

Inspirație

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

Layout Idea

Space Invaders

Categorie: Puzzle-uri & Jocuri

Creați un joc de împușcat nave spațiale Space Invaders pentru a împușca mai multe valuri de nave inamice.

Brief

Space Invaders este un clasic arcade care vă pune într-o navă spațială împotriva unei invazii extraterestre. În timp ce încercați să le doborâți, ei trag înapoi și aveți doar o cantitate limitată de protecție înainte de a fi deschis pentru a fi lovit.

Nivelul 1

Partea de bază a jocului este că vă deplasați în jurul unei nave spațiale încercând să loviți o grămadă de extratereștri cu armele dvs. În timp ce există unul dintre voi, există mulți dintre ei.
Creați o navă spațială care se poate deplasa și împușca extratereștrii care nu se mișcă.

Nivelul 2

Ceea ce face ca jocul să fie dificil, este că extratereștrii se mișcă în mod constant. De fiecare dată când ating marginea zonei de joc, ei coboară și accelerează, apropiindu-se de nava ta.
Adaugați mișcare extratereștrilor care merg dintr-o parte în alta a zonei de joc. De fiecare dată când extratereștrii ajung într-o parte ar trebui să coboare cu un nivel. Ei ar trebui, de asemenea, să accelereze la anumite intervale de timp.

Nivelul 3

Ești pe cont propriu, dar, din fericire, poți obține ceva protecție. Aveți scuturi în spatele cărora vă puteți ascunde și care vă ajută să vă protejați cât mai durează.
Creați mai multe scuturi în fața navei spațiale a jucătorului care pot suporta o cantitate limitată de daune.

De făcut

• Creați un joc nou
• Creați extratereștrii statici
• Creați o navă spațială a jucătorului
• Adaugați comenzile navei spațiale
• Adaugați o armă a navei spațiale
• Configurați extratereștrii damage
• Fă extratereștrii să riposteze
• Fă extratereștrii să se miște
• Adăugați intervale de extratereștri
• Adaugați scuturi

Tutoriale

• Învățați JavaScript construind 7 jocuri (freecodecamp.org)

Inspirație

• Space Invaders (codepen.io)

Ideea de layout

Tema de cadru

Categorie: Instrumente & Biblioteci

Creați o temă Gatsby care configurează un proiect cu cadrul Tailwind CSS.

Brief

Ca dezvoltatori, în mod obișnuit trebuie să facem o serie de pași similari de fiecare dată când creăm un nou proiect. Dar instrumente precum temele ne permit să abstractizăm acești pași și să îi împachetăm într-un mod ușor de utilizat, care poate funcționa pentru orice proiect nou.

Nivelul 1

Temele Gatsby sunt un sistem de tip plugin prin care putem profita de pipeline-ul Gatsby pentru a partaja funcționalitatea ca un pachet pe npm.

Aceasta deschide ușa pentru a face cu adevărat orice am face într-un site Gatsby, dar făcându-l reutilizabil pentru orice site Gatsby.
Creați o nouă temă Gatsby care, atunci când este folosită, creează o nouă pagină a ghidului de stil pe orice proiect la care este adăugată.

Nivelul 2

Obiectivul temelor nu este doar de a crea pagini, ci de a adăuga funcționalitate care ne face productivi. Acest lucru include lucruri cum ar fi cadrele și configurațiile de proiect.
Adaugați un cadru CSS la tema Gatsby care permite proiectului la care este adăugată să folosească acel cadru.

Nivelul 3

Câteodată temele sunt mai bune doar ca instrumente, alteori este util să ai o opinie. O modalitate de a adăuga funcționalitate utilă la un cadru CSS este de a crea componente de stoc.
Crearea de componente React reutilizabile folosind cadrul CSS care pot fi utilizate în proiectul la care se adaugă tema.

De făcut

• Creați o nouă temă
• Adaugați-o la proiectul de exemplu
• Creați o nouă pagină de stil
• Adaugați cadrul CSS

.

• Utilizați CSS în exemplu
• Creați componente
• Utilizați componente

Toolbox

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

Tutoriale

• Construirea unei teme (gatsbyjs.org)
• Ce este Tailwind CSS și cum îl pot adăuga la site-ul meu web sau la aplicația React? (freecodecamp.org)

Inspirație

• Gatsby Tailwind Theme (github.com)

Ideea de layout

Mențiuni web

Categorie: Project Add-Ons

Adaugați integrarea webmentions la un site web care arată interacțiunile Twitter cu site-ul web.

Brief

Interacțiunea socială este o modalitate de impact pentru a aduce mai multă audiență și conversație la subiectele despre care scriem.

Având ceva pe un site web arată că interacțiunea poate fi utilă atât pentru a-i inspira pe oameni să vrea să se implice, cât și pentru a-i lăsa pe oameni să simtă că pot lua parte.

Nivelul 1

Pentru a utiliza Webmentions, un site web trebuie să fie configurat cu meta tag-uri pentru a furniza informații.
Adaugați meta tag-urile corespunzătoare unui site web și validați utilizarea acestuia cu webmention.io.

Nivelul 2

Apif-ul Webmentions este o modalitate de a vedea în mod programatic conexiunile în interacțiunile sociale de la un URL al site-ului dumneavoastră web. Vă permite să obțineți tipul de interacțiune și chiar avatarul profilului persoanei.
Conectați un site web la Webmentions și adăugați o listă de interacțiuni sociale la paginile de postări de blog.

Nivelul 3

Acum că site-ul arată toate interacțiunile, ar trebui să existe o modalitate ușoară de a se alătura conversației.
Adaugați un link social care, atunci când este apăsat, creează un tweet cu un link către pagină.

De făcut

• Adaugați metaetichete la site-ul web
• Validați metaetichetele
• Conectați-vă la Webmention

.

• Conectați-vă social la Bridgy
• Lista interacțiunilor
• Adaugați un buton de tweet

Toolbox

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

Tutoriale

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

Inspirație

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

Idee de layout

Vânătoare de produse

Categorie: Clone

Creați o clonă Product Hunt care permite oamenilor să posteze un produs nou cu evaluări.

Brief

Toți trăim pentru produse, fie că este vorba de telefoanele noastre mobile sau de aplicațiile pe care le folosim pe laptopuri.

Chiar dacă există tone de produse în lume, poate fi greu să navighezi printre cele bune și cele rele. Instrumente precum Product Hunt oferă o platformă pentru a afla despre noi instrumente și pentru a obține reacții și recenzii de la alții.

Nivelul 1

Cea mai importantă parte a învățării despre noi produse este produsul în sine. Vrem să știm ce este produsul, cum arată și cum funcționează.
Creați o pagină care vă permite să adăugați un produs nou pe un site web cu un titlu, o imagine și o descriere.

Nivel 2

Când învățăm despre produse, recenziile sunt o modalitate prin care putem avea încredere într-un produs înainte de a-l cumpăra. Ne ajută să căpătăm încredere în ceea ce suntem pe cale să ne cheltuim banii sau timpul.
Adaugați posibilitatea ca oamenii să adauge recenzii despre fiecare produs.

Nivelul 3

Oamenii iubesc produsele, așa că există tone de ele în lume. Sunt mult prea multe pentru a încerca să le sortăm manual, așa că avem nevoie de un mecanism cu ajutorul căruia să căutăm și să navigăm.
Adaugați posibilitatea de a căuta produse și de a naviga după categorie.

De făcut

• Crearea unui site cu produse
• Crearea unei baze de date
• Adaugați un formular de produs
• Adaugați un produs în baza de date
• Cererea unui produs pentru o pagină
• Adaugați formular de recenzii
• Adaugați recenzii la baza de date
• Adaugați recenzii la produs
• Adaugați căutare produs
• Adaugați categorii de produse

Toolbox

• Hasura (hasura.io)

Tutoriale

• Construirea unei aplicații clonă Product Hunt folosind Hasura și Next.js (logrocket.com)
• Cum se construiește o versiune de bază a Product Hunt folosind React (freecodecamp.org)

Idee de layout

Mai multe proiecte

Dacă doriți mai multe idei de proiecte, consultați 50 de proiecte pentru React & web static!

Descărcați gratuit la 50reactprojects.com

.