🥇8 projektów edukacyjnych

„Mistrz popełnia więcej błędów niż nowicjusz – prób”

Proponujemy 8 projektów, które można stworzyć „dla zabawy”, aby zdobyć realne doświadczenie w tworzeniu.

Projekt 1. Klon Trello

Klon Trello autorstwa Indreka Lasna.

Czego się nauczysz:

Organizacja tras przetwarzania zapytań (Routing).
Przeciągnij i upuść.
Jak tworzyć nowe obiekty (tablice, listy, karty).
Przetwarzanie i weryfikacja danych wejściowych.
Po stronie klienta: jak korzystać z lokalnej pamięci, jak zapisywać dane w lokalnej pamięci, jak czytać dane z lokalnej pamięci.
Po stronie serwera: jak korzystać z baz danych, jak zapisywać dane w bazie, jak czytać dane z bazy.

Oto przykład repozytorium, stworzonego na React+Redux.

Projekt 2. Panel administracyjny

Repozytorium Github.

Prosta aplikacja CRUD, idealna do nauki podstaw. Nauczymy się:

Tworzyć użytkowników, zarządzać użytkownikami.
Interakcja z bazą danych – tworzyć, czytać, edytować, usuwać użytkowników.
Weryfikacja wejścia i praca z formularzami.

Projekt 3. Tracker kryptowalut (natywna aplikacja mobilna)

Repozytorium Github.

Na czymkolwiek: Swift, Objective-C, React Native, Java, Kotlin.

Nauczymy się:

Jak działają natywne aplikacje.
Jak wyciągać dane z API.
Jak działają natywne układy stron.
Jak pracować z symulatorami mobilnymi.

Spróbuj tego API. Znajdziesz lepsze – napisz w komentarzach.

Jeśli to interesujące, oto tutaj jest tutorial.

Projekt 4. Skonfiguruj własny webpack config od zera

Technicznie nie jest to aplikacja, ale bardzo przydatne zadanie, aby zrozumieć, jak działa webpack od wewnątrz. Teraz to nie będzie „czarna skrzynka”, ale zrozumiałe narzędzie.

Wymagania:

Kompilacja es7 do es5 (podstawy).
Kompilacja jsx do js – lub – .vue do .js (trzeba nauczyć się loaderów)
Skonfigurować serwer deweloperski webpack i hot module reloading. (vue-cli i create-react-app korzystają z obu)
Używać Heroku, now.sh lub Github, nauczyć się wdrażać projekty webpack.
Skonfigurować ulubiony preprocesor, aby kompilować css – scss, less, stylus.
Zbadać, jak używać obrazów i svg z webpack.

To świetny zasób dla kompletnych nowicjuszy.

Projekt 5. Klon Hackernews

Każdy Jedi musi stworzyć swój własny Hackernews.

Czego się nauczysz po drodze:

Jak integrować się z API hackernews.
Jak stworzyć aplikację jednostronicową.
Jak zaimplementować funkcje, takie jak przeglądanie komentarzy, pojedynczych komentarzy, profili.
Organizacja tras przetwarzania zapytań (Routing).

Projekt 6. Todo

TodoMVC.

Serio? Todo? Jest ich tysiące. Ale uwierzcie, jest powód ich popularności.
Aplikacja Todo to świetny sposób, by upewnić się, że rozumiesz podstawy. Spróbuj napisać jedną aplikację w czystym JavaScript i jedną w ulubionym frameworku.

Naucz się: