🥇8 proiecte de studiu

„Meșteșugarul face mai multe greșeli decât novicele – încercări”

Oferim 8 variante de proiecte care pot fi realizate „pentru distracție”, pentru a obține o experiență reală în dezvoltare.

Proiect 1. Clonă Trello

Clona Trello de la Indrek Lasn.

Ce veți învăța:

Organizarea rutelor de procesare a cererilor (Routing).
Drag and drop.
Cum să creați noi obiecte (tablouri, liste, carduri).
Prelucrarea și verificarea datelor de intrare.
Din partea clientului: cum să folosiți stocarea locală, cum să salvați date în stocarea locală, cum să citiți date din stocarea locală.
Din partea serverului: cum să folosiți baze de date, cum să salvați date în bază, cum să citiți date din bază.

Aici este un exemplu de repository, realizat pe React + Redux.

Proiect 2. Panou de admin

Github Repository.

O aplicație CRUD simplă, perfectă pentru a învăța conceptele de bază. Vom învăța:

Să creăm utilizatori, să gestionăm utilizatorii.
Să interacționăm cu baza de date — să creăm, să citim, să edităm, să ștergem utilizatori.
Verificarea introducerii și lucrul cu formularele.

Proiect 3. Tracker de criptomonede (aplicație mobilă nativă)

Github repository.

Pe orice: Swift, Objective-C, React Native, Java, Kotlin.

Vom învăța:

Cum funcționează aplicațiile native.
Cum să extragem date din API.
Cum să activăm layout-urile native de pagină.
Cum să lucrăm cu simulatoare mobile.

Încercați acest API. Găsiți unul mai bun — scrieți în comentarii.

Dacă sunteți interesat, iată un tutorial aici.

Proiect 4. Configurați propriul config webpack de la zero

Tehnic, aceasta nu este o aplicație, dar este o sarcină foarte utilă pentru a înțelege cum funcționează webpack din interior. Acum nu va fi un „black box”, ci un instrument clar.

Cerințe:

Să compilăm es7 în es5 (fundamente).
Să compilăm jsx în js — sau — .vue în .js (va trebui să învățați despre loader-e)
Să configurăm webpack dev server și reîncărcarea modulelor la cald. (vue-cli și create-react-app folosesc ambele)
Să folosim Heroku, now.sh sau Github, să învățăm să desfășurăm proiecte webpack.
Să configurăm procesorul nostru preferat pentru a compila css — scss, less, stylus.
Să învățăm cum să folosim imagini și svgs cu webpack.

Aici este o resursă grozavă pentru începători compleți.

Proiect 5. Clonă Hackernews

Fiecare Jedi ar trebui să își facă propriul Hackernews.

Ce veți învăța pe parcurs:

Cum să interacționați cu API-ul hackernews.
Cum să creați o aplicație cu o singură pagină.
Cum să implementați funcții precum vizualizarea comentariilor, comentariilor individuale, profilurilor.
Organizarea rutelor de procesare a cererilor (Routing).

Proiect 6. Todo

TodoMVC.

Serios? Todo-listă? Sunt mii. Dar credeți-mă, există un motiv pentru această popularitate.
O aplicație de tip todo este o modalitate excelentă de a te asigura că înțelegi fundamentele. Încearcă să scrii o aplicație în JavaScript vanilat și una în framework-ul tău preferat.

Învățați:

Să creați sarcini noi.
Să verificați completarea câmpurilor.
Să filtrați sarcinile (finalizate, active, toate). Folosiți filter și reduce.
Să înțelegeți fundamentele JavaScript.