Eén van de beste manieren om te leren is door te doen. Maar vaak worstelen ontwikkelaars met de grote vraag “wat moet ik bouwen?”

Hier vindt u 8 projectideeën, compleet met projectopdrachten en lay-outideeën, om u op weg te helpen met leren door te doen.

• Business & Real-World: Kaart Statistieken Dashboard
• Fun & Interessant: Muziekinstrument
• Persoonlijk & Portfolio: Blog
• Productiviteit: Notitieboek
• Puzzels & Spelletjes: Space Invaders
• Gereedschap & Bibliotheken: Framework Theme
• Project Add-Ons: Webmentions
• Clones: Product Hunt

Dit is een preview van het gratis ebook 50 Projecten voor React & het Statische Web. U kunt de volledige 50 projectideeën, inclusief deze 8, vinden op 50reactprojects.com.

Map Statistics Dashboard

Category: Business & Real-World

Maak een kaartdashboard dat statistieken en geografische informatie toont over COVID-19.

Brief

Het omgaan met een wereldwijde pandemie betekent dat virussen zoals het Coronavirus de wereld anders beïnvloeden op basis van geografische locatie.

Het hebben van een kaart met een uitsplitsing van de statistieken van elk land is een nuttige manier om dingen te kunnen bepalen, zoals welke landen het meest zijn getroffen.

Level 1

De gemakkelijkste manier om statistieken per land te zien, is een kaart waarop je kunt bladeren met de statistieken van elk land beschikbaar naast dat land.
Maak een mapping app die gebruik maakt van de disease.sh Coronavirus API om markers toe te voegen aan de kaart voor elk land samen met het aantal COVID-19 gevallen.

Level 2

Hoewel de statistieken voor elk land nuttig zijn, zou het nuttig kunnen zijn om deze statistieken te kunnen vergelijken met het aantal gevallen in de hele wereld.
Een statistisch dashboard toevoegen dat het aantal COVID-19-gevallen in de hele wereld laat zien, evenals andere nuttige statistieken van de API.

Level 3

Huidige statistieken zijn een goede manier om de huidige toestand in de wereld te begrijpen, maar hoe verhoudt zich dat historisch?
Gebruik de historische data API om grafieken op het dashboard te tonen die context geven aan de groei en verspreiding van het virus.

To Do

• Een nieuwe kaart-app maken
• API-landengegevens ophalen
• markers aan kaart toevoegen
• statistieken aan markers toevoegen
• API-wereldwijde gegevens ophalen
• Maak een statistieken dashboard
• Voeg globale statistieken toe
• Verzamel API historische data
• Voeg grafieken toe aan kaart

Toolbox

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

Tutorials

• Hoe maak je een Coronavirus (COVID-19) Dashboard & Map App in React met Gatsby en Leaflet (freecodecamp.org)
• Hoe Coronavirus (COVID-19) casestatistieken toe te voegen aan je React kaartdashboard met Gatsby (freecodecamp.org)
• In kaart brengen met React Leaflet (egghead.io)

Inspiratie

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

Layout-idee

Musical Instrument

Category: Fun & Interesting

Maak een interactieve piano waarmee je muziek kunt spelen met je toetsenbord.

Brief

Niet iedereen heeft de luxe om een muziekinstrument te bezitten, maar misschien hebben die mensen wel een laptop, telefoon of tablet. Het hebben van een piano is een krachtige manier om mensen muziek te laten spelen, zelfs als ze eerder niet de mogelijkheid hadden.

Level 1

Met behulp van de browser en web audio API’s, kunnen we geluiden maken die, wanneer ze samengevoegd worden, daadwerkelijk als muziek kunnen klinken.
Maak een set knoppen die noten van een toonladder afspelen wanneer erop geklikt wordt.

Level 2

Niet iedereen heeft ooit een instrument bespeeld, maar het concept en de interface van een instrument als een piano is over het algemeen intuïtiever dan een stel knoppen.
Maak een piano layout met behulp van knoppen die werken door ofwel op de knop te klikken of het fysieke toetsenbord te gebruiken.

Level 3

We hebben misschien beperkte ruimte in de browser, maar er is een breed scala aan noten, toonladders, en geluiden die een elektrisch keyboard zou kunnen maken met wat toegevoegde effecten.
Maak effect toggles die het geluid van de noten veranderen als je ze aanzet.

To Do

• Knoppen
• Geluid afspelen als erop geklikt wordt
• Noten in een toonladder
• Pianolay-out

maken

• Toetsenbordgebeurtenissen instellen
• Effectenindeling maken
• Schakel audio-effecten

Toolbox

• React HotKeys (github.com)

Tutorials

• Een piano bouwen met React Hooks (dev.to)
• How to Build a Piano Keyboard Using Vanilla JavaScript (freecodecamp.org)
• Een piano bouwen met tone.js! (dev.to)
• Hoe ik een piano maakte in slechts 1kb JavaScript (frankforce.com)

Inspiratie

• React Guitar (react-guitar.com)

Lay-out idee

Blog

Categorie: Personal & Portfolio

Maak een blog waarmee u ervaringen en projecten uit uw carrière kunt delen.

Brief

Bij elke carrière is het hebben van een blog om uw ervaringen te delen een goede manier om mensen te laten weten waar u mee bezig bent en anderen te helpen van uw ervaringen te leren.

Het is ook een manier om te versterken wat je hebt geleerd, zodat je er in de toekomst naar kunt verwijzen.

Level 1

Om je ervaringen te kunnen delen, heb je een websitestructuur nodig die je in staat stelt nieuwe inhoud te maken en bestaande inhoud te beheren.

Een manier om dit te doen is door markdown-bestanden te maken die uw website bronnen om nieuwe pagina’s te maken en de berichten weer te geven.
Maak een blog met behulp van markdown-bestanden als de bron van de inhoud.

Level 2

Het hebben van uw inhoud in markdown-bestanden is een goede manier om statische inhoud te beheren, maar u wilt misschien niet elke keer dat u een bericht schrijft of wijzigt code hoeven te bewerken.
Integreer een content management systeem waarmee u nieuwe inhoud kunt toevoegen of bestaande kunt bewerken met een mooie gebruikersinterface.

Level 3

Als u code deelt op uw blog, ondersteunt HTML van nature de code- en pre-tags waarmee u code op een leesbare manier kunt opmaken. Maar dat omvat niet syntax highlighting die helpt de leesbaarheid te verbeteren.
Integreer een syntax highlighter die codeblokken leesbaarder maakt.

To Do

• Een blog maken
• Eerste statische inhoud toevoegen
• Startstatische inhoud toevoegen
• Integreren CMS
• Code aan inhoud toevoegen
• Syntax highlighting toevoegen

Toolbox

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

Tutorials

• Een Gatsby-blog maken met Netlify CMS (gatsbyjs.org)
• Hoe bouw je een coderingsblog vanaf nul met behulp van Gatsby en MDX (freecodecamp.org)

Inspiratie

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

Layout Idee

Notebook

Category: Productiviteit

Maak een notitieblok-app om een groep notities toe te voegen, te beheren en te organiseren.

Brief

Het maken van notities is een geweldige manier om ervoor te zorgen dat we onze gedachten bijhouden of de belangrijke punten uit een vergadering onthouden. Ze gemakkelijk kunnen beheren en organiseren is belangrijk om ze later terug te vinden!

Level 1

De eerste vereiste voor een notitieboek is het kunnen maken van aantekeningen. Dit kan vrij eenvoudig zijn om mee te beginnen, waarbij je eigenlijk een soort invoer nodig hebt die verzamelt wat je schrijft en het ergens opslaat voor later.
Maak een formulier om nieuwe notities toe te voegen en bekijk ze in een lijst.

Level 2

Om je notities later terug te vinden, wil je een manier hebben om die notities te organiseren en een manier om ze op te zoeken. Dat omvat het toevoegen van categorieën of een tag-systeem, evenals een UI om zoekopdrachten uit te voeren.
De mogelijkheid toevoegen om notities te taggen of te categoriseren en een ingang om ze te doorzoeken.

Level 3

Of we het ons realiseren of niet, we kunnen verbanden vinden tussen onze gedachten en nog belangrijker onze notities, waar we ons voordeel kunnen doen met dat netwerk van gedachten voor ons notitieblok.
Het koppelen van notities door Roam Research om een netwerk van gedachten te creëren.

To Do

• Een formulier maken
• Nieuwe notities opslaan
• Lijst van notities
• Tags of categorieën toevoegen
• Notitie zoeken
• Notienetwerk toevoegen

Toolbox

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

Tutorials

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

Inspiratie

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

Layout Idee

Space Invaders

Categorie: Puzzels & Spelletjes

Creëer een ruimteschipschietspel om meerdere golven vijandelijke schepen neer te schieten.

Brief

Space Invaders is een arcadeklassieker waarin je het in een ruimteschip opneemt tegen een buitenaardse invasie. Terwijl je ze probeert neer te schieten, vuren ze terug, en je hebt maar een beperkte hoeveelheid bescherming voordat je open staat om geraakt te worden.

Level 1

De kern van het spel is dat je je door een ruimteschip beweegt en probeert een stel aliens te raken met je wapens. Terwijl er één van u is, zijn er velen van hen.
Creëer een ruimteschip dat zich kan bewegen en schiet op aliens die niet bewegen.

Level 2

Wat het spel lastig maakt, is dat de aliens constant in beweging zijn. Elke keer als ze de rand van het speelveld raken, zakken ze naar beneden en versnellen ze, waardoor ze dichter bij je schip komen.
Voeg beweging toe aan de aliens die van kant naar kant gaan op het speelveld. Elke keer als de aliens een kant bereiken, moeten ze een niveau naar beneden zakken. Ze moeten ook versnellen op bepaalde intervallen.

Level 3

Je staat er alleen voor, maar gelukkig kun je wat bescherming krijgen. Je hebt schilden waarachter je je kunt verschuilen die je helpen beschermen zolang ze standhouden.
Maak verschillende schilden voor het ruimteschip van de speler die een beperkte hoeveelheid schade kunnen opvangen.

To do

• Een nieuw spel maken
• Statische aliens maken
• Een ruimteschip voor de speler maken
• Besturing van ruimteschip toevoegen
• Wapen van ruimteschip toevoegen
• Schade aan schade
• buitenaardse wezens laten terugschieten
• buitenaardse wezens laten bewegen
• buitenaardse intervallen toevoegen
• schilden toevoegen

Tutorials

• Leer JavaScript door 7 spelletjes te bouwen (freecodecamp.org)

Inspiratie

• Space Invaders (codepen.io)

Layout Idee

Framework Theme

Category: Tools & Bibliotheken

Maak een Gatsby-thema dat een project opzet met het Tailwind CSS framework.

Brief

Als ontwikkelaars moeten we vaak een heleboel vergelijkbare stappen uitvoeren als we een nieuw project maken. Maar tools zoals thema’s laten ons die stappen abstraheren en verpakken in een eenvoudig te gebruiken manier die kan werken voor elk nieuw project.

Level 1

Gatsby-thema’s zijn een plugin-achtig systeem waarbij we gebruik kunnen maken van de Gatsby-pijplijn om functionaliteit te delen als een pakket op npm.

Dit opent de deur om echt alles te doen wat we in een Gatsby-site zouden doen, maar het herbruikbaar te maken voor elke Gatsby-site.
Maak een nieuw Gatsby-thema dat, wanneer gebruikt, een nieuwe stijlgidspagina maakt op elk project waaraan het wordt toegevoegd.

Level 2

Het doel van thema’s is niet alleen om pagina’s te maken, maar om functionaliteit toe te voegen die ons productief maakt. Dit omvat dingen zoals raamwerken en projectconfiguraties.
Een CSS raamwerk toevoegen aan het Gatsby-thema dat het project waaraan het is toegevoegd dat raamwerk laat gebruiken.

Level 3

Soms zijn thema’s alleen beter als hulpmiddelen, soms is het nuttig om een eigen mening te hebben. Een manier om nuttige functionaliteit aan een CSS framework toe te voegen is het maken van stock components.
Maak herbruikbare React componenten met behulp van het CSS framework die gebruikt kunnen worden in het project waar het thema aan is toegevoegd.

To Do

• Een nieuw thema maken
• Aan voorbeeldproject toevoegen
• Nieuwe stijlpagina maken
• CSS-raamwerk toevoegen
• Gebruik CSS in voorbeeld
• Maak componenten
• Gebruik componenten

Toolbox

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

Tutorials

• Building a Theme (gatsbyjs.org)
• Wat is Tailwind CSS en hoe kan ik het toevoegen aan mijn Website of React App? (freecodecamp.org)

Inspiratie

• Gatsby Tailwind Theme (github.com)

Layout-idee

Webmentions

Category: Project Add-Ons

Integratie van webmentions op een website die Twitter-interacties met de website laat zien.

Brief

Sociale interactie is een impactvolle manier om meer publiek en conversatie te brengen naar onderwerpen waar we over schrijven.

Het hebben van iets op een website laat zien dat interactie nuttig kan zijn om zowel mensen te inspireren om betrokken te willen raken of mensen het gevoel te geven dat ze er deel van uit kunnen maken.

Level 1

Om gebruik te kunnen maken van Webmentions, moet een website worden geconfigureerd met metatags om informatie te verstrekken.
Voeg de juiste metatags aan een website toe en valideer het gebruik met webmention.io.

Level 2

De Webmentions API is een manier om programmatisch verbanden in sociale interacties te zien vanuit een URL van uw website. Het laat u het type interactie krijgen en zelfs het profiel avatar van de persoon.
Sluit een website aan op Webmentions en voeg een lijst van sociale interacties toe aan blog post pagina’s.

Level 3

Nu de website alle interacties toont, moet er een gemakkelijke manier zijn om aan het gesprek deel te nemen.
Een sociale link toevoegen die, wanneer erop wordt geklikt, een tweet creëert met een link naar de pagina.

To Do

• Metatags toevoegen aan website
• Metatags valideren
• Verbinden met Webmention
• Sociale verbinding maken met Bridgy
• Lijst interacties
• Tweetknop toevoegen

Toolbox

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

Tutorials

• Indieweb pt2: Het gebruik van Webmentions in Eleventy (mxb.dev)
• Clientside Webmentions (swyx.io)
• Aan de slag met Webmentions in Gatsby (knutmelvaer.no)
• Het bouwen van Gatsby Plugin Webmentions (christopherbiscardi.com)

Inspiratie

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

Lay-out idee

Product Hunt

Category: Clones

Maak een Product Hunt-kloon waarmee mensen een nieuw product kunnen plaatsen met beoordelingen.

Brief

We leven allemaal voor producten, of het nu onze mobiele telefoons zijn of de apps die we op onze laptops gebruiken.

Er zijn massa’s producten in de wereld, maar het kan moeilijk zijn om door de goede en de slechte te navigeren. Tools zoals Product Hunt bieden een platform om over nieuwe tools te leren en reacties en beoordelingen van anderen te krijgen.

Level 1

Het belangrijkste deel van het leren over nieuwe producten is het product zelf. We willen weten wat het product is, hoe het eruitziet en hoe het werkt.
Maak een pagina waarmee u een nieuw product aan een website kunt toevoegen met een titel, foto en beschrijving.

Level 2

Bij het leren over producten zijn recensies een manier waarop we een product kunnen vertrouwen voordat we het kopen. Het helpt ons vertrouwen te krijgen in wat we op het punt om ons geld of tijd te besteden aan.
Voeg de mogelijkheid voor mensen om beoordelingen toe te voegen over elk product.

Level 3

Mensen houden van producten, dus er zijn tonnen van hen in de wereld. Er zijn er veel te veel om handmatig te sorteren, dus we hebben een mechanisme nodig om te zoeken en te bladeren.
De mogelijkheid toevoegen om producten te zoeken en te bladeren per categorie.

To Do

• Productenwebsite maken
• database maken
• productformulier toevoegen
• product aan database toevoegen
• product voor pagina aanvragen
• product voor pagina aanvragen
• product aan database toevoegen

recensieformulier

• Reviews toevoegen aan database
• Reviews toevoegen aan product
• Product zoeken
• Productcategorieën toevoegen

Toolbox

• Hasura (hasura.io)

Tutorials

• Een Product Hunt-kloon-app bouwen met Hasura en Next.js (logrocket.com)
• Hoe bouw je een basisversie van Product Hunt met React (freecodecamp.org)

Layout Idee

Meer projecten

Als u meer projectideeën wilt, bekijk dan 50 projecten voor React & het statische web!

Gratis downloaden op 50reactprojects.com