Jedním z nejlepších způsobů učení je učení praxí. Vývojáři však často bojují s velkou otázkou „co bych měl vytvořit?“.

Tady je 8 nápadů na projekty, doplněných o projektové zadání a nápady na rozvržení, které vám pomohou začít se učit praxí.

• Business &Reálný svět:
• Zábava & Zajímavé: Hudební nástroj
• Osobní & Portfolio: Blog
• Produktivita: Zápisník
• Hádanky & Hry:
• Nástroje & Knihovny: Space Invaders
• Nástroje: Space Invaders
• Knihovny: Rámcové téma
• Doplňky k projektu: Webmentions
• Klony: Tohle je náhled na bezplatnou e-knihu 50 projektů pro React & statický web. Celých 50 nápadů na projekty včetně těchto 8 najdete na adrese 50reactprojects.com.
  
  • Statistická mapa Dashboard
  • Krátce
  • Úroveň 1
  • Úroveň 2
  • Úroveň 3
  • To Do
  • Toolbox
  • Tutorials
  • Inspirace
  • Nápad na rozvržení
  • Hudební nástroj
  • Krátce
  • Úroveň 1
  • Úroveň 2
  • Úroveň 3
  • To Do
  • Toolbox
  • Tutoriály
  • Inspirace
  • Nápad na rozvržení
  • Blog
  • Krátce
  • Úroveň 1
  • Úroveň 2
  • Úroveň 3
  • To Do
  • Sada nástrojů
  • Tutoriály
  • Inspirace
  • Nápad na rozvržení
  • Notebook
  • Krátce
  • Úroveň 1
  • Úroveň 2
  • Úroveň 3
  • To Do
  • Toolbox
  • Tutorials
  • Inspirace
  • Nápad na rozvržení
  • Space Invaders
  • Krátce
  • Úroveň 1
  • Úroveň 2
  • Úroveň 3
  • To Do
  • Tutoriály
  • Inspirace
  • Nápad na rozvržení
  • Rámcové téma
  • Krátce
  • Úroveň 1
  • Úroveň 2
  • Úroveň 3
  • To Do
  • Toolbox
  • Tutoriály
  • Inspirace
  • Nápad na rozvržení
  • Webmentions
  • Krátce
  • Úroveň 1
  • Úroveň 2
  • Úroveň 3
  • To Do
  • Toolbox
  • Tutorials
  • Inspirace
  • Nápad na rozvržení
  • Hledání produktů
  • Krátce
  • Úroveň 1
  • Úroveň 2
  • Úroveň 3
  • To Do
  • Toolbox
  • Tutoriály
  • Nápad na rozvržení
  • Další projekty

  Statistická mapa Dashboard

  Kategorie:

  Vytvořte mapový řídicí panel, který zobrazuje statistické údaje a geografické informace o COVID-19.

  Krátce

  Řešení globální pandemie znamená, že viry, jako je koronavirus, mají na svět různý dopad v závislosti na geografické poloze.

  Mít k dispozici mapu s rozdělením statistik jednotlivých zemí je užitečný způsob, jak být schopen určit věci, jako například které země byly zasaženy nejvíce.

  Úroveň 1

  Nejjednodušší způsob, jak si prohlédnout statistiky jednotlivých zemí, je mít k dispozici mapu, kterou lze procházet a na které jsou u každé země k dispozici její statistiky.
  Vytvořte mapovou aplikaci, která bude používat rozhraní API disease.sh Coronavirus a přidávat do mapy značky pro jednotlivé země spolu s počtem případů COVID-19.

  Úroveň 2

  Ačkoli je užitečné mít k dispozici statistiky pro každou zemi, mohlo by být užitečné mít možnost porovnat tyto statistiky s počtem případů na celém světě.
  Přidejte panel statistik, který zobrazuje počet případů COVID-19 na celém světě a také další užitečné statistiky z rozhraní API.

  Úroveň 3

  Získání aktuálních statistik je dobrý způsob, jak pochopit současný stav ve světě, ale jak je to v porovnání s historií?“
  Použijte rozhraní API pro historická data a zobrazte na ovládacím panelu grafy, které poskytují kontext růstu a šíření viru.

  To Do

  • Vytvořit novou mapovou aplikaci
  • Získat data API zemí
  • Přidat značky do mapy
  • Přidat statistiky ke značkám
  • Získat globální data API

  .

  • Vytvoření panelu statistik
  • Přidání globálních statistik
  • Vybrání historických dat API
  • Přidání grafů do mapy

  Toolbox

  • Otevření API dat o nemocech (disease.sh)
  • React Leaflet (react-leaflet.js.org)
  • Gatsby Leaflet Starter (github.com)

  Tutorials

  • Jak vytvořit Coronavirus (COVID-19) Dashboard & Mapová aplikace v React s Gatsby a Leaflet (freecodecamp.org)
  • Jak přidat statistiky případů koronaviru (COVID-19) do mapového panelu v Reactu pomocí Gatsby (freecodecamp.org)
  • Mapování pomocí React Leaflet (egghead.io)

  Inspirace

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

  Nápad na rozvržení

  

  Hudební nástroj

  Kategorie: &Zajímavé

  Vytvořte interaktivní klavír, na kterém můžete hrát hudbu pomocí klávesnice.

  Krátce

  Ne každý si může dovolit luxus vlastnit hudební nástroj, ale možná tito lidé mají notebook, telefon nebo tablet. Mít k dispozici klavír je účinný způsob, jak umožnit lidem hrát hudbu, i když k tomu dříve neměli příležitost.

  Úroveň 1

  Pomocí prohlížeče a webového zvukového rozhraní API můžeme vytvářet zvuky, které po sestavení mohou skutečně znít jako hudba.
  Vytvořte sadu tlačítek, která po kliknutí přehrají noty stupnice.

  Úroveň 2

  Ačkoli ne každý už někdy hrál na nějaký nástroj, koncept a rozhraní nástroje, jako je klavír, je obecně intuitivnější než hromada tlačítek.
  Vytvořte rozložení klavíru pomocí tlačítek, která fungují buď kliknutím na tlačítko, nebo pomocí fyzické klávesnice.

  Úroveň 3

  Můžeme mít omezený prostor v prohlížeči, ale existuje široká škála tónů, stupnic a zvuků, které by mohla elektrická klávesnice s přidanými efekty vydávat.
  Vytvořte přepínače efektů, které po zapnutí změní zvuk not.

  To Do

  • Vytvořit tlačítka
  • Přehrát zvuk po kliknutí
  • Upravit noty ve stupnici
  • Vytvořit rozložení klavíru

  .

  • Nastavení událostí klávesnice
  • Vytvoření rozložení efektů
  • Přepínání zvukových efektů

  Toolbox

  • React HotKeys (github.com)

  Tutoriály

  • Sestavení klavíru pomocí React Hooks (dev.to)
  • Jak sestavit klaviaturu klavíru pomocí Vanilla JavaScriptu (freecodecamp.org)
  • Sestavení klavíru pomocí tone.js! (dev.to)
  • Jak jsem vytvořil piano v pouhém 1kb JavaScriptu (frankforce.com)

  Inspirace

  • React Guitar (react-guitar.com)

  Nápad na rozvržení

  

  Blog

  Kategorie: Osobní & Portfolio

  Vytvořte si blog, na kterém se můžete podělit o své kariérní zkušenosti a projekty.

  Krátce

  Při jakékoli kariéře je blog, na kterém se můžete podělit o své zkušenosti, dobrým způsobem, jak dát lidem vědět, na čem pracujete, a pomoci ostatním učit se z vašich zkušeností.

  Je to také způsob, jak si upevnit to, co jste se naučili, abyste na to mohli v budoucnu odkazovat.

  Úroveň 1

  Abyste mohli sdílet své zkušenosti, potřebujete strukturu webových stránek, která vám umožní vytvářet nový obsah a spravovat ten stávající.

  Jedním ze způsobů, jak toho dosáhnout, je vytvořit soubory markdown, které budou zdrojem vašeho webu pro vytváření nových stránek a zobrazování příspěvků.
  Vytvořte blog pomocí souborů markdown jako zdroje obsahu.

  Úroveň 2

  Mít obsah v souborech markdown je dobrý způsob, jak spravovat statický obsah, ale možná nebudete chtít upravovat kód při každém psaní nebo úpravě příspěvku.
  Zapojte systém pro správu obsahu, který vám umožní přidávat nový obsah nebo upravovat stávající pomocí příjemného uživatelského rozhraní.

  Úroveň 3

  Pokud na svém blogu sdílíte kód, HTML nativně podporuje kód a značky pre, které vám pomohou formátovat kód čitelným způsobem. To však nezahrnuje zvýrazňování syntaxe, které pomáhá zlepšit čitelnost.
  Integrujte zvýrazňovač syntaxe, díky kterému budou bloky kódu čitelnější.

  To Do

  • Vytvořit blog
  • Přidat první statický obsah
  • Zdroj statického obsahu
  • Integrovat CMS
  • Přidat kód k obsahu
  • Přidat zvýraznění syntaxe

  Sada nástrojů

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

  Tutoriály

  • Tvorba blogu Gatsby s Netlify CMS (gatsbyjs.org)
  • Jak vytvořit svůj kódovací blog od nuly pomocí Gatsby a MDX (freecodecamp.org)

  Inspirace

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

  Nápad na rozvržení

  

  Notebook

  Kategorie: Produktivita

  Vytvořte si aplikaci zápisníku pro přidávání, správu a organizaci skupiny poznámek.

  Krátce

  Psaní poznámek je skvělý způsob, jak se ujistit, že máme přehled o svých myšlenkách nebo si pamatujeme důležité poznatky z jednání. Schopnost snadno je spravovat a organizovat je je důležitá pro jejich pozdější nalezení!“

  Úroveň 1

  Prvním požadavkem na zápisník je schopnost dělat si poznámky. To může být pro začátek docela jednoduché, kdy opravdu potřebujete nějaký vstup, který shromažďuje to, co napíšete, a ukládá to někam na později.
  Vytvořte formulář pro přidávání nových poznámek a jejich zobrazení v seznamu.

  Úroveň 2

  Abyste mohli později své poznámky najít, chcete mít nějaký způsob, jak tyto poznámky uspořádat, a způsob, jak je vyhledat. To zahrnuje přidání kategorií nebo systému značek a také uživatelského rozhraní, z něhož lze provádět vyhledávání.
  Přidat možnost označování nebo kategorizace poznámek a vstup pro jejich prohledávání.

  Úroveň 3

  Ať už si to uvědomujeme, nebo ne, můžeme najít spojení mezi našimi myšlenkami a hlavně poznámkami, kde můžeme využít tuto síť myšlenek pro náš zápisník.
  Přidat Roam Research-inpsired propojení poznámek pro vytvoření sítě myšlenek.

  To Do

  • Vytvořit formulář
  • Ukládat nové poznámky
  • Seznam poznámek
  • Přidat značky nebo kategorie
  • Přidat vyhledávání poznámek
  • Přidat síť poznámek

  Toolbox

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

  Tutorials

  • Jak přidat vyhledávání do aplikace React pomocí Fuse.js (freecodecamp.org)

  Inspirace

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

  Nápad na rozvržení

  

  Space Invaders

  Kategorie: Hádanky &Hry

  Vytvořte si vesmírnou střílečku Space Invaders, ve které vystřílíte několik vln nepřátelských lodí.

  Krátce

  Space Invaders je klasická arkáda, ve které se ocitnete ve vesmírné lodi proti mimozemské invazi. Zatímco se je snažíte sestřelit, oni palbu opětují a vy máte jen omezené množství ochrany, než budete otevřeni zásahu.

  Úroveň 1

  Jádro hry spočívá v tom, že se pohybujete po vesmírné lodi a snažíte se svými zbraněmi zasáhnout hromadu mimozemšťanů. Zatímco vy jste jeden, je jich mnoho.
  Vytvořte si vesmírnou loď, která se může pohybovat a střílet na mimozemšťany, kteří se nepohybují.

  Úroveň 2

  Hru dělá složitou to, že mimozemšťané se neustále pohybují. Pokaždé, když narazí na okraj hrací plochy, klesnou dolů a zrychlí, čímž se přiblíží k vaší lodi.
  Přidejte pohyb mimozemšťanů, kteří se pohybují po hrací ploše ze strany na stranu. Pokaždé, když se mimozemšťané dostanou na jednu stranu, měli by klesnout o úroveň níže. V určitých intervalech by také měli zrychlovat.

  Úroveň 3

  Jste na to sami, ale naštěstí můžete získat nějakou ochranu. Máš štíty, za které se můžeš schovat a které ti pomohou chránit, dokud vydrží.
  Vytvoř několik štítů před hráčovou vesmírnou lodí, které vydrží omezené množství poškození.

  To Do

  • Vytvořte novou hru
  • Vytvořte statické mimozemšťany
  • Vytvořte hráčskou vesmírnou loď
  • Přidejte ovládací prvky vesmírné lodi
  • Přidejte zbraň vesmírné lodi
  • Konfigurujte mimozemšťana. poškození
  • Upravit, aby mimozemšťané stříleli zpět
  • Upravit pohyb mimozemšťanů
  • Přidat intervaly mimozemšťanů
  • Přidat štíty

  Tutoriály

  • Naučte se JavaScript sestavením 7 her (freecodecamp.org)

  Inspirace

  • Space Invaders (codepen.io)

  Nápad na rozvržení

  

  Rámcové téma

  Kategorie: Nástroje &Knihovny

  Vytvořte téma Gatsby, které nastaví projekt pomocí frameworku CSS Tailwind.

  Krátce

  Jako vývojáři musíme běžně provádět řadu podobných kroků při každém vytváření nového projektu. Ale nástroje, jako jsou témata, nám umožňují tyto kroky abstrahovat a zabalit je do snadno použitelného balíčku, který může fungovat pro jakýkoli nový projekt.

  Úroveň 1

  Témata Gatsby jsou systémem podobným zásuvnému modulu, kde můžeme využít pipeline Gatsby a sdílet funkčnost jako balíček na npm.

  To otevírá dveře k tomu, abychom mohli dělat opravdu cokoli, co bychom dělali na stránkách Gatsby, ale aby to bylo opakovaně použitelné na jakýchkoli stránkách Gatsby.
  Vytvořte nové téma Gatsby, které po použití vytvoří novou stránku průvodce styly na jakémkoli projektu, do kterého je přidáno.

  Úroveň 2

  Cílem témat není jen vytvářet stránky, ale přidávat funkce, které nám zajistí produktivitu. To zahrnuje věci, jako jsou rámce a konfigurace projektů.
  Přidejte do tématu Gatsby rámec CSS, který umožní projektu, do kterého je přidán, tento rámec používat.

  Úroveň 3

  Někdy jsou témata lepší pouze jako nástroje, někdy je užitečné mít vlastní názor. Jedním ze způsobů, jak přidat užitečné funkce do rámce CSS, je vytvořit skladové komponenty.
  Vytvořte opakovaně použitelné komponenty React pomocí rámce CSS, které lze použít v projektu, do kterého je téma přidáno.

  To Do

  • Vytvořit nové téma
  • Přidat do ukázkového projektu
  • Vytvořit novou stránku stylu
  • Přidat rámec CSS

  .

  • Použijte CSS v příkladu
  • Vytvořte komponenty
  • Použijte komponenty

  Toolbox

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

  Tutoriály

  • Vytvoření tématu (gatsbyjs.org)
  • Co je Tailwind CSS a jak ho mohu přidat na svůj web nebo do aplikace React? (freecodecamp.org)

  Inspirace

  • Téma Gatsby Tailwind (github.com)

  Nápad na rozvržení

  

  Webmentions

  Kategorie:

  Přidejte na web integraci webmentions, která zobrazuje interakce s webem na Twitteru.

  Krátce

  Sociální interakce je působivý způsob, jak k tématům, o kterých píšeme, přivést více publika a konverzace.

  Mít na webu něco, co ukazuje, že interakce může být užitečná jak pro inspiraci lidí, aby se chtěli zapojit, nebo aby lidé měli pocit, že se mohou zapojit.

  Úroveň 1

  Pro využití Webmentions musí být web nakonfigurován pomocí metaznaček, které poskytují informace.
  Přidejte na webovou stránku správné metaznačky a ověřte jejich použití pomocí webmention.io.

  Úroveň 2

  Api rozhraní Webmentions API je způsob, jak programově zobrazit spojení v sociálních interakcích z adresy URL vaší webové stránky. Umožňuje získat typ interakce a dokonce i avatar profilu dané osoby.
  Připojte webovou stránku k Webmentions a přidejte seznam sociálních interakcí na stránky s blogovými příspěvky.

  Úroveň 3

  Když už web zobrazuje všechny interakce, měl by existovat snadný způsob, jak se do konverzace zapojit.
  Přidejte sociální odkaz, který po kliknutí vytvoří tweet s odkazem na stránku.

  To Do

  • Přidat metaznačky na web
  • Ověřit metaznačky
  • Připojit k Webmention

  .

  • Připojení sociálních sítí k Bridgy
  • Seznam interakcí
  • Přidat tlačítko tweetu

  Toolbox

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

  Tutorials

  • Indieweb pt2: (mxb.dev)
  • Clientside Webmentions (swyx.io)
  • Začínáme s Webmentions v Gatsby (knutmelvaer.no)
  • Budování Gatsby Plugin Webmentions (christopherbiscardi.com)

  Inspirace

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

  Nápad na rozvržení

  

  Hledání produktů

  Kategorie:

  Vytvořte klon služby Product Hunt, který umožní lidem zveřejnit nový produkt s hodnocením.

  Krátce

  Všichni žijeme produkty, ať už jde o naše mobilní telefony nebo aplikace, které používáme na našich noteboocích.

  Ačkoli je na světě spousta produktů, může být těžké se orientovat v těch dobrých a špatných. Nástroje jako Product Hunt poskytují platformu, kde se můžete dozvědět o nových nástrojích a získat reakce a recenze od ostatních.

  Úroveň 1

  Nejdůležitější částí při poznávání nových produktů je produkt samotný. Chceme vědět, co je to za produkt, jak vypadá a jak funguje.
  Vytvořte stránku, která vám umožní přidat nový produkt na web s názvem, obrázkem a popisem.

  Úroveň 2

  Při poznávání produktů jsou recenze způsobem, jak můžeme produktu důvěřovat, než ho koupíme. Pomáhá nám získat důvěru v to, za co se chystáme utratit své peníze nebo čas.
  Přidejte možnost, aby lidé mohli přidávat recenze o jednotlivých produktech.

  Úroveň 3

  Lidé milují produkty, takže jich je na světě spousta. Je jich příliš mnoho na to, abychom se je snažili třídit ručně, takže potřebujeme mechanismus, pomocí kterého bychom mohli vyhledávat a procházet.
  Přidejte možnost vyhledávat produkty a procházet je podle kategorií.

  To Do

  • Vytvořit stránku s produkty
  • Vytvořit databázi
  • Přidat formulář s produkty
  • Přidat produkt do databáze
  • Zadat produkt na stránku
  • Přidat. formulář pro recenze
  • Přidat recenze do databáze
  • Přidat recenze k produktu
  • Přidat vyhledávání produktů
  • Přidat kategorie produktů

  Toolbox

  • Hasura (hasura.io)

  Tutoriály

  • Vytvoření klonu aplikace Product Hunt pomocí Hasura a Next.js (logrocket.com)
  • Jak vytvořit základní verzi Product Hunt pomocí React (freecodecamp.org)

  Nápad na rozvržení

  

  Další projekty

  Pokud chcete další nápady na projekty, podívejte se na 50 projektů pro React & statický web!

  Stáhněte si zdarma na 50reactprojects.com

  .