A tanulás egyik legjobb módja a cselekvés. A fejlesztők azonban gyakran küzdenek a nagy kérdéssel: “mit építsek?”.

Itt van 8 projektötlet, projektismertetőkkel és elrendezési ötletekkel kiegészítve, hogy elkezdhesse a tanulás a cselekvés útján.

• Business & Real-World: Térképstatisztika műszerfal
• Fun & Érdekes: Személyes & Portfólió: Blog
• Produktivitás: Zenei hangszer
• Személyes & Portfólió: Blog
• Termelékenység: Jegyzetfüzet
• Puzzle & Játékok: Szerszámok & Könyvtárak: Space Invaders
• Szerszámok & Könyvtárak:
• Kiegészítők: Framework Theme
• Project Add-Ons: Webmentions
• Klónok: Product Hunt

Ez az ingyenes ebook 50 Projects for React & the Static Web előzetese. Business & Real-World

Készítsen egy térképes műszerfalat, amely statisztikákat és földrajzi információkat mutat a COVID-19-ről.

Brief

A globális világjárvány kezelése azt jelenti, hogy a koronavírushoz hasonló vírusok földrajzi elhelyezkedés alapján eltérő módon hatnak a világra.

Az egyes országok statisztikáinak bontását tartalmazó térkép hasznos módja annak, hogy meg lehessen állapítani olyan dolgokat, mint például, hogy mely országokra volt a legnagyobb hatással.

Level 1

A legegyszerűbb módja az országonkénti statisztikák megtekintésének, ha van egy térkép, amelyen böngészhetünk, és az egyes országok statisztikái elérhetőek az adott ország mellett.
Készítsen egy olyan térképes alkalmazást, amely a disease.sh Coronavirus API-t használja, hogy az egyes országok térképére jelöléseket adjon a COVID-19-es esetek számával együtt.

Level 2

Míg az egyes országok statisztikái hasznosak, hasznos lenne, ha ezeket a statisztikákat össze lehetne hasonlítani az egész világon előfordult esetek számával.
Adjunk hozzá egy statisztikai műszerfalat, amely megmutatja a COVID-19-es esetek számát a világon, valamint az API-ból származó egyéb hasznos statisztikákat.

3. szint

A jelenlegi statisztikák megismerése jó módja annak, hogy megértsük a világ jelenlegi állapotát, de hogyan viszonyul ez történelmileg?
Használja a történeti adatok API-t, hogy olyan grafikonokat jelenítsen meg a műszerfalon, amelyek kontextust adnak a vírus növekedésének és terjedésének.

Teendő

• Új térképalkalmazás létrehozása
• Az API országok adatainak lekérése
• Markerek hozzáadása a térképhez
• Statisztikák hozzáadása a markerekhez
• Az API globális adatok lekérése

.

• Statisztikai műszerfal létrehozása
• Globális statisztikák hozzáadása
• Az API történelmi adatok lekérése
• Grafikonok hozzáadása a térképhez

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)
• Hogyan adjunk hozzá Coronavírus (COVID-19) esetstatisztikákat a React térképes műszerfalhoz Gatsby-vel (freecodecamp.org)
• Mapping with React Leaflet (egghead.io)

Inspiration

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

Layout ötlet

Zenei hangszer

Kategória: & Érdekes

Készíts egy interaktív zongorát, amivel a billentyűzeteddel zenélhetsz.

Röviden

Nem mindenkinek adatik meg az a luxus, hogy hangszert birtokoljon, de talán ezeknek az embereknek van laptopjuk, telefonjuk vagy tabletjük. Egy zongora birtoklása hatékony módja annak, hogy az emberek akkor is zenélhessenek, ha korábban nem volt rá lehetőségük.

Level 1

A böngésző és a webes audio API-k segítségével olyan hangokat hozhatunk létre, amelyek összeállítva valóban zenének tűnhetnek.
Készítsünk olyan gombokat, amelyek egy skála hangjegyeit játsszák le, ha rákattintunk.

2. szint

Noha nem mindenki játszott már hangszeren, egy olyan hangszer, mint a zongora koncepciója és kezelőfelülete általában intuitívabb, mint egy csomó gomb.
Készítsünk egy zongora elrendezést olyan gombok segítségével, amelyek vagy a gombra kattintva, vagy a fizikai billentyűzet használatával működnek.

3. szint

Lehet, hogy korlátozott a hely a böngészőben, de a hangok, skálák és hangok széles skálája áll rendelkezésre, amelyeket egy elektromos billentyűzet néhány hozzáadott effektussal képes lehet előállítani.
Létrehozhatsz olyan hatáskapcsolókat, amelyek bekapcsoláskor megváltoztatják a hangjegyek hangzását.

Teendő

• Gombok létrehozása
• Hang lejátszása kattintáskor
• Nóták rendezése egy skálán
• Zongora elrendezés létrehozása

.

• Billentyűzetesemények beállítása
• Effektus elrendezés létrehozása
• Audio effektek kapcsolása

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)

Inspiration

• React Guitar (react-guitar.com)

Layout ötlet

Blog

Kategória: Személyes & Portfólió

Készíts egy blogot, amelyen keresztül megoszthatod a karriereddel kapcsolatos tapasztalataidat és projektjeidet.

Brief

Minden karrier esetében, ha van egy blogod, amelyen megoszthatod a tapasztalataidat, az jó módja annak, hogy az emberek megtudják, min dolgozol, és hogy mások is tanulhassanak a tapasztalataidból.

Ez egy módja annak is, hogy megerősítse a tanultakat, hogy a jövőben hivatkozhasson rájuk.

Szint 1

Hogy megoszthassa tapasztalatait, szüksége van egy olyan honlapstruktúrára, amely lehetővé teszi új tartalmak létrehozását és a meglévő tartalmak kezelését.

Egyik módja ennek az, hogy markdown fájlokat hoz létre, amelyeket a webhelye forrásként használ az új oldalak létrehozásához és a bejegyzések megjelenítéséhez.
Blogot hoz létre markdown fájlokat használva tartalomforrásként.

Szint 2

A tartalom markdown fájlokban való tárolása jó módszer a statikus tartalom kezelésére, de nem biztos, hogy minden alkalommal, amikor bejegyzést ír vagy szerkeszt, kódot kell szerkesztenie.
Integráljon egy tartalomkezelő rendszert, amely lehetővé teszi, hogy új tartalmat adjon hozzá vagy a meglévőt szerkessze egy szép felhasználói felülettel.

3. szint

Ha kódot oszt meg a blogján, a HTML natívan támogatja a kódot és a pre-tageket, amelyek segítenek a kód olvasható formázásában. Ez azonban nem tartalmazza a szintaxis kiemelést, amely segít az olvashatóság javításában.
Integráljon egy szintaxis kiemelőt, amely olvashatóbbá teszi a kódblokkokat.

Teendő

• Blog létrehozása
• Első statikus tartalom hozzáadása
• Forrás statikus tartalom
• Integrálni CMS
• Kód hozzáadása a tartalomhoz
• Szintaktikai kiemelés hozzáadása

Toolbox

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

Tutorials

• Gatsby blog készítése Netlify CMS segítségével (gatsbyjs.org)
• How to Build Your Coding Blog From Scratch Using Gatsby and MDX (freecodecamp.org)

Inspiráció

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

Layout ötlet

Notebook

Kategória: Kategória: Termelékenység

Készítsünk jegyzetfüzet alkalmazást jegyzetek csoportjának felvételéhez, kezeléséhez és rendszerezéséhez.

Brief

A jegyzetelés remek módja annak, hogy biztosan nyomon kövessük a gondolatainkat, vagy emlékezzünk a fontos tudnivalókra egy megbeszélésről. Ha könnyen tudjuk kezelni és rendszerezni őket, az fontos ahhoz, hogy később megtaláljuk őket!

Szint 1

A jegyzetfüzettel szemben támasztott első követelmény, hogy jegyzetelni tudjunk. Ez kezdetben elég egyszerű lehet, ahol valójában valamilyen bemenetre van szükséged, amely összegyűjti, amit írsz, és elraktározza valahol a későbbiekre.
Készíts egy űrlapot új jegyzetek felvételére és listában való megjelenítésére.

Level 2

Azért, hogy később megtaláld a jegyzeteidet, valamilyen módon rendszerezni akarod ezeket a jegyzeteket és egy olyan módot, amellyel megkeresheted őket. Ez magában foglalja a kategóriák vagy egy címkézési rendszer hozzáadását, valamint egy felhasználói felületet, amelyről kereséseket végezhetünk.
Adjunk lehetőséget a jegyzetek címkézésére vagy kategorizálására, valamint egy bemenetet a kereséshez.

Level 3

Akár észrevesszük, akár nem, kapcsolatokat találhatunk a gondolataink és még fontosabb a jegyzeteink között, ahol kihasználhatjuk ezt a gondolathálózatot a jegyzetfüzetünk számára.
Adjunk Roam Research-inpsired jegyzetek összekapcsolását a gondolathálózat létrehozásához.

Teendő

• Űrlap létrehozása
• Új jegyzetek tárolása
• Jegyzetek listázása
• Címkék vagy kategóriák hozzáadása
• Jegyzetkeresés hozzáadása
• Jegyzethálózat hozzáadása

Toolbox

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

Tutorials

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

Inspiráció

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

Layout Idea

Space Invaders

Kategória: Kategória: Rejtvények & Játékok

Készítsd el a Space Invaders űrhajós lövöldözős játékot, hogy több hullámban lődd szét az ellenséges hajókat.

Röviden

A Space Invaders egy arcade klasszikus, amelyben egy űrhajóban kell szembeszállnod az idegenek inváziójával. Miközben megpróbálod lelőni őket, ők visszalőnek, és csak korlátozott ideig tudsz védekezni, mielőtt még találat érhetne.

Level 1

A játék lényege, hogy egy űrhajón mozogsz, és megpróbálsz egy csomó idegen lényt eltalálni a fegyvereiddel. Míg te egy vagy, addig ők sokan vannak.
Készíts egy űrhajót, ami képes mozogni és lőni a nem mozgó idegenekre.

Level 2

A játékot az teszi trükkössé, hogy az idegenek folyamatosan mozognak. Minden alkalommal, amikor elérik a játéktér szélét, leesnek és felgyorsulnak, így egyre közelebb kerülnek az űrhajódhoz.
Adj mozgást a játéktéren oldalazó idegeneknek. Minden alkalommal, amikor az idegenek elérik az egyik oldalt, egy szinttel lejjebb kell esniük. Bizonyos időközönként fel is kellene gyorsulniuk.

3. szint

Egyedül vagy, de szerencsére kaphatsz némi védelmet. Vannak pajzsaid, amelyek mögé elbújhatsz, és amelyek segítenek megvédeni téged, amíg tartanak.
Hozz létre több pajzsot a játékos űrhajója előtt, amelyek korlátozott mennyiségű sérülést képesek elviselni.

Teendő

• Új játék létrehozása
• Sztatikus idegenek létrehozása
• Elkészíteni egy játékos űrhajót
• Add hozzá az űrhajó vezérlését
• Add hozzá az űrhajó fegyverét
• Konfiguráld az idegeneket. sebzés
• Az idegenek visszalövése
• Az idegenek mozgása
• Az idegenek intervallumainak hozzáadása
• Pajzsok hozzáadása

Tutorials

• Tanulj JavaScriptet 7 játék építésével (freecodecamp.org)

Inspiráció

• Space Invaders (codepen.io)

Layout ötlet

Kerettéma

Kategória: & Könyvtárak

Készítsünk egy Gatsby témát, amely egy projektet a Tailwind CSS keretrendszerrel állít be.

Röviden

Elkészítőként általában egy csomó hasonló lépést kell elvégeznünk, valahányszor új projektet hozunk létre. De az olyan eszközök, mint a témák lehetővé teszik számunkra, hogy ezeket a lépéseket absztraháljuk, és könnyen használható módon csomagoljuk őket, ami bármilyen új projektnél működhet.

Szint 1

A Gatsby témák egy plugin-szerű rendszer, ahol kihasználhatjuk a Gatsby pipeline előnyeit, hogy a funkciókat csomagként osszuk meg az npm-en.

Ez megnyitja az ajtót, hogy tényleg bármit megtehessünk, amit egy Gatsby oldalon tennénk, de újrafelhasználhatóvá téve azt bármelyik Gatsby oldalon.
Készítsünk egy új Gatsby témát, amely használatakor egy új stílus útmutató oldalt hoz létre bármelyik projektben, amelyhez hozzáadjuk.

Level 2

A témák célja nem csak az oldalak létrehozása, hanem olyan funkciók hozzáadása, amelyek produktívvá tesznek minket. Ez olyan dolgokat is magában foglal, mint a keretrendszerek és a projektkonfigurációk.
Adjunk egy CSS-keretet a Gatsby témához, amely lehetővé teszi, hogy a projekt, amelyhez hozzáadjuk, használja ezt a keretrendszert.

Level 3

Néha a témák csak eszközként jobbak, néha hasznos, ha véleményesek vagyunk. Az egyik módja annak, hogy hasznos funkciókat adjunk egy CSS-keretrendszerhez, a készletkomponensek létrehozása.
Újrafelhasználható React komponensek létrehozása a CSS-keretrendszer használatával, amelyek abban a projektben használhatók, amelyhez a témát hozzáadtuk.

Teendő

• Új téma létrehozása
• Add hozzá a példaprojekthez
• Új stílusoldal létrehozása
• CSS keretrendszer hozzáadása

.

• CSS használata a példában
• Komponensek létrehozása
• Komponensek használata

Toolbox

• Gatsby témák (gatsbyjs.org)
• Tailwind (tailwindcss.com)

Tutorials

• Téma építése (gatsbyjs.org)
• Mi az a Tailwind CSS és hogyan tudom hozzáadni a weboldalamhoz vagy React alkalmazásomhoz? (freecodecamp.org)

Inspiráció

• Gatsby Tailwind Theme (github.com)

Layout Idea

Webmentions

Category: Project Add-Ons

Webmentions integráció hozzáadása egy weboldalhoz, amely megmutatja a Twitter interakciókat a weboldallal.

Brief

A társadalmi interakció egy hatásos módja annak, hogy több közönséget és beszélgetést hozzunk a témákhoz, amelyekről írunk.

Az, hogy egy weboldalon van valami, ami megmutatja, hogy az interakció hasznos lehet mind ahhoz, hogy az embereket arra ösztönözze, hogy részt akarjanak venni, vagy hogy az emberek érezzék, hogy részesei lehetnek.

Szint 1

A Webmentions kihasználásához egy weboldalnak meta-tagekkel kell rendelkeznie, hogy információt nyújtson.
Adja hozzá a megfelelő meta-tageket egy webhelyhez, és érvényesítse a webmention.io segítségével a használatát.

Level 2

A Webmentions API segítségével programozottan láthatja a közösségi interakciók kapcsolatait a webhely URL-címéről. Lehetővé teszi, hogy megkapja az interakció típusát és még a személy profil avatarját is.
Kapcsoljon egy webhelyet a Webmentions-hoz, és adja hozzá a közösségi interakciók listáját a blogbejegyzések oldalaihoz.

3. szint

Most, hogy a weboldal mutatja az összes interakciót, legyen egy egyszerű módja a beszélgetéshez való csatlakozásnak.
Adjunk hozzá egy közösségi linket, amelyre kattintva egy tweet jön létre az oldalra mutató linkkel.

Teendő

• Meta címkék hozzáadása a weboldalhoz
• Meta címkék hitelesítése
• Kapcsolódjon a Webmentionhoz

.

• Kapcsolja a közösségi oldalakat a Bridgyhez
• List interakciók
• Tweet gomb hozzáadása

Toolbox

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

Tutorials

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

Inspiráció

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

Layout ötlet

Termékvadászat

Kategória: Kategória: Klónok

Készíts egy Product Hunt klónt, amely lehetővé teszi, hogy az emberek új terméket tegyenek közzé értékeléssel együtt.

Rövid leírás

Mindannyian a termékekért élünk, legyen szó a mobiltelefonunkról vagy a laptopunkon használt alkalmazásokról.

Míg rengeteg termék van a világon, nehéz lehet eligazodni a jó és a rossz között. Az olyan eszközök, mint a Product Hunt, platformot biztosítanak az új eszközök megismerésére, valamint mások reakcióinak és véleményeinek megismerésére.

Level 1

Az új termékek megismerésének legfontosabb része maga a termék. Tudni akarjuk, hogy mi a termék, hogyan néz ki, és hogyan működik.
Készítsen egy oldalt, amely lehetővé teszi, hogy új terméket adjon hozzá egy weboldalhoz címmel, képpel és leírással.

Level 2

A termékek megismerése során a vélemények egy módja annak, hogy megbízzunk egy termékben, mielőtt megvásárolnánk azt. Segítségével bizalmat nyerhetünk azzal kapcsolatban, amire a pénzünket vagy az időnket készülünk költeni.
Adjunk lehetőséget arra, hogy az emberek véleményeket adjanak hozzá az egyes termékekről.

Level 3

Az emberek szeretik a termékeket, ezért rengeteg van belőlük a világon. Túl sok van ahhoz, hogy kézzel próbáljuk meg átválogatni őket, ezért szükségünk van egy mechanizmusra, amellyel kereshetünk és böngészhetünk.
Add hozzá a termékek keresésének és kategóriák szerinti böngészésének lehetőségét.

Teendő

• Termék weboldal létrehozása
• Adatbázis létrehozása
• Termék űrlap hozzáadása
• Termék hozzáadása az adatbázishoz
• Termék kérése az oldalhoz
• Hozzáadás Értékelési űrlap
• Értékelések hozzáadása az adatbázishoz
• Értékelések hozzáadása termékhez
• Termékkeresés hozzáadása
• Termékkategóriák hozzáadása

Toolbox

• Hasura (hasura.io)

Tutorials

• Product Hunt klónalkalmazás építése Hasura és Next.js segítségével (logrocket.com)
• Hogyan építsünk egy alapverziót a Product Huntból React segítségével (freecodecamp.org)

Layout Idea

Még több projekt

Ha még több projektötletre vágysz, nézd meg az 50 Projects for React & the Static web!

Töltsd le ingyenesen az 50reactprojects.com

oldalon.