En af de bedste måder at lære på er ved at gøre. Men ofte kæmper udviklere med det store spørgsmål “hvad skal jeg bygge?”.

Her er 8 projektidéer, komplet med projektbeskrivelser og layoutidéer, der kan hjælpe dig i gang med at lære ved at gøre.

• Business & Real-World: Map Statistics Dashboard
• Sjov & Interessant: Musikinstrument
• Personligt & Portfolio: Blog
• Produktivitet: Notesbog
• Puzzles & Spil: Space Invaders
• Værktøj & Biblioteker: Framework Theme
• Project Add-Ons: Webmentions
• Kloner: Product Hunt

Dette er et eksempel på den gratis e-bog 50 Projects for React & the Static Web. Du kan finde de fulde 50 projektideer, herunder disse 8, på 50reactprojects.com.

Map Statistics Dashboard

Kategori: Business & Real-World

Opret et kort dashboard, der viser statistikker og geografiske oplysninger om COVID-19.

Brief

Håndtering af en global pandemi betyder, at vira som coronavirus påvirker verden forskelligt afhængigt af geografisk placering.

Det er nyttigt at have et kort med en opdeling af de enkelte landes statistikker for at kunne afgøre ting som f.eks. hvilke lande der er blevet mest påvirket.

Niveau 1

Den nemmeste måde at se statistikkerne land for land er at have et kort, som man kan gennemse med hvert lands statistikker tilgængelige ved siden af det pågældende land.
Opret en kort-app, der bruger disease.sh Coronavirus API’et til at tilføje markører på kortet for hvert land sammen med antallet af COVID-19-tilfælde.

Niveau 2

Selv om det er nyttigt at have statistikkerne for hvert land, kunne det være nyttigt at kunne sammenligne disse statistikker med antallet af tilfælde i hele verden.
Føj et statistik dashboard til, der viser antallet af COVID-19 tilfælde i hele verden samt andre nyttige statistikker fra API’en.

Niveau 3

At få aktuelle statistikker er en god måde at forstå den aktuelle tilstand i verden på, men hvordan kan det sammenlignes historisk?
Brug API’et til historiske data til at vise grafer på dashboardet, der giver en kontekst for væksten og spredningen af virussen.

To Do

• Opret en ny kort-app
• Hent API-landedata
• Føj markører til kortet
• Føj statistik til markørerne
• Hent API globale data
• Opret et statistik dashboard
• Føj global statistik
• Hent API historiske data
• Føj grafer til kort

Toolbox

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

Tutorials

• Sådan oprettes et Coronavirus (COVID-19) Dashboard & Map App in React with Gatsby and Leaflet (freecodecamp.org)
• Sådan tilføjer du Coronavirus (COVID-19) casestatistik til dit React map dashboard med Gatsby (freecodecamp.org)
• Mapping med React Leaflet (egghead.io)

Inspiration

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

Layout Idé

Musical Instrument

Kategori: Sjov & Interessant

Skab et interaktivt klaver, som du kan bruge til at spille musik med dit tastatur.

Kort

Det er ikke alle, der har den luksus at eje et musikinstrument, men måske har disse mennesker en bærbar computer, telefon eller tablet. At have et klaver er en effektiv måde at lade folk spille musik på, selv om de ikke havde mulighed for det før.

Niveau 1

Ved hjælp af browseren og weblyd-API’er kan vi skabe lyde, der, når de sættes sammen, faktisk kan lyde som musik.
Opret et sæt knapper, der spiller toner i en skala, når der klikkes på dem.

Niveau 2

Selv om ikke alle har spillet på et instrument før, er konceptet og grænsefladen for et instrument som et klaver generelt mere intuitiv end en masse knapper.
Opret et klaverlayout ved hjælp af knapper, der fungerer enten ved at klikke på knappen eller ved at bruge det fysiske tastatur.

Niveau 3

Vi har måske begrænset plads i browseren, men der er et bredt udvalg af toner, skalaer og lyde, som et elektrisk keyboard kan lave med nogle ekstra effekter.
Opret effektknapperne, der ændrer lyden af noderne, når de er slået til.

Til at gøre

• Opret knapper
• Afspil lyd, når der klikkes på dem
• Skift noter i en skala
• Opret klaverlayout
• Sæt tastaturbegivenheder
• Opret effektlayout
• Tænd for lydeffekter

Toolbox

• React HotKeys (github.com)

Tutorials

• Bygning af et klaver med React Hooks (dev.to)
• Hvordan man bygger et klavertastatur ved hjælp af Vanilla JavaScript (freecodecamp.org)
• Bygning af et klaver med tone.js! (dev.to)
• How I Made a Piano in only 1kb of JavaScript (frankforce.com)

Inspiration

• React Guitar (react-guitar.com)

Layout Idea

Blog

Kategori: & Personlig & Portfolio

Opret en blog, som du kan bruge til at dele dine karriereerfaringer og projekter.

Brief

Har du en blog, hvor du deler dine erfaringer, er det en god måde at lade folk vide, hvad du arbejder på, og hjælpe andre med at lære af dine erfaringer, uanset hvilken karriere du har.

Det er også en måde at styrke det, du har lært, så du kan henvise til det i fremtiden.

Niveau 1

For at kunne dele dine erfaringer har du brug for en hjemmesidestruktur, der giver dig mulighed for at oprette nyt indhold og administrere eksisterende indhold.

En måde at gøre dette på er ved at oprette markdown-filer, som dit websted er kilde til at oprette nye sider og vise indlæggene.
Opret en blog ved hjælp af markdown-filer som indholdskilde.

Niveau 2

At have dit indhold i markdown-filer er en god måde at administrere statisk indhold på, men du vil måske ikke være nødt til at redigere kode, hver gang du skriver eller redigerer et indlæg.
Integrer et indholdsstyringssystem, der giver dig mulighed for at tilføje nyt indhold eller redigere eksisterende med en flot brugergrænseflade.

Niveau 3

Hvis du deler kode på din blog, understøtter HTML nativt kode- og pre-tags, der hjælper dig med at formatere kode på en læsbar måde. Men det omfatter ikke syntakshighlighting, der hjælper med at forbedre læsbarheden.
Integrer en syntakshighlighter, der gør kodeblokke mere læsbare.

Til at gøre

• Opret en blog
• Føj første statiske indhold til
• Source statisk indhold
• Integrer CMS
• Føj kode til indhold
• Føj syntaksfremhævning

Toolbox

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

Tutorials

• Lav en Gatsby-blog med Netlify CMS (gatsbyjs.org)
• Sådan opbygger du din kodningsblog fra bunden ved hjælp af Gatsby og MDX (freecodecamp.org)

Inspiration

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

Layout Idea

Notebook

Kategori: Produktivitet

Opret en notebook-app til at tilføje, administrere og organisere en gruppe af noter.

Kortfattet

At tage noter er en god måde at sikre, at vi holder styr på vores tanker eller husker de vigtige resultater fra et møde. Det er vigtigt at kunne administrere og organisere dem nemt for at kunne finde dem senere!

Niveau 1

Det første krav til en notesbog er at kunne tage noter. Dette kan være ret simpelt til at starte med, hvor du i virkeligheden har brug for en form for input, der samler det, du skriver, og gemmer det et sted til senere.
Opret en formular til at tilføje nye noter og se dem i en liste.

Niveau 2

For at kunne finde dine noter senere, skal du have en måde at organisere disse noter på og en måde at slå dem op på. Det omfatter tilføjelse af kategorier eller et tagging-system samt en brugergrænseflade til at foretage søgninger fra.
Tilføj muligheden for at tagge eller kategorisere noter og en indgang til at søge i dem.

Niveau 3

Hvorvidt vi er klar over det eller ej, kan vi finde forbindelser mellem vores tanker og endnu vigtigere vores noter, hvor vi kan drage fordel af dette netværk af tanker til vores notesbog.
Tilføj Roam Research-inpsired sammenkædning af noter for at skabe et netværk af tanker.

To Do

• Opret en formular
• Lagre nye noter
• Liste over noter
• Tilføj tags eller kategorier
• Føj note søgning
• Føj note netværk

Toolbox

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

Tutorials

• Sådan tilføjer du søgning til 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: Puslespil & Spil

Skab et space invaders rumskibs skydespil for at skyde flere bølger af fjendtlige skibe.

Kortfattet

Space Invaders er en arkade klassiker, der sætter dig i et rumskib op mod en fremmed invasion. Mens du forsøger at skyde dem ned, skyder de tilbage, og du har kun en begrænset mængde beskyttelse, før du er åben for at blive ramt.

Niveau 1

Den centrale del af spillet er, at du bevæger dig rundt i et rumskib og forsøger at ramme en masse rumvæsener med dine våben. Mens der er én af dig, er der mange af dem.
Skab et rumskib, der kan bevæge sig rundt og skyde rumvæsener, der ikke bevæger sig.

Niveau 2

Det, der gør spillet tricky, er, at rumvæsenerne hele tiden bevæger sig. Hver gang de rammer kanten af spilleområdet, falder de ned og accelererer, så de kommer tættere på dit skib.
Føj bevægelse til de rumvæsener, der går fra side til side på spilleområdet. Hver gang rumvæsnerne når den ene side, skal de falde et niveau ned. De bør også sætte farten op med visse intervaller.

Niveau 3

Du er alene, men heldigvis kan du få noget beskyttelse. Du har skjolde, som du kan gemme dig bag, der hjælper dig med at beskytte dig, så længe de holder.
Opret flere skjolde foran spillerens rumfartøj, der kan tage en begrænset mængde skade.

To Do

• Opret et nyt spil
• Opret statiske rumvæsener
• Opret et spillerrumskib
• Føj rumskibskontroller til
• Føj rumskibsvåben til
• Konfigurer rumvæsenet
• Konfigurer rumvæsenet skade
• Få aliens til at skyde tilbage
• Få aliens til at bevæge sig
• Få aliens til at bevæge sig
• Få alien-intervaller
• Få aliens til at tilføje skjolde

Tutorials

• Lær JavaScript ved at bygge 7 spil (freecodecamp.org)

Inspiration

• Space Invaders (codepen.io)

Layout Idea

Framework Theme

Kategori: & Værktøjer & Biblioteker

Opret et Gatsby-tema, der konfigurerer et projekt med Tailwind CSS-rammen.

Brev

Som udviklere skal vi almindeligvis udføre en række lignende trin, hver gang vi opretter et nyt projekt. Men værktøjer som temaer lader os abstrahere disse trin og pakke dem på en brugervenlig måde, der kan fungere for ethvert nyt projekt.

Niveau 1

Gatsby-temaer er et plugin-lignende system, hvor vi kan drage fordel af Gatsby-pipelinen til at dele funktionalitet som en pakke på npm.

Dette åbner døren til virkelig at gøre alt, hvad vi ville gøre på et Gatsby-websted, men gør det genanvendeligt på ethvert Gatsby-websted.
Opret et nyt Gatsby-tema, der, når det bruges, opretter en ny en stilguide-side på ethvert projekt, det tilføjes til.

Niveau 2

Målet med temaer er ikke kun at oprette sider, men at tilføje funktionalitet, der gør os produktive. Dette omfatter ting som rammer og projektkonfigurationer.
Føj en CSS-ramme til Gatsby-temaet, der lader det projekt, det tilføjes til, bruge denne ramme.

Niveau 3

Sommetider er temaer kun bedre som værktøjer, sommetider er det nyttigt at have en mening. En måde at tilføje nyttig funktionalitet til en CSS-ramme er at oprette lagerkomponenter.
Opret genanvendelige React-komponenter ved hjælp af CSS-rammen, som kan bruges i det projekt, som temaet er tilføjet til.

Til at gøre

• Opret et nyt tema
• Føj til eksempelprojekt
• Opret ny stilside
• Føj CSS-ramme til
• Brug CSS i eksempel
• Opret komponenter
• Brug komponenter

Toolbox

• Gatsby-temaer (gatsbyjs.org)
• Tailwind (tailwindcss.com)

Tutorials

• Opbygning af et tema (gatsbyjs.org)
• Hvad er Tailwind CSS, og hvordan kan jeg tilføje det til mit websted eller min React-app? (freecodecamp.org)

Inspiration

• Gatsby Tailwind Theme (github.com)

Layout Idea

Webmentions

Kategori: (freecodecamp.org)

Layout Idea

Webmentions

Category: Tilføj webmentions-integration til et websted, der viser Twitter-interaktioner med webstedet.

Kortfattet

Social interaktion er en effektfuld måde at bringe mere publikum og samtale til de emner, vi skriver om.

Det at have noget på et websted viser, at interaktion kan være nyttigt for både at inspirere folk til at ville engagere sig eller lade folk føle, at de kan være en del af det.

Niveau 1

For at kunne gøre brug af Webmentions skal et websted være konfigureret med metatags for at give oplysninger.
Føj de rette metatags til et websted, og valider brugen heraf med webmention.io.

Niveau 2

Webmentions API’et er en måde at se forbindelser i sociale interaktioner programmatisk fra en URL på dit websted. Det giver dig mulighed for at få typen af interaktion og endda personens profilavatar.
Forbind et websted til Webmentions, og tilføj en liste over sociale interaktioner til blogindlægssider.

Niveau 3

Nu, hvor webstedet viser alle interaktionerne, bør der være en nem måde at deltage i samtalen på.
Føj et socialt link til, som, når du klikker på det, skaber et tweet med et link til siden.

Til at gøre

• Føj metatags til webstedet
• Validér metatags
• Opnå forbindelse til Webmention
• Forbind social til Bridgy
• Liste over interaktioner
• Tilføj tweet-knap

Toolbox

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

Tutorials

• Indieweb pt2: Brug af webmentions i Eleventy (mxb.dev)
• Clientside Webmentions (swyx.io)
• Kom godt i gang med Webmentions i Gatsby (knutmelvaer.no)
• Opbygning af Gatsby Plugin Webmentions (christopherbiscardi.com)

Inspiration

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

Layout Idé

Produktjagt

Kategori: Kloner

Opret en klon af Product Hunt, der lader folk skrive et nyt produkt med vurderinger.

Brev

Vi lever alle for produkter, uanset om det er vores mobiltelefoner eller de apps, vi bruger på vores bærbare computere.

Selv om der findes tonsvis af produkter i verden, kan det være svært at navigere rundt i de gode og de dårlige. Værktøjer som Product Hunt giver en platform til at lære om nye værktøjer og få reaktioner og anmeldelser fra andre.

Niveau 1

Den vigtigste del af at lære om nye produkter er selve produktet. Vi vil gerne vide, hvad produktet er, hvordan det ser ud, og hvordan det fungerer.
Opret en side, hvor du kan tilføje et nyt produkt til et websted med en titel, et billede og en beskrivelse.

Niveau 2

Når vi lærer om produkter, er anmeldelser en måde, hvorpå vi kan stole på et produkt, før vi køber det. Det hjælper os med at få tillid til det, vi er ved at bruge vores penge eller tid på.
Føj muligheden for, at folk kan tilføje anmeldelser om hvert produkt.

Niveau 3

Mennesker elsker produkter, så der er tonsvis af dem i verden. Der er alt for mange til at forsøge at sortere dem manuelt, så vi har brug for en mekanisme til at søge og gennemse dem med.
Føj mulighed for at søge efter produkter og gennemse dem efter kategori.

Til at gøre

• Opret produktwebsted
• Opret database
• Føj produktformular
• Føj produkt til database
• Søg produkt til side
• Forsøg produkt til side
• Føj anmeldelsesformular
• Føj anmeldelser til database
• Føj anmeldelser til produkt
• Føj produktsøgning
• Føj produktkategorier til

Værktøjskasse

• Hasura (hasura.io)

Tutorials

• Opbygning af en Product Hunt-klon-app ved hjælp af Hasura og Next.js (logrocket.com)
• Hvordan man bygger en grundlæggende version af Product Hunt ved hjælp af React (freecodecamp.org)

Layout Idé

Mere projekter

Hvis du vil have flere projektideer, kan du tjekke 50 projekter til React & det statiske web!

Download gratis på 50reactprojects.com