Jednym z najlepszych sposobów uczenia się jest robienie. Ale często deweloperzy zmagają się z wielkim pytaniem „co powinienem zbudować?”.

Oto 8 pomysłów na projekty, wraz z briefami projektowymi i pomysłami na układ, abyś mógł zacząć uczyć się przez działanie.

• Business & Real-World: Map Statistics Dashboard
• Fun & Interesting: Musical Instrument
• Personal & Portfolio: Blog
• Productivity: Notebook
• Puzzle & Gry: Space Invaders
• Narzędzia &Biblioteki: Framework Theme
• Project Add-Ons: Webmentions
• Clones: Product Hunt

To jest zapowiedź darmowego ebooka 50 Projects for React & the Static Web. Możesz znaleźć pełne 50 pomysłów na projekty, w tym te 8 na 50reactprojects.com.

Map Statistics Dashboard

Kategoria: Business & Real-World

Stwórz pulpit nawigacyjny z mapą, który pokazuje statystyki i informacje geograficzne dotyczące COVID-19.

Brief

Radzenie sobie z globalną pandemią oznacza, że wirusy takie jak koronawirus wpływają na świat w różny sposób w oparciu o położenie geograficzne.

Mając mapę z podziałem statystyk każdego kraju jest użytecznym sposobem, aby być w stanie określić rzeczy takie jak, które kraje zostały dotknięte najbardziej.

Poziom 1

Najprostszym sposobem zobaczenia statystyk poszczególnych krajów jest posiadanie mapy, którą można przeglądać ze statystykami każdego kraju dostępnymi obok tego kraju.
Stwórz aplikację do mapowania, która używa API disease.sh Coronavirus, aby dodać markery do mapy dla każdego kraju wraz z liczbą przypadków COVID-19.

Poziom 2

Choć posiadanie statystyk dla każdego kraju jest pomocne, użyteczna może być możliwość porównania tych statystyk z liczbą przypadków na całym świecie.
Dodaj tablicę statystyk, która pokazuje liczbę przypadków COVID-19 na całym świecie, jak również inne użyteczne statystyki z API.

Poziom 3

Zbieranie bieżących statystyk jest dobrym sposobem na zrozumienie obecnego stanu świata, ale jak to się ma do danych historycznych?
Użyj API danych historycznych, aby wyświetlić wykresy na pulpicie nawigacyjnym, które zapewnią kontekst dla wzrostu i rozprzestrzeniania się wirusa.

Do zrobienia

• Utwórz nową aplikację mapy
• Pobierz dane API o krajach
• Dodaj markery do mapy
• Dodaj statystyki do markerów
• Pobierz dane API o świecie
• Pobierz dane API o świecie

.

• Utwórz pulpit statystyk
• Dodaj statystyki globalne
• Pobierz dane historyczne API
• Dodaj wykresy do mapy

Toolbox

• Open Disease Data API (disease.sh)
• React Leaflet (react-leaflet.js.org)
• Gatsby Leaflet Starter (github.com)

Tutorials

• How to create a Coronavirus (COVID-19) Dashboard & Map App in React with Gatsby and Leaflet (freecodecamp.org)
• Jak dodać statystyki przypadków Coronavirus (COVID-19) do pulpitu nawigacyjnego mapy React za pomocą Gatsby (freecodecamp.org)
• Mapowanie za pomocą React Leaflet (egghead.io)

Inspiracja

• COVID-19 Dashboard by the Center for Systems Science and Engineering (CSSE) at Johns Hopkins University (JHU) (coronavirus.jhu.ed)
• Coronavirus (COVID-19) Dashboard Demo (coronavirus-map-dashboard.netlify.app)

Layout Idea

Musical Instrument

Category: Zabawa &Ciekawe

Stwórz interaktywne pianino, którego możesz użyć do grania muzyki za pomocą klawiatury.

Krótko

Nie każdy ma luksus posiadania instrumentu muzycznego, ale może ci ludzie mają laptopa, telefon lub tablet. Posiadanie pianina to potężny sposób na umożliwienie ludziom grania muzyki, nawet jeśli wcześniej nie mieli takiej możliwości.

Poziom 1

Używając przeglądarki i interfejsów API web audio, możemy tworzyć dźwięki, które złożone razem mogą faktycznie brzmieć jak muzyka.
Stwórz zestaw przycisków, które po kliknięciu odtwarzają nuty skali.

Poziom 2

Choć nie każdy grał kiedyś na instrumencie, koncepcja i interfejs instrumentu takiego jak fortepian są na ogół bardziej intuicyjne niż grupa przycisków.
Stwórz układ fortepianu przy użyciu przycisków, które działają po kliknięciu przycisku lub przy użyciu klawiatury fizycznej.

Poziom 3

Możemy mieć ograniczone miejsce w przeglądarce, ale istnieje szeroki zakres nut, skal i dźwięków, które klawiatura elektryczna może być w stanie wykonać z pewnymi dodanymi efektami.
Stwórz przełączniki efektów, które zmieniają dźwięk nut, gdy są włączone.

Do zrobienia

• Twórz przyciski
• Odtwórz dźwięk po kliknięciu
• Zmień nuty w skali
• Utwórz układ pianina

.

• Ustaw zdarzenia klawiatury
• Twórz układ efektów
• Przełączaj efekty audio

Toolbox

• React HotKeys (github.com)

Tutorials

• Building a Piano with React Hooks (dev.to)
• How to Build a Piano Keyboard Using Vanilla JavaScript (freecodecamp.org)
• Building a piano with tone.js! (dev.to)
• How I Made a Piano in only 1kb of JavaScript (frankforce.com)

Inspiracja

• React Guitar (react-guitar.com)

Pomysł na układ

Blog

Kategoria: Osobiste & Portfolio

Stwórz blog, który możesz wykorzystać do dzielenia się swoimi doświadczeniami zawodowymi i projektami.

Krótko

W przypadku każdej kariery, posiadanie bloga do dzielenia się swoimi doświadczeniami jest dobrym sposobem, aby dać ludziom znać, nad czym pracujesz i pomóc innym uczyć się z twoich doświadczeń.

Poziom 1

Aby móc dzielić się swoimi doświadczeniami, potrzebujesz struktury strony internetowej, która pozwoli Ci na tworzenie nowych treści i zarządzanie istniejącymi.

Jednym ze sposobów na to jest tworzenie plików markdown, z których witryna korzysta przy tworzeniu nowych stron i wyświetlaniu postów.
Utwórz blog, używając plików markdown jako źródła treści.

Poziom 2

Utrzymywanie treści w plikach markdown jest dobrym sposobem na zarządzanie zawartością statyczną, ale możesz nie chcieć edytować kodu za każdym razem, gdy piszesz lub edytujesz post.
Zintegruj system zarządzania treścią, który pozwoli ci dodawać nowe treści lub edytować istniejące za pomocą ładnego interfejsu użytkownika.

Poziom 3

Jeśli udostępniasz kod na swoim blogu, HTML natywnie obsługuje znaczniki code i pre, które pomagają sformatować kod w czytelny sposób. Ale to nie obejmuje podświetlania składni, które pomaga poprawić czytelność.
Zintegruj podświetlanie składni, które sprawia, że bloki kodu są bardziej czytelne.

Do zrobienia

• Utwórz blog
• Dodaj pierwszą zawartość statyczną
• Źródło zawartości statycznej
• Integruj CMS
• Dodaj kod do treści
• Dodaj kolorowanie składni

Toolbox

• Netlify CMS (netlifycms.org)
• Prism.js (prismjs.com)

Tutoriale

• Tworzenie bloga Gatsby z Netlify CMS (gatsbyjs.org)
• Jak zbudować blog o kodowaniu od podstaw przy użyciu Gatsby i MDX (freecodecamp.org)

Inspiracja

• Gatsby Netlify CMS Starter (gatsby-netlify-cms.netlify.app)

Pomysł na układ

Notebook

Kategoria: Productivity

Stwórz aplikację notatnika, aby dodawać, zarządzać i organizować grupę notatek.

Brief

Robienie notatek to świetny sposób, aby upewnić się, że śledzimy nasze myśli lub pamiętamy ważne wnioski ze spotkania. Bycie w stanie łatwo zarządzać nimi i organizować je jest ważne dla znalezienia ich później!

Poziom 1

Pierwszym wymogiem notatnika jest możliwość robienia notatek. To może być całkiem proste na początek, gdzie naprawdę potrzebujesz jakiegoś rodzaju wejścia, które zbiera to, co piszesz i przechowuje to gdzieś na później.
Stwórz formularz do dodawania nowych notatek i przeglądania ich na liście.

Poziom 2

Aby znaleźć swoje notatki później, chcesz mieć jakiś sposób na zorganizowanie tych notatek i sposób na ich przeglądanie. Obejmuje to dodanie kategorii lub systemu tagowania, a także interfejsu użytkownika do wyszukiwania.
Dodaj możliwość tagowania lub kategoryzowania notatek oraz wejście do ich przeszukiwania.

Poziom 3

Czy zdajemy sobie z tego sprawę, czy nie, możemy znaleźć połączenia między naszymi myślami, a co ważniejsze, naszymi notatkami, gdzie możemy skorzystać z tej sieci myśli dla naszego notatnika.
Dodaj inspirowane przez Roam Research łączenie notatek w celu utworzenia sieci myśli.

To Do

• Utwórz formularz
• Przechowuj nowe notatki
• Listuj notatki
• Dodaj tagi lub kategorie
• Dodaj wyszukiwanie notatek
• Dodaj sieć notatek

Toolbox

• Gatsby Brain Theme (github.com)
• Fuse.js (fusejs.io)

Tutorials

• How to Add Search to a React App with Fuse.js (freecodecamp.org)

Inspiracja

• Foam (foambubble.github.io)
• Roam Research (roamresearch.com)
• Gatsby Garden Theme (github.com)

Pomysł na układankę

Space Invaders

Kategoria: Puzzle &Gry

Stwórz grę-strzelankę Space Invaders, w której będziesz strzelać do wielu fal wrogich statków.

Krótko

Space Invaders to arkadowy klasyk, który stawia Cię w statku kosmicznym naprzeciw inwazji obcych. Gdy próbujesz ich zestrzelić, oni strzelają do ciebie, a ty masz tylko ograniczoną ilość ochrony, zanim zostaniesz trafiony.

Poziom 1

Główną częścią gry jest to, że poruszasz się po statku kosmicznym, próbując trafić grupę obcych swoją bronią. Podczas gdy jest jeden z ciebie, jest ich wielu.
Stwórz statek kosmiczny, który może się poruszać i strzelać do obcych, którzy się nie poruszają.

Poziom 2

To, co czyni grę podchwytliwą, to fakt, że obcy ciągle się poruszają. Za każdym razem, gdy trafiają na krawędź obszaru gry, spadają w dół i przyspieszają, zbliżając się do twojego statku.
Dodaj ruch do obcych przechodzących z boku na bok na obszarze gry. Za każdym razem, gdy obcy dotrą do jednej strony, powinni spadać o jeden poziom w dół. Powinni również przyspieszać w pewnych odstępach czasu.

Poziom 3

Jesteś zdany na siebie, ale na szczęście możesz uzyskać pewną ochronę. Masz tarcze, za którymi możesz się schować, a które pomagają ci chronić, póki trwają.
Utwórz kilka tarcz przed statkiem kosmicznym gracza, które mogą przyjąć ograniczoną ilość obrażeń.

Do zrobienia

• Utwórz nową grę
• Utwórz statycznych obcych
• Utwórz statek kosmiczny gracza
• Dodaj kontrolki statku kosmicznego
• Dodaj broń statku kosmicznego
• Konfiguruj obrażenia obcych obrażenia
• Spraw, by obcy strzelali do siebie
• Spraw, by obcy się poruszali
• Dodaj odstępy czasu dla obcych
• Dodaj tarcze

Tutoriale

• Naucz się JavaScript budując 7 gier (freecodecamp.org)

Inspiracje

• Space Invaders (codepen.io)

Pomysł na układ

Temat ramowy

Kategoria: Narzędzia &Biblioteki

Stwórz motyw Gatsby, który ustawia projekt za pomocą frameworka Tailwind CSS.

Krótko

Jako programiści, zazwyczaj musimy wykonać kilka podobnych kroków za każdym razem, gdy tworzymy nowy projekt. Ale narzędzia takie jak motywy pozwalają nam abstrahować od tych kroków i pakować je w łatwy w użyciu sposób, który może działać dla każdego nowego projektu.

Poziom 1

Tematy Gatsby są systemem podobnym do wtyczek, w którym możemy skorzystać z potoku Gatsby, aby udostępnić funkcjonalność jako pakiet npm.

Otwiera to drzwi do zrobienia czegokolwiek, co zrobilibyśmy w witrynie Gatsby, ale czyni to wielokrotnego użytku w dowolnej witrynie Gatsby.
Stwórz nowy motyw Gatsby, który po użyciu tworzy nową stronę przewodnika stylu w każdym projekcie, do którego został dodany.

Poziom 2

Celem motywów nie jest tylko tworzenie stron, ale dodawanie funkcjonalności, która czyni nas produktywnymi. Obejmuje to takie rzeczy, jak frameworki i konfiguracje projektów.
Dodaj szkielet CSS do motywu Gatsby, który pozwala projektowi, do którego został dodany, używać tego szkieletu.

Poziom 3

Czasami motywy są lepsze tylko jako narzędzia, a czasami warto mieć własne zdanie. Jednym ze sposobów na dodanie użytecznej funkcjonalności do frameworka CSS jest tworzenie komponentów magazynowych.
Twórz komponenty React wielokrotnego użytku przy użyciu frameworka CSS, które mogą być używane w projekcie, do którego został dodany motyw.

To Do

• Utwórz nowy motyw
• Dodaj do przykładowego projektu
• Utwórz nową stronę stylu
• Dodaj framework CSS

.

• Użyj CSS w przykładzie
• Utwórz komponenty
• Użyj komponentów

Toolbox

• Gatsby Themes (gatsbyjs.org)
• Tailwind (tailwindcss.com)

Tutorials

• Building a Theme (gatsbyjs.org)
• What is Tailwind CSS and How Can I Add it to my Website or React App? (freecodecamp.org)

Inspiracja

• Gatsby Tailwind Theme (github.com)

Pomysł na układ

Webmentions

Kategoria: Project Add-Ons

Dodaj integrację webmentions do strony internetowej, która pokazuje interakcje Twittera z witryną.

Brief

Interakcje społecznościowe to wpływowy sposób na przyniesienie większej liczby odbiorców i konwersacji na tematy, o których piszemy.

Mając coś na stronie internetowej, pokazujemy, że interakcja może być pomocna zarówno w inspirowaniu ludzi, aby chcieli się zaangażować, jak i w dawaniu ludziom poczucia, że mogą być jej częścią.

Poziom 1

Aby korzystać z Webmentions, strona internetowa musi być skonfigurowana z meta tagami, aby dostarczać informacje.
Dodaj odpowiednie meta tagi do strony internetowej i zweryfikuj ich użycie za pomocą webmention.io.

Poziom 2

Interaktywny interfejs API Webmentions to sposób na programowe sprawdzenie połączeń w interakcjach społecznych z adresu URL Twojej strony internetowej. Pozwala uzyskać typ interakcji, a nawet awatar profilu danej osoby.
Podłącz witrynę do Webmentions i dodaj listę interakcji społecznych do stron postów na blogu.

Poziom 3

Teraz, gdy witryna pokazuje wszystkie interakcje, powinien istnieć łatwy sposób na dołączenie do rozmowy.
Dodaj łącze społecznościowe, które po kliknięciu tworzy tweeta z linkiem do strony.

To Do

• Dodaj meta tagi do strony
• Waliduj meta tagi
• Połącz się z Webmention

.

• Connect social to Bridgy
• List interakcji
• Add tweet button

Toolbox

• Webmention.io (webmention.io)
• Bridgy (brid.gy)
• Gatsby Plugin Webmention (github.com)

Tutoriale

• Indieweb pt2: Using Webmentions in Eleventy (mxb.dev)
• Clientside Webmentions (swyx.io)
• Getting started with Webmentions in Gatsby (knutmelvaer.no)
• Building Gatsby Plugin Webmentions (christopherbiscardi.com)

Inspiracja

• Knut Melvær (knutmelvaer.no)
• Swyx (swyx.io)

Layout Idea

Product Hunt

Kategoria: Klony

Stwórz klon Product Hunt, który pozwala ludziom zamieszczać nowe produkty z ocenami.

Skrót

Wszyscy żyjemy dla produktów, czy to naszych telefonów komórkowych, czy aplikacji, których używamy na naszych laptopach.

Choć na świecie są tony produktów, może być trudno nawigować między dobrymi i złymi. Narzędzia takie jak Product Hunt zapewniają platformę do nauki o nowych narzędziach i uzyskania reakcji i recenzji od innych.

Poziom 1

Najważniejszą częścią nauki o nowych produktach jest sam produkt. Chcemy wiedzieć, czym jest produkt, jak wygląda i jak działa.
Stwórz stronę, która pozwala dodać nowy produkt do witryny z tytułem, zdjęciem i opisem.

Poziom 2

Podczas poznawania produktów recenzje są sposobem, w jaki możemy zaufać produktowi, zanim go kupimy. Pomaga nam to zdobyć zaufanie do tego, na co zamierzamy wydać nasze pieniądze lub czas.
Dodaj możliwość dodawania przez ludzi recenzji o każdym produkcie.

Poziom 3

Ludzie kochają produkty, więc jest ich mnóstwo na świecie. Jest ich o wiele za dużo, aby próbować sortować je ręcznie, więc potrzebujemy mechanizmu do wyszukiwania i przeglądania.
Dodaj możliwość wyszukiwania produktów i przeglądania według kategorii.

Do zrobienia

• Utwórz stronę produktu
• Utwórz bazę danych
• Dodaj formularz produktu
• Dodaj produkt do bazy danych
• Zapytaj o produkt dla strony
• Dodaj review form
• Add reviews to database
• Add reviews to product
• Add product search
• Add product categories

Toolbox

• Hasura (hasura.io)

Tutoriale

• Budowanie aplikacji klonującej Product Hunt przy użyciu Hasura i Next.js (logrocket.com)
• Jak zbudować podstawową wersję Product Hunt przy użyciu React (freecodecamp.org)

Layout Idea

Więcej projektów

Jeśli chcesz więcej pomysłów na projekty, sprawdź 50 Projects for React & the Static web!

Pobierz za darmo na 50reactprojects.com

.