🥇8 õppeprojekti

„Meister teeb rohkem vigu kui algaja – katseid”

Pakume 8 projekti varianti, mida saab teha „nalja pärast“, et saada tõelist arendus kogemust.

Projekt 1. Trello kloon

Indrek Lasni Trello kloon.

Mida te õpite:

Küsimuste töötlemise marsruutide korraldamine (Routing).
Drag and drop.
Kuidas luua uusi objekte (plaate, nimesid, kaarte).
Sisendandmete töötlemine ja kontrollimine.
Kliendi poolt: kuidas kasutada kohalikke salvestusi, kuidas andmeid kohalikes salvestustes salvestada, kuidas andmeid kohalikes salvestustes lugeda.
Serveri poolt: kuidas kasutada andmebaase, kuidas andmeid andmebaasis salvestada, kuidas andmeid andmebaasist lugeda.

Siin on näide hoidlast, mis on tehtud React+Redux kasutades.

Projekt 2. Administraatori paneel

Github repository.

Lihtne CRUD rakendus, ideaalne põhialuste õppimiseks. Õpime:

Kasutajate loomine, kasutajate haldamine.
Koostööd andmebaasiga — kasutajate loomine, lugemine, redigeerimine, kustutamine.
Sisendi kontrollimine ja vormidega töötamine.

Projekt 3. Krüptovaluutade jälgija (natiivne mobiilirakendus)

Github repository.

Mis tahes keeles: Swift, Objective-C, React Native, Java, Kotlin.

Uurime:

Kuidas natiivsed rakendused töötavad.
Kuidas API-lt andmeid hankida.
Kuidas töötavad natiivsed lehekujundused.
Kuidas kasutada mobiilisimulaatoreid.

Proovi seda API-d. Kui leiad parema, kirjuta kommentaaridesse.

Kui oled huvitatud, siis siin on siin on õpetus.

Projekt 4. Seadista oma webpacki konfi nullist

Tehniliselt pole see rakendus, vaid väga kasulik ülesanne, et aru saada, kuidas webpack siseosas töötab. See ei ole enam „must kast“, vaid arusaadav tööriist.

Nõuded:

Kompileeri es7 es5-ks (alused).
Kompileeri jsx js-ks — või .vue js-ks (pead õppima laadijaid)
Seadista webpacki arendusserver ja kuumade moodulite uuendamine. (vue-cli ja create-react-app kasutavad mõlemat)
Kasutage Heroku, now.sh või Githubi, õppige webpacki projekte juurutama.
Seadistage oma lemmikpre-protsessor css-i kompileerimiseks — scss, less, stylus.
Uurige, kuidas kasutada pilte ja svg-sid webpackiga.

Siin on suurepärane ressurss täielikele algajatele.

Projekt 5. Hackernews kloon

Iga Jedi peab looma oma Hackernews'i.

Mida te õppida saate:

Kuidas suhelda hackernews API-ga.
Kuidas luua ühesuunaline rakendus.
Kuidas teostada selliseid funktsioone nagu kommentaaride, üksikute kommentaaride, profiilide vaatamine.
Küsimuste töötlemise marsruutide korraldamine (Routing).

Projekt 6. To-do nimekiri

TodoMVC.

Tõsiselt? To-do rakendusi? Neid on ju tuhandeid. Kuid uskuge, selle populaarSuse taga on põhjus.
To-do rakendus on suurepärane viis veenduda, et mõistate põhialuseid. Proovige kirjutada üks rakendus puhtas Javascriptis ja teine teie lemmikraamistikus.

Uurige:

Uute ülesannete loomine.
Väljade täitmise kontrollimine.
Ülesannete filtreerimine (täidetud, aktiivsed, kõik). Kasutage filter ja reduce.
Javascripti põhialuste mõistmine.