Uno dei modi migliori per imparare è facendo. Ma spesso gli sviluppatori lottano con la grande domanda “cosa dovrei costruire?”.

Qui ci sono 8 idee di progetto, complete di briefing e idee di layout, per iniziare ad imparare facendo.

• Business & Real-World: Cruscotto Statistiche Mappa
• Divertimento & Interessante: Strumento musicale
• Personale & Portfolio: Blog
• Produttività: Notebook
• Puzzle & Giochi: Space Invaders
• Strumenti &Biblioteche: Framework Theme
• Progetto Add-Ons: Webmentions
• Cloni: Product Hunt

Questa è un’anteprima dell’ebook gratuito 50 Progetti per React & il Web Statico. Puoi trovare le 50 idee di progetto complete, incluse queste 8, su 50reactprojects.com.

Map Statistics Dashboard

Categoria: Business & Mondo Reale

Crea un cruscotto cartografico che mostri statistiche e informazioni geografiche sul COVID-19.

Brief

Gestire una pandemia globale significa che virus come il Coronavirus hanno un impatto diverso sul mondo in base alla posizione geografica.

Avere una mappa con una ripartizione delle statistiche di ogni paese è un modo utile per poter determinare cose come quali paesi sono stati colpiti di più.

Livello 1

Il modo più semplice per vedere le statistiche paese per paese è quello di avere una mappa che si può navigare con le statistiche di ogni paese disponibile accanto a quel paese.
Creare un’applicazione di mappatura che utilizza il disease.sh Coronavirus API per aggiungere marcatori alla mappa per ogni paese insieme al numero di casi COVID-19.

Livello 2

Anche se avere le statistiche per ogni paese è utile, potrebbe essere utile essere in grado di confrontare queste statistiche con il numero di casi nel mondo intero.
Aggiungi un cruscotto di statistiche che mostri il numero di casi di COVID-19 nel mondo e qualsiasi altra statistica utile dall’API.

Livello 3

Avere le statistiche attuali è un buon modo per capire lo stato attuale del mondo, ma come si confronta storicamente?
Utilizza l’API dei dati storici per mostrare dei grafici sul cruscotto che forniscano il contesto della crescita e della diffusione del virus.

Da fare

• Crea una nuova app mappa
• Prendi i dati API dei paesi
• Aggiungi marcatori alla mappa
• Aggiungi statistiche ai marcatori
• Prendi dati API globali
• Crea un cruscotto di statistiche
• Aggiungi statistiche globali
• Prendi dati storici API
• Aggiungi grafici alla mappa

Toolbox

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

Tutorials

• Come creare un Coronavirus (COVID-19) Dashboard & Map App in React with Gatsby and Leaflet (freecodecamp.org)
• Come aggiungere le statistiche dei casi di Coronavirus (COVID-19) alla tua dashboard React map con Gatsby (freecodecamp.org)
• Mappatura con React Leaflet (egghead.io)

Ispirazione

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

Layout Idea

Strumento musicale

Categoria: Divertimento & Interessante

Crea un pianoforte interattivo che puoi usare per suonare la musica con la tua tastiera.

Brief

Non tutti hanno il lusso di possedere uno strumento musicale, ma forse quelle persone hanno un portatile, un telefono o un tablet. Avere un pianoforte è un modo potente per permettere alle persone di suonare la musica anche se prima non ne avevano la possibilità.

Livello 1

Utilizzando il browser e le API audio del web, possiamo creare suoni che, messi insieme, possono effettivamente suonare come musica.
Creare una serie di pulsanti che suonano le note di una scala quando si clicca.

Livello 2

Anche se non tutti hanno suonato uno strumento prima, il concetto e l’interfaccia di uno strumento come un pianoforte è generalmente più intuitivo di un mucchio di pulsanti.
Creare un layout di pianoforte usando pulsanti che funzionano sia cliccando il pulsante che usando la tastiera fisica.

Livello 3

Potremmo avere uno spazio limitato nel browser, ma c’è una vasta gamma di note, scale e suoni che una tastiera elettrica potrebbe fare con qualche effetto aggiunto.
Crea dei toggle di effetti che cambiano il suono delle note quando vengono attivati.

Da fare

• Crea pulsanti
• Suona quando viene cliccato
• Modifica le note in una scala
• Crea layout di pianoforte
• Imposta gli eventi della tastiera
• Crea il layout degli effetti
• Attiva gli effetti audio

Toolbox

• React HotKeys (github.com)

Tutorials

• Costruire un pianoforte con React Hooks (dev.to)
• Come costruire una tastiera per pianoforte usando Vanilla JavaScript (freecodecamp.org)
• Costruire un pianoforte con tone.js! (dev.to)
• Come ho fatto un pianoforte in solo 1kb di JavaScript (frankforce.com)

Ispirazione

• React Guitar (react-guitar.com)

Idea layout

Blog

Categoria: Personale & Portfolio

Crea un blog che puoi usare per condividere le esperienze e i progetti della tua carriera.

Brief

Con qualsiasi carriera, avere un blog per condividere le tue esperienze è un buon modo per far sapere alla gente su cosa stai lavorando e aiutare gli altri a imparare dalle tue esperienze.

E’ anche un modo per rinforzare ciò che hai imparato in modo da potervi fare riferimento in futuro.

Livello 1

Per poter condividere le tue esperienze, hai bisogno di una struttura web che ti permetta di creare nuovi contenuti e gestire quelli esistenti.

Un modo per farlo è la creazione di file markdown che il tuo sito web utilizza per creare nuove pagine e visualizzare i post.
Crea un blog utilizzando i file markdown come fonte di contenuto.

Livello 2

Avere il tuo contenuto in file markdown è un buon modo per gestire il contenuto statico, ma potresti non voler modificare il codice ogni volta che scrivi o modifichi un post.
Integra un sistema di gestione dei contenuti che ti permette di aggiungere nuovi contenuti o di modificare quelli esistenti con una bella interfaccia utente.

Livello 3

Se stai condividendo del codice sul tuo blog, l’HTML supporta nativamente i tag codice e pre che ti aiutano a formattare il codice in modo leggibile. Ma questo non include l’evidenziazione della sintassi che aiuta a migliorare la leggibilità.
Integra un evidenziatore di sintassi che rende i blocchi di codice più leggibili.

Da fare

• Crea un blog
• Aggiungi il primo contenuto statico
• Sorgente contenuto statico
• Integra il CMS
• Aggiungi codice al contenuto
• Aggiungi evidenziazione della sintassi

Toolbox

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

Tutorials

• Fare un blog Gatsby con Netlify CMS (gatsbyjs.org)
• Come costruire il tuo blog di codifica da zero usando Gatsby e MDX (freecodecamp.org)

Ispirazione

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

Idea layout

Notebook

Categoria: Produttività

Crea un’applicazione per notebook per aggiungere, gestire e organizzare un gruppo di note.

Brief

Prendere appunti è un ottimo modo per essere sicuri di tenere traccia dei nostri pensieri o ricordare i punti salienti di una riunione. Essere in grado di gestirli e organizzarli facilmente è importante per trovarli in seguito!

Livello 1

Il primo requisito di un notebook è essere in grado di prendere appunti. Questo può essere abbastanza semplice per iniziare, dove in realtà hai bisogno di una sorta di input che raccolga ciò che scrivi e lo memorizzi da qualche parte per dopo.
Crea un modulo per aggiungere nuove note e visualizzarle in una lista.

Livello 2

Per trovare le tue note in seguito, vuoi un modo per organizzare quelle note e un modo per cercarle. Questo include l’aggiunta di categorie o un sistema di tagging così come un’interfaccia utente da cui fare ricerche.
Aggiungi la capacità di taggare o categorizzare le note e un input per cercarle.

Livello 3

Che ce ne rendiamo conto o no, possiamo trovare connessioni tra i nostri pensieri e più importante le nostre note, dove possiamo sfruttare quella rete di pensieri per il nostro notebook.
Aggiungi Roam Research-inpsired linking of notes per creare una rete di pensieri.

Da fare

• Crea un modulo
• Memorizza nuove note
• Lista note
• Aggiungi tag o categorie
• Aggiungi ricerca note
• Aggiungi rete note

Toolbox

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

Tutorials

• Come aggiungere la ricerca a un’app React con Fuse.js (freecodecamp.org)

Ispirazione

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

Layout Idea

Space Invaders

Categoria: Puzzle & Giochi

Crea un gioco di sparatutto spaziale invaders per sparare a ondate multiple di navi nemiche.

Brief

Space Invaders è un classico arcade che ti mette in una nave spaziale contro un’invasione aliena. Mentre cerchi di abbatterli, loro rispondono al fuoco e tu hai solo una quantità limitata di protezione prima di essere colpito.

Livello 1

La parte centrale del gioco è che ti muovi su una navicella spaziale cercando di colpire un gruppo di alieni con le tue armi. Mentre c’è uno di voi, ce ne sono molti di loro.
Crea un’astronave che possa muoversi e sparare agli alieni che non si muovono.

Livello 2

Quello che rende il gioco difficile, è che gli alieni sono costantemente in movimento. Ogni volta che colpiscono il bordo dell’area di gioco, si abbassano e accelerano, avvicinandosi alla tua nave.
Aggiungi il movimento agli alieni che vanno da un lato all’altro dell’area di gioco. Ogni volta che gli alieni raggiungono un lato dovrebbero scendere di un livello. Dovrebbero anche accelerare a certi intervalli.

Livello 3

Sei da solo, ma fortunatamente puoi ottenere una certa protezione. Hai degli scudi dietro i quali puoi nasconderti che ti proteggono finché durano.
Crea diversi scudi davanti alla navicella del giocatore che possono sopportare una quantità limitata di danni.

Da fare

• Crea un nuovo gioco
• Crea alieni statici
• Crea un’astronave giocatore
• Aggiungi controlli astronave
• Aggiungi arma astronave
• Configura alieno danno
• Fai sparare gli alieni
• Fai muovere gli alieni
• Aggiungi intervalli alieni
• Aggiungi scudi

Tutorials

• Impara JavaScript costruendo 7 giochi (freecodecamp.org)

Ispirazione

• Space Invaders (codepen.io)

Layout Idea

Framework Theme

Categoria: Strumenti & Librerie

Crea un tema Gatsby che imposta un progetto con il framework CSS Tailwind.

Brief

Come sviluppatori, dobbiamo comunemente fare un mucchio di passi simili ogni volta che creiamo un nuovo progetto. Ma strumenti come i temi ci permettono di astrarre questi passi e impacchettarli in un modo facile da usare che può funzionare per qualsiasi nuovo progetto.

Livello 1

I temi Gatsby sono un sistema simile ad un plugin in cui possiamo sfruttare la pipeline di Gatsby per condividere funzionalità come pacchetto su npm.

Questo apre la porta a fare davvero tutto ciò che faremmo in un sito Gatsby, ma rendendolo riutilizzabile in qualsiasi sito Gatsby.
Crea un nuovo tema Gatsby che, quando usato, crea una nuova pagina di guida di stile su qualsiasi progetto a cui viene aggiunto.

Livello 2

L’obiettivo dei temi non è solo creare pagine, ma aggiungere funzionalità che ci rendono produttivi. Questo include cose come framework e configurazioni di progetto.
Aggiungi un framework CSS al tema Gatsby che permetta al progetto a cui viene aggiunto di usare quel framework.

Livello 3

A volte i temi sono meglio solo come strumenti, a volte è utile avere delle opinioni. Un modo per aggiungere funzionalità utili a un framework CSS è quello di creare componenti stock.
Creare componenti React riutilizzabili utilizzando il framework CSS che possono essere utilizzati nel progetto a cui il tema viene aggiunto.

Da fare

• Crea un nuovo tema
• Aggiungi al progetto di esempio
• Crea una nuova pagina di stile
• Aggiungi framework CSS
• Usa CSS nell’esempio
• Crea componenti
• Usa componenti

Toolbox

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

Tutorials

• Building a Theme (gatsbyjs.org)
• What is Tailwind CSS and How Can I Add to my Website or React App? (freecodecamp.org)

Ispirazione

• Gatsby Tailwind Theme (github.com)

Idea di layout

Webmentions

Categoria: Project Add-Ons

Aggiungi integrazione webmentions a un sito web che mostra le interazioni di Twitter con il sito web.

Brief

L’interazione sociale è un modo efficace per portare più pubblico e conversazione agli argomenti di cui scriviamo.

Avere qualcosa su un sito web mostra che l’interazione può essere utile sia per ispirare le persone a voler essere coinvolte sia per far sentire alle persone che possono farne parte.

Livello 1

Per fare uso di Webmentions, un sito web deve essere configurato con meta tag per fornire informazioni.
Aggiungi i meta tag appropriati a un sito web e convalida il suo utilizzo con webmention.io.

Livello 2

L’API Webmentions è un modo per vedere programmaticamente le connessioni nelle interazioni sociali da un URL del tuo sito web. Ti permette di ottenere il tipo di interazione e persino l’avatar del profilo della persona.
Connetti un sito web a Webmentions e aggiungi un elenco di interazioni sociali alle pagine dei post del blog.

Livello 3

Ora che il sito web sta mostrando tutte le interazioni, ci dovrebbe essere un modo semplice per unirsi alla conversazione.
Aggiungi un link sociale che, quando cliccato, crea un tweet con un link alla pagina.

Da fare

• Aggiungi meta tag al sito web
• Valida meta tag
• Connetti a Webmention
• Connetti il social a Bridgy
• Elenco interazioni
• Aggiungi pulsante tweet

Toolbox

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

Tutorials

• Indieweb pt2: Usare le webmentions in Eleventy (mxb.dev)
• Webmentions lato client (swyx.io)
• Iniziare con le webmentions in Gatsby (knutmelvaer.no)
• Costruire le webmentions del plugin Gatsby (christopherbiscardi.com)

Ispirazione

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

Layout Idea

Caccia al prodotto

Categoria: Cloni

Crea un clone di Product Hunt che permette alle persone di pubblicare un nuovo prodotto con valutazioni.

Brief

Tutti noi viviamo per i prodotti, che siano i nostri telefoni cellulari o le applicazioni che usiamo sui nostri computer portatili.

Mentre ci sono tonnellate di prodotti nel mondo, può essere difficile navigare tra i buoni e i cattivi. Strumenti come Product Hunt forniscono una piattaforma per conoscere nuovi strumenti e ottenere reazioni e recensioni dagli altri.

Livello 1

La parte più importante per conoscere nuovi prodotti è il prodotto stesso. Vogliamo sapere cos’è il prodotto, com’è fatto e come funziona.
Crea una pagina che ti permetta di aggiungere un nuovo prodotto a un sito web con un titolo, un’immagine e una descrizione.

Livello 2

Quando si imparano i prodotti, le recensioni sono un modo per fidarsi di un prodotto prima di acquistarlo. Ci aiuta ad acquisire fiducia in ciò per cui stiamo per spendere i nostri soldi o il nostro tempo.
Aggiungi la possibilità per le persone di aggiungere recensioni su ogni prodotto.

Livello 3

La gente ama i prodotti, quindi ce ne sono tonnellate nel mondo. Ce ne sono troppi per cercare di ordinarli manualmente, quindi abbiamo bisogno di un meccanismo per cercare e sfogliare con.
Aggiungi la possibilità di cercare prodotti e sfogliare per categoria.

Da fare

• Crea sito web del prodotto
• Crea database
• Aggiungi modulo prodotto
• Aggiungi prodotto al database
• Richiedi prodotto per pagina
• Aggiungi modulo recensione
• Aggiungi recensioni al database
• Aggiungi recensioni al prodotto
• Aggiungi ricerca prodotti
• Aggiungi categorie di prodotti

Toolbox

• Hasura (hasura.io)

Tutorials

• Costruire un’app clone di Product Hunt usando Hasura e Next.js (logrocket.com)
• Come costruire una versione base di Product Hunt usando React (freecodecamp.org)

Layout Idea

Altri progetti

Se vuoi altre idee di progetto, guarda 50 progetti per React & il web statico!

Scarica gratis su 50reactprojects.com