🥇8 tanulmányi projekt

„A mester több hibát követ el, mint a kezdő – próbálkozások”

Kínálunk 8 projektvariációt, amelyet „szórakozásból” készíthet, hogy valódi fejlesztési tapasztalatot szerezzen.

1. Projekt. Trello klón

Indrek Lasn Trello klónja.

Amit elsajátítasz:

Kérésfeldolgozási útvonalak szervezése (Routing).
Drag and drop.
Hogyan kell új objektumokat létrehozni (táblák, listák, kártyák).
Bemeneti adatok kezelése és ellenőrzése.
Ügyféloldal: hogyan használjuk a helyi tárolót, hogyan mentjük el az adatokat a helyi tárolóba, hogyan olvassuk el az adatokat a helyi tárolóból.
Szerveroldal: hogyan használjuk az adatbázisokat, hogyan mentjük el az adatokat az adatbázisban, hogyan olvassuk el az adatokat az adatbázisból.

Itt egy példa a tárolóra, React+Redux használatával készült.

2. Projekt. Admin panel

Github Repository.

Egyszerű CRUD alkalmazás, ideális az alapok tanulmányozásához. Megtanuljuk:

Felhasználók létrehozása, felhasználók kezelése.
Kapcsolat az adatbázissal – felhasználók létrehozása, olvasása, szerkesztése, törlése.
Bemenet ellenőrzése és munkavégzés formulákkal.

3. Projekt. Kriptovaluta nyomkövető (natív mobilalkalmazás)

Github repository.

Bármilyen platformon: Swift, Objective-C, React Native, Java, Kotlin.

Megtanuljuk:

Hogyan működnek a natív alkalmazások.
Hogyan nyerjünk adatokat az API-ból.
Hogyan működnek a natív oldalminták.
Hogyan dolgozzunk mobil szimulátorokkal.

Próbáld ki ezt az API-t. Ha találsz jobbat – írd meg a megjegyzésekben.

Ha érdekel, itt van egy tutorial itt.

4. Projekt. S saját webpack konfiguráció beállítása a nulláról

Technikailag ez nem alkalmazás, de nagyon hasznos feladat ahhoz, hogy megértsük, hogyan működik a webpack belülről. Most már nem „fekete doboz”, hanem egy érthető eszköz.

Elvárások:

Es7 lefordítása es5 (alapok).
jsx lefordítása js-re – vagy - .vue js-be (meg kell tanulni a loader-eket)
Webpack dev server és hot module reloading beállítása. (vue-cli és create-react-app beidegzi mindkettőt)
Használja a Heroku, now.sh vagy Github, tanuljon meg webpack projektek telepítését.
A kedvenc preprocesszorod beállítása a css – scss, less, stylus fordítására.
Megtanulni, hogyan használhatók képek és svgs webpack-kal.

Itt egy kiváló forrás teljes újoncok számára.

5. Projekt. Hackernews klón

Minden Jedi köteles saját Hackernews-át készíteni.

Amit az út során elsajátítasz:

Hogyan interakciózz a hackernews API-val.
Hogyan készíts egy egyoldalas alkalmazást.
Hogyan valósítsuk meg az olyan funkciókat, mint a megjegyzések, egyedi megjegyzések, profilok megtekintése.
Kérésfeldolgozási útvonalak szervezése (Routing).

6. projekt. Todo lista

TodoMVC.

Tényleg? Todo lista? Ezrek vannak belőlük. De hidd el, van oka ennek a népszerűségnek.
A Todo-alkalmazás egy nagyszerű módja annak, hogy megbizonyosodj arról, hogy érted az alapokat. Próbálj meg egy alkalmazást írni tiszta Javascriptel, és egyet a kedvenc keretrendszereddel.

Tanulj meg: