8 proiecte educaționale

„Un maestru face mai multe greșeli decât încearcă un începător”

Vă oferim 8 opțiuni de proiect pe care le puteți face „pentru distracție” pentru a câștiga experiență reală de dezvoltare.

Proiect 1. Clona Trello

Clona Trello de la Indrek Lasn.

Ce vei invata:

• Organizarea rutelor de procesare a cererilor (Routing).
• Tragere și plasare.
• Cum să creați noi obiecte (tablete, liste, carduri).
• Prelucrarea și verificarea datelor de intrare.
• Din partea clientului: cum să utilizați stocarea locală, cum să salvați datele în stocarea locală, cum să citiți datele din stocarea locală.
• Din partea serverului: cum să utilizați bazele de date, cum să salvați datele în baza de date, cum să citiți datele din baza de date.

Iată un exemplu de depozit, realizat în React+Redux.

Proiect 2. Panoul de administrare

Depozitul Github.

O aplicație CRUD simplă, ideală pentru a învăța elementele de bază. Să învățăm:

• Creați utilizatori, gestionați utilizatori.
• Interacționați cu baza de date - creați, citiți, editați, ștergeți utilizatori.
• Validarea introducerii și lucrul cu formulare.

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

Depozitul Github.

Orice: Swift, Objective-C, React Native, Java, Kotlin.

Sa invatam:

• Cum funcționează aplicațiile native.
• Cum să preluați date din API.
• Cum funcționează aspectele native ale paginilor.
• Cum să lucrați cu simulatoare mobile.

Încercați acest API. Dacă găsești ceva mai bun, scrie în comentarii.

Dacă ești interesat, iată-l aici este un tutorial.

Proiect 4. Configurați-vă propria configurație webpack de la zero

Din punct de vedere 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 o „cutie neagră”, ci un instrument de înțeles.

Cerinte:

• Compilați es7 la es5 (de bază).
• Compilați jsx în js - sau - .vue în .js (va trebui să învățați încărcătoare)
• Configurați serverul de dezvoltare webpack și reîncărcarea modulului cald. (vue-cli și create-react-app folosesc ambele)
• Folosiți Heroku, now.sh sau Github, aflați cum să implementați proiecte webpack.
• Configurați preprocesorul preferat pentru a compila css - scss, less, stylus.
• Aflați cum să utilizați imagini și svg-uri cu webpack.

Aceasta este o resursă uimitoare pentru începători completi.

Proiectul 5. Clona Hackernews

Fiecărui Jedi i se cere să-și facă propriul Hackernews.

Ce vei învăța pe parcurs:

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

Proiectul 6. Tudushechka

TodoMVC.

Serios? Tudushka? Sunt mii. Dar crede-mă, există un motiv pentru această popularitate.
Aplicația Tudu este o modalitate excelentă de a vă asigura că înțelegeți elementele de bază. Încercați să scrieți o aplicație în vanilla Javascript și una în cadrul dvs. preferat.

Învăța:

• Creați sarcini noi.
• Verificați dacă câmpurile sunt completate.
• Filtrați sarcini (finalizate, active, toate). Utilizare filter и reduce.
• Înțelegeți elementele de bază ale Javascript.

Proiect 7. Listă sortabilă prin glisare și plasare

Depozitul Github.

Foarte util de înțeles trageți și plasați api.

Să învățăm:

• Trageți și plasați API-ul
• Creați interfețe de utilizare bogate

Proiect 8. Clona Messenger (aplicație nativă)

Veți înțelege cum funcționează atât aplicațiile web, cât și aplicațiile native, ceea ce vă va diferenția de masa gri.

Ce vom studia:

• Prize web (mesaje instantanee)
• Cum funcționează aplicațiile native.
• Cum funcționează șabloanele în aplicațiile native.
• Organizarea rutelor de procesare a cererilor in aplicatii native.

Acest lucru va fi suficient pentru o lună sau două.

Traducerea a fost realizată cu sprijinul companiei Software EDISONcare este angajat profesional dezvoltarea de aplicații și site-uri web în PHP pentru clienții mari, precum și dezvoltarea serviciilor cloud și a aplicațiilor mobile în Java.

Sursa: www.habr.com