Yksi parhaista tavoista oppia on tekemällä. Mutta usein kehittäjät kamppailevat suuren kysymyksen ”mitä minun pitäisi rakentaa?” kanssa.

Tässä on 8 projekti-ideaa, joissa on mukana projektikuvaukset ja ulkoasuideat, jotta voit aloittaa tekemällä oppimisen.

• Business & Real-World: Karttatilastojen kojelauta
• Huvi & Mielenkiintoinen: Soitin
• Henkilökohtainen & Portfolio: Blogi
• Tuottavuus: Pelit: Muistikirja
• Palapelit & Pelit: Pelit: Space Invaders
• Työkalut & Kirjastot: Kirjastot: Framework Theme
• Projektin lisäohjelmat: Webmentions
• Kloonit: Product Hunt

Tämä on esikatselu ilmaisesta e-kirjasta 50 Projects for React & the Static Web. Löydät koko 50 projekti-ideaa, mukaan lukien nämä 8, osoitteesta 50reactprojects.com.

Karttatilastojen kojelauta

Kategoria: Business & Real-World

Luo kartta-kojelauta, joka näyttää tilastoja ja maantieteellisiä tietoja COVID-19:stä.

Lyhyesti

Maailman laajuisen pandemian hoitaminen tarkoittaa sitä, että koronaviruksen kaltaiset virukset vaikuttavat maailmaan eri tavoin maantieteellisen sijainnin mukaan.

Kartta, jossa on erittely kunkin maan tilastoista, on hyödyllinen tapa pystyä määrittämään esimerkiksi, mihin maihin on kohdistunut eniten vaikutuksia.

Taso 1

Helpoisin tapa tarkastella tilastoja maakohtaisesti on olla kartta, jota voi selata ja jossa kunkin maan tilastot ovat saatavilla kyseisen maan vieressä.
Luo karttasovellus, joka käyttää disease.sh Coronavirus API:ta lisätä kartalle kunkin maan markkereita sekä COVID-19-tapausten määrän.

Taso 2

Kaikkakin kunkin maan tilastot ovat hyödyllisiä, voisi olla hyödyllistä pystyä vertaamaan näitä tilastoja tapausten lukumäärään koko maailmassa.
Lisää tilastojen kojelauta, joka näyttää COVID-19-tapausten lukumäärän eri puolilla maailmaa sekä kaikki muut hyödylliset API:n tilastot.

Taso 3

Tämänhetkisten tilastojen saaminen on hyvä tapa ymmärtää maailman tämänhetkistä tilaa, mutta miten se vertautuu historiallisesti?
Käytä historiallisten tietojen API:ta näyttääksesi kojelaudalla kaavioita, jotka antavat kontekstin viruksen kasvulle ja leviämiselle.

To Do

• Luo uusi karttasovellus
• Noutaa API:n maatiedot
• Lisää merkkiaineistot kartalle
• Lisää tilastoja merkkiaineistoihin
• Noutaa API:n globaalit tiedot

.

• Luo tilastojen kojelauta
• Add global stats
• Fetch API historical data
• Add graphs to map

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 & Karttasovellus Reactilla Gatsbyn ja Leafletin avulla (freecodecamp.org)
• Kuinka lisätä Coronavirus (COVID-19) -tapaustilastoja React-kartta-kojelautaan Gatsbyn avulla (freecodecamp.org)
• Mapping with React Leaflet (egghead.io)

Inspiraatio

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

Layout Idea

Musiikki-instrumentti

Kategoria: Fun & Interesting

Luo interaktiivinen piano, jolla voit soittaa musiikkia näppäimistölläsi.

Brief

Kaikkeilla ei ole sitä ylellisyyttä, että he voisivat omistaa soittimen, mutta ehkä näillä ihmisillä on kannettava tietokone, puhelin tai tabletti. Pianon omistaminen on tehokas tapa antaa ihmisille mahdollisuus soittaa musiikkia, vaikka heillä ei olisi aiemmin ollut siihen mahdollisuutta.

Taso 1

Käyttämällä selainta ja web-ääniohjelmointirajapintoja voimme luoda ääniä, jotka yhdistettynä voivat todella kuulostaa musiikilta.
Luo joukko painikkeita, jotka soittavat asteikon nuotteja, kun niitä napsautetaan.

Taso 2

Vaikka kaikki eivät ole ennen soittaneet instrumenttia, pianon kaltaisen instrumentin käsite ja käyttöliittymä on yleensä intuitiivisempi kuin joukko painikkeita.
Luo pianon asettelu käyttäen painikkeita, jotka toimivat joko painiketta napsauttamalla tai fyysistä näppäimistöä käyttämällä.

Taso 3

Tila selaimessa saattaa olla rajallinen, mutta sähköisellä näppäimistöllä on laaja valikoima nuotteja, asteikkoja ja ääniä, joita sähköinen näppäimistö saattaa pystyä tuottamaan lisätyillä efekteillä.
Luo efektikytkimiä, jotka muuttavat nuottien ääntä, kun ne kytketään päälle.

Tehdä

• Luo painikkeita
• Toistetaan ääni, kun sitä napsautetaan
• Järjestä nuotteja asteikossa
• Luo pianon asettelu

.

• Määritä näppäimistötapahtumia
• Luo efektiasettelu
• Vaihda ääniefektejä

Toolbox

• React HotKeys (github.com)

Tutorials

• Pianon rakentaminen React Hooksin avulla (dev.to)
• How to Build a Piano Keyboard Using Vanilla JavaScript (freecodecamp.org)
• Pianon rakentaminen tone.js:llä! (dev.to)
• How I Made a Piano in only 1kb of JavaScript (frankforce.com)

Inspiration

• React Guitar (react-guitar.com)

Layout-idea

Blogi

Kategoria: Henkilökohtainen & Portfolio

Luo blogi, jonka avulla voit jakaa urakokemuksiasi ja projektejasi.

Lyhyt

Millä tahansa uralla blogin pitäminen kokemusten jakamista varten on hyvä tapa kertoa ihmisille, minkä parissa työskentelet ja auttaa muita oppimaan kokemuksistasi.

Se on myös tapa vahvistaa sitä, mitä olet oppinut, jotta voit viitata siihen tulevaisuudessa.

Taso 1

Voidaksesi jakaa kokemuksiasi tarvitset verkkosivuston rakenteen, jonka avulla voit luoda uutta sisältöä ja hallita olemassa olevaa sisältöä.

Yksi tapa tehdä tämä on luoda markdown-tiedostoja, joita verkkosivustosi käyttää lähteenä uusien sivujen luomisessa ja viestien näyttämisessä.
Luo blogi käyttämällä markdown-tiedostoja sisällön lähteenä.

Taso 2

Sisällön säilyttäminen markdown-tiedostoissa on hyvä tapa hallita staattista sisältöä, mutta et ehkä halua joutua muokkaamaan koodia joka kerta kirjoittaessasi tai muokatessasi viestiä.
Lisää sisällönhallintajärjestelmä, jonka avulla voit lisätä uutta sisältöä tai muokata olemassa olevaa mukavan käyttöliittymän avulla.

Taso 3

Jos jaat koodia blogissasi, HTML tukee natiivisti koodia ja pre-tunnisteita, jotka auttavat muotoilemaan koodin luettavaksi. Siihen ei kuitenkaan kuulu syntaksin korostus, joka auttaa parantamaan luettavuutta.
Integroi syntaksin korostus, joka tekee koodilohkoista luettavampia.

Tehtävä

• Luo blogi
• Lisää ensimmäinen staattinen sisältö
• Lähde staattinen sisältö
• Integroi CMS
• Lisää koodia sisältöön
• Lisää syntaksin korostusta

Toolbox

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

Tutorials

• Gatsby-blogin tekeminen Netlify CMS:llä (gatsbyjs.org)
• Kuinka rakentaa koodausblogi tyhjästä Gatsbyn ja MDX:n avulla (freecodecamp.org)

Inspiraatio

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

Layout Idea

Vihkonen

Kategoria: Tuottavuus

Luo muistikirjasovellus, jolla voit lisätä, hallita ja järjestää ryhmän muistiinpanoja.

Lyhyesti

Muistiinpanojen tekeminen on loistava tapa varmistaa, että pysymme kärryillä ajatuksistamme tai muistamme tärkeät asiat kokouksesta. Niiden helppo hallinta ja järjestäminen on tärkeää niiden löytämiseksi myöhemmin!

Taso 1

Vihkon ensimmäinen vaatimus on se, että siihen voi tehdä muistiinpanoja. Tämä voi olla aluksi melko yksinkertaista, jolloin oikeastaan tarvitset jonkinlaisen syötteen, joka kerää kirjoittamasi asiat ja tallentaa ne jonnekin myöhempää käyttöä varten.
Luo lomake, jolla voit lisätä uusia muistiinpanoja ja tarkastella niitä luettelona.

Taso 2

Muistiinpanojen myöhempää löytämistä varten haluat jonkinlaisen tavan järjestää muistiinpanot ja tavan, jolla voit hakea niitä. Siihen kuuluu kategorioiden tai merkintäjärjestelmän lisääminen sekä käyttöliittymä, josta voi tehdä hakuja.
Lisää mahdollisuus merkitä tai kategorisoida muistiinpanoja ja syöttö, jonka avulla niitä voi hakea.

Taso 3

Osaamme tiedostaa sen tai emme, löydämme yhteyksiä ajatustemme ja etenkin muistiinpanojemme välille, jolloin voimme hyödyntää tuota ajatusten verkostoa muistikirjassamme.
Lisää muistiinpanojen Roam Research -painotteinen linkittäminen ajatusten verkoston luomiseen.

Tehtävä

• Luo lomake
• Tallenna uusia muistiinpanoja
• Lista muistiinpanoja
• Lisää tunnisteita tai kategorioita
• Lisää muistiinpanohakua
• Lisää muistiinpanoverkkoa

Toolbox

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

Tutorials

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

Inspiraatio

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

Layout Idea

Space Invaders

Kategoria: Palapelit & Pelit

Luo Space Invaders avaruusalusten räiskintäpeli, jossa ammut useita aaltoja vihollisaluksia.

Lyhyesti

Space Invaders on arcade-klassikko, jossa joudut avaruusaluksen kyydissä vastustamaan avaruusolentojen invaasiota. Kun yrität ampua niitä alas, ne ampuvat takaisin, ja sinulla on vain rajallinen määrä suojaa ennen kuin olet alttiina osumille.

Level 1

Pelin ydin on se, että liikut avaruusaluksessa yrittäen osua aseillasi joukkoon muukalaisia. Vaikka sinua on yksi, niitä on monta.
Luo avaruusalus, joka voi liikkua ja ampua muukalaisia, jotka eivät liiku.

Taso 2

Pelistä tekee hankalan se, että muukalaiset liikkuvat jatkuvasti. Aina kun ne osuvat pelialueen reunaan, ne putoavat alas ja kiihtyvät, jolloin ne pääsevät lähemmäs alustasi.
Lisää liikettä avaruusolioille, jotka kulkevat pelialueella puolelta toiselle. Aina kun avaruusoliot saavuttavat yhden sivun, niiden pitäisi pudota tason alaspäin. Niiden pitäisi myös nopeutua tietyin väliajoin.

Taso 3

Olet yksin, mutta onneksi saat suojaa. Sinulla on suojia, joiden taakse voit piiloutua ja jotka auttavat suojaamaan sinua niin kauan kuin ne kestävät.
Luo useita suojia pelaajan avaruusaluksen eteen, jotka kestävät rajoitetun määrän vahinkoa.

To Do

• Luo uusi peli
• Luo staattiset avaruusoliot
• Luo pelaajan avaruusalus
• Lisää avaruusaluksen hallintalaitteet
• Lisää avaruusaluksen ase
• Konfiguroi avaruusolio

. damage

• Make alien shoot back
• Make alien move
• Add alien intervals
• Add shields

Tutorials

• Opi JavaScript rakentamalla 7 peliä (freecodecamp.org)

Inspiraatio

• Space Invaders (codepen.io)

Layout Idea

Framework Theme

Kategoria: Työkalut & Kirjastot

Luo Gatsby-teema, joka määrittää projektin Tailwind CSS-kehyksen avulla.

Lyhyesti

Kehittäjinä joudumme yleensä tekemään joukon samankaltaisia vaiheita aina kun luomme uuden projektin. Mutta teemojen kaltaisten työkalujen avulla voimme abstrahoida nämä vaiheet ja paketoida ne helppokäyttöiseen tapaan, joka voi toimia missä tahansa uudessa projektissa.

Level 1

Gatsby-teemat ovat pluginin kaltainen järjestelmä, jossa voimme hyödyntää Gatsby-putkea toiminnallisuuden jakamiseksi pakettina npm:ssä.

Tämä avaa meille mahdollisuuden tehdä oikeastaan mitä tahansa, mitä tekisimme Gatsby-sivustolla, mutta tehden siitä uudelleenkäytettävää mihin tahansa Gatsby-sivustoon.
Luo uusi Gatsby-teema, joka käytettäessä luo uuden tyyliopassivun mihin tahansa projektiin, johon se lisätään.

Taso 2

Teemojen tavoitteena ei ole vain luoda sivuja, vaan lisätä toiminnallisuutta, joka tekee meistä tuottavia. Tähän kuuluvat sellaiset asiat kuin kehykset ja projektin määritykset.
Lisää Gatsby-teemaan CSS-kehys, jonka avulla projekti, johon se lisätään, voi käyttää kyseistä kehystä.

Taso 3

Joskus teemat ovat parempia vain työkaluina, joskus on hyödyllistä olla mielipiteellinen. Yksi tapa lisätä hyödyllistä toiminnallisuutta CSS-kehykseen on luoda varastokomponentteja.
Luo CSS-kehystä käyttäen uudelleenkäytettäviä React-komponentteja, joita voidaan käyttää projektissa, johon teema on lisätty.

To Do

• Luo uusi teema
• Lisää esimerkkiprojektiin
• Luo uusi tyylisivu
• Lisää CSS-kehys

.

• Käytä CSS:ää esimerkissä
• Luo komponentteja
• Käytä komponentteja

Toolbox

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

Tutorials

• Teeman rakentaminen (gatsbyjs.org)
• Mikä on Tailwind CSS ja miten voin lisätä sen verkkosivuilleni tai React-sovellukseeni? (freecodecamp.org)

Inspiraatio

• Gatsby Tailwind Theme (github.com)

Layout Idea

Webmentions

Kategoria: Project Add-Ons

Add webmentions integration to a website that shows Twitter interactions with the website.

Brief

Sosiaalinen vuorovaikutus on vaikuttava tapa tuoda lisää yleisöä ja keskustelua aiheisiin, joista kirjoitamme.

Jotain verkkosivustolla osoittaa, että vuorovaikutus voi olla hyödyllistä sekä innostaa ihmisiä haluamaan osallistua tai antaa ihmisten tuntea, että he voivat olla mukana.

Taso 1

Voidakseen hyödyntää Webmentions-ominaisuuksia verkkosivusto on konfiguroitava metatunnisteilla, jotta se voi antaa tietoa.
Lisää verkkosivulle oikeat metatunnisteet ja validoi sen käyttö webmention.io:n avulla.

Taso 2

Webmentions API on tapa nähdä ohjelmallisesti yhteydet sosiaalisessa vuorovaikutuksessa verkkosivuston URL-osoitteesta. Sen avulla saat vuorovaikutuksen tyypin ja jopa henkilön profiilin avatarin.
Liitä verkkosivusto Webmentionsiin ja lisää luettelo sosiaalisista vuorovaikutuksista blogikirjoitussivuille.

Taso 3

Nyt kun sivusto näyttää kaikki vuorovaikutukset, pitäisi olla helppo tapa liittyä keskusteluun.
Lisää sosiaalinen linkki, jota napsauttamalla luodaan twiitti, jossa on linkki sivulle.

Tehtävä

• Lisää metatunnisteet verkkosivustolle
• Validoi metatunnisteet
• Yhdistä Webmentioniin

.

• Yhdistä sosiaalinen Bridgyyn
• Lista vuorovaikutukset
• Lisää twiittipainike

Toolbox

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

Tutorials

• Indieweb pt2: Webmentionien käyttäminen Eleventyssä (mxb.dev)
• Clientside Webmentions (swyx.io)
• Getting started with Webmentions in Gatsby (knutmelvaer.no)
• Building Gatsby Plugin Webmentions (christopherbiscardi.com)

Inspiraatio

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

Layout Idea

Tuotemetsästys

Kategoria: Kloonit

Luo Product Hunt -klooni, jonka avulla ihmiset voivat julkaista uuden tuotteen arvosteluineen.

Lyhyesti

Me kaikki elämme tuotteille, olipa kyse sitten matkapuhelimistamme tai sovelluksista, joita käytämme kannettavissamme.

Maailmassa on valtavasti tuotteita, mutta voi olla vaikeaa suunnistaa hyvien ja huonojen tuotteiden välillä. Product Huntin kaltaiset työkalut tarjoavat alustan, jonka avulla voi tutustua uusiin työkaluihin ja saada reaktioita ja arvosteluja muilta.

Taso 1

Tärkein osa uusiin tuotteisiin tutustumisessa on itse tuote. Haluamme tietää, mikä tuote on, miltä se näyttää ja miten se toimii.
Luo sivu, jolla voit lisätä uuden tuotteen verkkosivustolle otsikolla, kuvalla ja kuvauksella.

Taso 2

Tuotteisiin tutustuttaessa arvostelut ovat keino, jolla voimme luottaa tuotteeseen ennen sen ostamista. Se auttaa meitä saamaan luottamusta siihen, mihin aiomme käyttää rahamme tai aikamme.
Lisää mahdollisuus, että ihmiset voivat lisätä arvosteluja kustakin tuotteesta.

Taso 3

Ihmiset rakastavat tuotteita, joten niitä on maailmassa valtavasti. Niitä on aivan liikaa, jotta niitä voisi yrittää lajitella manuaalisesti, joten tarvitsemme mekanismin, jonka avulla voimme etsiä ja selata.
Lisää mahdollisuus etsiä tuotteita ja selata kategorioiden mukaan.

Tehtävä

• Tuotesivuston luominen
• Tietokannan luominen
• Tuotelomakkeen lisääminen
• Tuotteen lisääminen tietokantaan
• Tuotteen pyytäminen sivulle
• Lisääm. arvostelulomake
• Lisää arvosteluja tietokantaan
• Lisää arvosteluja tuotteeseen
• Lisää tuotehaku
• Lisää tuotekategorioita

Työkalupakki

• Hasura (hasura.io)

Tutorials

• Product Hunt -kloonisovelluksen rakentaminen Hasuran ja Next.js:n avulla (logrocket.com)
• Kuinka rakentaa perusversio Product Huntista Reactin avulla (freecodecamp.org)

Layout Idea

Lisää projekteja

Jos haluat lisää projekti-ideoita, tutustu 50 Projects for React & the Static web!

Lataa ilmaiseksi osoitteesta 50reactprojects.com