Ett av de bästa sätten att lära sig är genom att göra. Men ofta kämpar utvecklare med den stora frågan ”vad ska jag bygga?”.

Här är 8 projektidéer, komplett med projektbeskrivningar och layoutidéer, som hjälper dig att börja lära dig genom att göra.

• Business & Real-World: Map Statistics Dashboard
• Fun & Intressant: Musikinstrument
• Personligt & Portfolio: Blogg
• Produktivitet: Notebook
• Pussel & Spel: Space Invaders
• Verktyg & Bibliotek: Framework Theme
• Projekttillägg: Webmentions
• Clones: Product Hunt

Detta är en förhandsvisning av den kostnadsfria e-boken 50 Projects for React & the Static Web. Du kan hitta alla 50 projektidéer inklusive dessa 8 på 50reactprojects.com.

Map Statistics Dashboard

Kategori: Skapa en karta som visar statistik och geografisk information om COVID-19.

Brief

Hantering av en global pandemi innebär att virus som coronaviruset påverkar världen på olika sätt beroende på geografiskt läge.

Att ha en karta med en uppdelning av varje lands statistik är ett användbart sätt att kunna avgöra saker som till exempel vilka länder som har drabbats mest.

Nivå 1

Det enklaste sättet att se statistik från land till land är att ha en karta som man kan bläddra i med varje lands statistik tillgänglig bredvid det landet.
Skapa en kartapplikation som använder disease.sh Coronavirus API för att lägga till markörer på kartan för varje land tillsammans med antalet COVID-19-fall.

Nivå 2

Samtidigt som det är bra att ha statistiken för varje land kan det vara användbart att kunna jämföra den statistiken med antalet fall i hela världen.
Lägg till en statistisk instrumentpanel som visar antalet COVID-19-fall i världen samt annan användbar statistik från API:et.

Nivå 3

Att få aktuell statistik är ett bra sätt att förstå det aktuella läget i världen, men hur förhåller det sig historiskt?
Använd API:et för historiska data för att visa grafer på instrumentpanelen som ger ett sammanhang för virusets tillväxt och spridning.

Göra

• Skapa en ny kartapp
• Hämta API-uppgifter om länder
• Tillägga markörer till kartan
• Tillägga statistik till markörer
• Hämta API-uppgifter om världen

.

• Skapa en statistisk instrumentpanel
• Lägg till global statistik
• Hämta API:s historiska data
• Lägg till grafer på kartan

Toolbox

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

Tutorials

• Hur man skapar en instrumentpanel för Coronavirus (COVID-19) & Map App in React with Gatsby and Leaflet (freecodecamp.org)
• Hur man lägger till fallstatistik om Coronavirus (COVID-19) till sin React kartinstrumentpanel med Gatsby (freecodecamp.org)
• Kartläggning med React Leaflet (egghead.io)

Inspiration

• 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)

Layoutidé

Musikinstrument

Kategori: Skapa ett interaktivt piano som du kan använda för att spela musik med ditt tangentbord.

Kortfattat

Inte alla har lyxen att äga ett musikinstrument, men de kanske har en bärbar dator, en telefon eller en surfplatta. Att ha ett piano är ett kraftfullt sätt att låta människor spela musik även om de inte hade möjlighet till det tidigare.

Nivå 1

Med hjälp av webbläsaren och webbaudio-API:erna kan vi skapa ljud som, när de sätts ihop, faktiskt kan låta som musik.
Skapa en uppsättning knappar som spelar upp toner i en skala när du klickar på dem.

Nivå 2

Och även om inte alla har spelat ett instrument tidigare är konceptet och gränssnittet för ett instrument som ett piano i allmänhet mer intuitivt än en massa knappar.
Skapa en pianolayout med hjälp av knappar som fungerar antingen genom att klicka på knappen eller genom att använda det fysiska tangentbordet.

Nivå 3

Vi kanske har begränsat utrymme i webbläsaren, men det finns ett brett utbud av toner, skalor och ljud som ett elektriskt tangentbord kan skapa med några extra effekter.
Skapa effektknapparna som ändrar tonernas ljud när de kopplas på.

Göra

• Skapa knappar
• Spela upp ljud när du klickar
• Skapa toner i en skala
• Skapa en pianolayout

.

• Sätt tangentbordshändelser
• Skapa effektlayout
• Växla ljudeffekter

Toolbox

• React HotKeys (github.com)

Tutorials

• Bygga ett piano med React Hooks (dev.to)
• Hur man bygger ett pianotangentbord med Vanilla JavaScript (freecodecamp.org)
• Bygga ett piano med tone.js! (dev.to)
• How I Made a Piano in only 1kb of JavaScript (frankforce.com)

Inspiration

• React Guitar (react-guitar.com)

Layout Idé

Blogg

Kategori: & Portfolio

Skapa en blogg som du kan använda för att dela med dig av dina erfarenheter och projekt i din karriär.

Kortfattat

Att ha en blogg för att dela med sig av dina erfarenheter är ett bra sätt att låta folk få veta vad du arbetar med och hjälpa andra att lära sig av dina erfarenheter.

Det är också ett sätt att förstärka det du lärt dig så att du kan hänvisa till det i framtiden.

Nivå 1

För att kunna dela med dig av dina erfarenheter behöver du en webbplatsstruktur som gör att du kan skapa nytt innehåll och hantera befintligt innehåll.

Ett sätt att göra detta är att skapa markdown-filer som din webbplats använder som källkod för att skapa nya sidor och visa inläggen.
Skapa en blogg med markdown-filer som innehållskälla.

Nivå 2

Att ha ditt innehåll i markdown-filer är ett bra sätt att hantera statiskt innehåll, men du kanske inte vill behöva redigera kod varje gång du skriver eller redigerar ett inlägg.
Integrera ett innehållshanteringssystem som låter dig lägga till nytt innehåll eller redigera befintligt med ett trevligt användargränssnitt.

Nivå 3

Om du delar med dig av kod på din blogg har HTML naturligt stöd för kod- och pre-taggar som hjälper dig att formatera kod på ett läsbart sätt. Men det inkluderar inte syntaxhighlighter som hjälper till att förbättra läsbarheten.
Integrera en syntaxhighlighter som gör kodblock mer läsbara.

Göra

• Skapa en blogg
• Lägg till det första statiska innehållet
• Källan till det statiska innehållet
• Integrera. CMS
• Lägga till kod till innehållet
• Lägga till syntaxmarkering

Toolbox

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

Tutorials

• Skapa en Gatsby-blogg med Netlify CMS (gatsbyjs.org)
• Hur du bygger din kodningsblogg från grunden med hjälp av Gatsby och MDX (freecodecamp.org)

Inspiration

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

Layout Idé

Notebook

Kategori: Produktivitet

Skapa en anteckningsboksapp för att lägga till, hantera och organisera en grupp anteckningar.

Kortfattat

Att föra anteckningar är ett bra sätt att se till att vi håller reda på våra tankar eller minns de viktiga resultaten från ett möte. Att enkelt kunna hantera dem och organisera dem är viktigt för att kunna hitta dem senare!

Nivå 1

Det första kravet på en anteckningsbok är att kunna göra anteckningar. Detta kan vara ganska enkelt till att börja med, där du egentligen behöver någon form av ingång som samlar in det du skriver och lagrar det någonstans för senare.
Skapa ett formulär för att lägga till nya anteckningar och visa dem i en lista.

Nivå 2

För att kunna hitta dina anteckningar senare vill du ha ett sätt att organisera dessa anteckningar och ett sätt att slå upp dem. Det inkluderar att lägga till kategorier eller ett taggningssystem samt ett användargränssnitt att göra sökningar från.
Lägg till möjligheten att tagga eller kategorisera anteckningar och en ingång för att söka igenom dem.

Nivå 3

Oavsett om vi inser det eller inte kan vi hitta kopplingar mellan våra tankar och, ännu viktigare, våra anteckningar, där vi kan dra nytta av det där tankesamhällsnätverket för vår anteckningsbok.
Lägg till Roam Research-inspirerad länkning av anteckningar för att skapa ett tankesamhällsnätverk.

Göra

• Skapa ett formulär
• Lagra nya anteckningar
• Lista anteckningar
• Lägg till taggar eller kategorier
• Lägg till sökning av anteckningar
• Lägg till anteckningsnätverk

Verktygslåda

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

Tutorials

• Hur man lägger till sökning i en React-app med Fuse.js (freecodecamp.org)

Inspiration

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

Layout Idea

Space Invaders

Kategori: Pussel & Spel

Skapa ett Space Invaders rymdskeppsspel för att skjuta flera vågor av fiendeskepp.

Kortfattat

Space Invaders är en arkadklassiker där du sitter i ett rymdskepp och möter en invasion av utomjordingar. När du försöker skjuta ner dem skjuter de tillbaka, och du har bara en begränsad mängd skydd innan du är öppen för att bli träffad.

Nivå 1

Kärnan i spelet är att du rör dig runt i ett rymdskepp och försöker träffa ett gäng utomjordingar med dina vapen. Medan det finns en av dig, finns det många av dem.
Skapa en rymdfarkost som kan röra sig runt och skjuta utomjordingar som inte rör sig.

Nivå 2

Det som gör spelet knepigt är att utomjordingarna hela tiden rör sig. Varje gång de träffar kanten av spelområdet sjunker de ner och ökar hastigheten och kommer närmare ditt skepp.
Lägg till rörelse för utomjordingarna som går från sida till sida på spelområdet. Varje gång utomjordingarna når en sida bör de sjunka ner en nivå. De bör också öka hastigheten med vissa intervaller.

Nivå 3

Du är ensam, men som tur är kan du få lite skydd. Du har sköldar som du kan gömma dig bakom och som hjälper till att skydda dig så länge de räcker.
Skapa flera sköldar framför spelarens rymdfarkost som kan ta en begränsad mängd skada.

Göra

• Skapa ett nytt spel
• Skapa statiska utomjordingar
• Skapa en rymdfarkost för spelaren
• Lägg till rymdfarkostens kontroller
• Lägg till rymdfarkostens vapen
• Konfigurera utomjording. damage
• Förbered utlänningar att skjuta tillbaka
• Förbered utlänningar att röra sig
• Förbered utlänningsintervaller
• Förbered sköldar

Tutorials

• Lär dig JavaScript genom att bygga 7 spel (freecodecamp.org)

Inspiration

• Space Invaders (codepen.io)

Layout Idé

Framework Theme

Kategori: Verktyg & Bibliotek

Skapa ett Gatsby-tema som ställer in ett projekt med CSS-ramverket Tailwind.

Kortfattat

Som utvecklare måste vi ofta göra en massa liknande steg varje gång vi skapar ett nytt projekt. Men verktyg som teman låter oss abstrahera dessa steg och paketera dem på ett lättanvänt sätt som kan fungera för alla nya projekt.

Nivå 1

Gatsby teman är ett plugin-liknande system där vi kan dra nytta av Gatsby-pipeline för att dela funktionalitet som ett paket på npm.

Detta öppnar dörren för att verkligen göra allt vi skulle göra på en Gatsby-webbplats, men gör det återanvändbart på vilken Gatsby-webbplats som helst.
Skapa ett nytt Gatsby-tema som, när det används, skapar en ny en stilguide-sida på vilket projekt som helst som det läggs till.

Nivå 2

Målet med teman är inte bara att skapa sidor, utan att lägga till funktionalitet som gör oss produktiva. Detta inkluderar saker som ramverk och projektkonfigurationer.
Lägg till ett CSS-ramverk till Gatsby-temat så att det projekt som det läggs till i kan använda det ramverket.

Nivå 3

Ibland är teman bättre bara som verktyg, ibland är det bra att ha en åsikt. Ett sätt att lägga till användbar funktionalitet till ett CSS-ramverk är att skapa lagerkomponenter.
Skapa återanvändbara React-komponenter med hjälp av CSS-ramverket som kan användas i det projekt som temat läggs till.

Göra

• Skapa ett nytt tema
• Tillägg till exempelprojekt
• Skapa en ny stilsida
• Tillägg CSS-ramverk

.

• Använd CSS i exemplet
• Skapa komponenter
• Använd komponenter

Toolbox

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

Tutorials

• Bygga ett tema (gatsbyjs.org)
• Vad är Tailwind CSS och hur kan jag lägga till det på min webbplats eller React-app? (freecodecamp.org)

Inspiration

• Gatsby Tailwind Theme (github.com)

Layout Idé

Webmentions

Kategori: Projekttillägg

Lägg till webmentions-integration på en webbplats som visar Twitter-interaktioner med webbplatsen.

Kortfattat

Sociala interaktioner är ett effektivt sätt att få en större publik och mer konversation till ämnen vi skriver om.

Att ha något på en webbplats visar att interaktion kan vara till hjälp för att både inspirera människor att vilja engagera sig eller låta människor känna att de kan vara en del av det.

Nivå 1

För att kunna använda sig av Webmentions måste en webbplats vara konfigurerad med metataggar för att tillhandahålla information.
Lägg till rätt metataggar till en webbplats och validera användningen med webmention.io.

Nivå 2

Webmentions API är ett sätt att programmeringsmässigt se kopplingar i sociala interaktioner från en URL på din webbplats. Det låter dig få fram typen av interaktion och till och med personens profilavatar.
Koppla en webbplats till Webmentions och lägg till en lista över sociala interaktioner på blogginläggssidor.

Nivå 3

Nu när webbplatsen visar alla interaktioner bör det finnas ett enkelt sätt att delta i samtalet.
Lägg till en social länk som, när du klickar på den, skapar en tweet med en länk till sidan.

Tillgängligt

• Lägg till metataggar på webbplatsen
• Validera metataggar
• Anslut till Webmention
• Anslut social till Bridgy
• Lista interaktioner
• Lägg till tweet-knapp

Verktygslåda

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

Tutorials

• 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)

Inspiration

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

Layoutidé

Produktjakt

Kategori: Kloner

Skapa en klon av Product Hunt som låter folk lägga upp en ny produkt med betyg.

Kortfattat

Vi lever alla för produkter, oavsett om det är våra mobiltelefoner eller de appar vi använder på våra bärbara datorer.

Men även om det finns massor av produkter i världen kan det vara svårt att navigera bland bra och dåliga. Verktyg som Product Hunt erbjuder en plattform för att lära sig om nya verktyg och få reaktioner och recensioner från andra.

Nivå 1

Den viktigaste delen av att lära sig om nya produkter är själva produkten. Vi vill veta vad produkten är, hur den ser ut och hur den fungerar.
Skapa en sida där du kan lägga till en ny produkt på en webbplats med en titel, bild och beskrivning.

Nivå 2

När vi lär oss om produkter är recensioner ett sätt för oss att lita på en produkt innan vi köper den. Det hjälper oss att få förtroende för det vi ska spendera våra pengar eller vår tid på.
Lägg till möjligheten för människor att lägga till recensioner om varje produkt.

Nivå 3

Människor älskar produkter, så det finns massor av dem i världen. Det är alldeles för många för att försöka sortera dem manuellt, så vi behöver en mekanism att söka och bläddra med.
Lägg till möjligheten att söka efter produkter och bläddra efter kategori.

Göra

• Skapa produktwebbplats
• Skapa databas
• Tillägg produktformulär
• Tillägg produkt till databas
• Förfrågan om produkt för sida
• Tillägg. recensionsformulär
• Tillägga recensioner till databas
• Tillägga recensioner till produkt
• Tillägga produktsökning
• Tillägga produktkategorier

Toolbox

• Hasura (hasura.io)

Tutorials

• Bygga en klon-app för Product Hunt med hjälp av Hasura och Next.js (logrocket.com)
• Hur man bygger en grundversion av Product Hunt med React (freecodecamp.org)

Layoutidé

Mer projekt

Om du vill ha fler projektidéer kan du läsa 50 projekt för React & den statiska webben!

Ladda ner gratis på 50reactprojects.com