Articolo originale: 7 React Projects You Should Build in 2021

React è una libreria JavaScript ideale per sviluppare applicazioni impressionanti. Ci sono infiniti progetti che puoi sviluppare con React, mentre qui ne ho riportati sette dalla mia lista dei progetti da sviluppare nel 2021.

Perché ho selezionato questi sette progetti in particolare? Li ho scelti perché si sviluppano l'uno dall'altro. Richiedono che tu conosca concetti essenziali analoghi come l'autenticazione, il modo di lavorare con una API e con i database, usare un router React per aggiungere pagine alla tua app e riprodurre media come audio o video.

Inoltre, molte applicazioni possono essere (e spesso lo sono) integrate l'una nell'altra. I social media possono includere app per chattare, le app di musica e video possono includere app di e-commerce, e così via.

In altre parole, sviluppare uno qualsiasi di questi progetti ti darà le abilità e le conoscenze richieste per costruire le restanti applicazioni della lista, inclusi i tuoi progetti personali.

Per ogni progetto, ho fornito vari esempi pratici che puoi usare per trovare ispirazione, più alcune idee riguardanti gli strumenti che proverò ad utilizzare per costruire ogni app.

1.  App per chattare in tempo reale

Esempi reali: Slack, Messenger, Discord, Crisp Chat

In pratica, tutti noi usiamo un tipo di app per chattare in tempo reale, che sia una app per il telefono come Whatsapp o Viber oppure strumenti per la produttività come Slack o Discord. Potrebbe anche far parte di un widget di chat all'interno di un sito web in cui i clienti possono parlare direttamente con i proprietari del sito.

Tutte le applicazioni per chattare permettono agli utenti di inviare messaggi agli altri in tempo reale, di reagire ai messaggi e mostrano quando gli utenti sono online oppure offline.

Come sviluppare una app per chattare in tempo reale:

  • Costruisci il tuo progetto con create-react-app oppure Next.js
  • Usa un servizio come Firebase oppure le iscrizioni GraphQL per mandare e ricevere messaggi agli utenti
  • Aggiungi reazioni ai messaggi con le emoji usando il pacchetto npm emoji-mart
  • Esegui il deployment sul web usando strumenti di Firebase

2. App per un social media

Esempi reali: Facebook, Twitter, Instagram

Le app con le quali hai più familiarità sono i social media. In parte, sono simili alle app per chattare, ma sono estese a una comunità di utenti più grande.

Gli utenti possono interagire l'uno con l'altro in diversi modi: possono seguirsi a vicenda per vedere i post, aggiungere media come immagini e video da condividere con gli altri e interagire con i post mettendo like o commentandoli.

Come sviluppare una app per un social media

  • Sviluppa il tuo front end con create-react-app, e il back end usando una API Node
  • Usa un database come Postgres o MongoDB, con un ORM come Prisma (Postgres) o Mongoose (MongoDB)
  • Usa l'autenticazione social con Google, Facebook o Twitter, usando Passport oppure un servizio più semplice come Auth0
  • Esegui il deployment del back end su Heroku e del front end su Netlify

3. App di e-commerce

Esempi reali: Shopify, Etsy, Dev.to Storefront

Le vetrine online dove possiamo comprare prodotti digitali o fisici sono ovunque. Le app di e-commerce permettono agli utenti di aggiungere o rimuovere oggetti da un carrello, di visualizzare il proprio carrello e pagare utilizzando una carta di credito, così come con altre opzioni di pagamento come Google Pay o Apple Pay.

Se stai cercando ispirazione, dai un'occhiata ad alcune vetrine più semplici come Shopify invece di un grande rivenditore come Amazon o Walmart.

Come sviluppare un app di e-commerce :

  • Crea l'app con create-react-app o Next.js
  • Aggiungi il pacchetto NPM stripe  e use-shopping-cart per gestire facilmente i pagamenti direttamente con Stripe Checkout
  • Sviluppa una API Node per gestire la creazione di sessioni con Stripe
  • Esegui il deployment del back end su Heroku, del front end su Netlify (oppure entrambi su Heroku)

4. App per la condivisione di video

Esempi reali: YouTube, TikTok, Snapchat

Una app per la condivisione di video è probabilmente una delle categorie più varie, poiché i video sono utilizzati su diverse piattaforme e in modi diversi.

Esistono app per la condivisione di video come Youtube che ti permettono di cercare su qualsiasi browser e di guardare qualsiasi video che potresti immaginare che gli utenti abbiano creato. Inoltre, Tiktok e Snapchat ci permettono di guardare video di altri utenti registrati in un tempo ancora più breve, in un formato più accessibile e sono più orientati sulle interazioni come i like e le visualizzazioni.

Come costruire una app per condividere video

  • Crea l'app con create-react-app e sviluppa il back end con Node/Express
  • Usa Cloudinary per i caricamenti delle immagini e dei video sulla API di Cloudinary
  • Usa un database come Postgres o MongoDB, insieme a un ORM come Prisma (Postgres) o Mongoose (MongoDB)
  • Esegui il deployment del back end su Heroku, del front end su Netlify (oppure entrambi su Heroku)

5. App per un blog/portfolio

Esempi reali: Medium, Dev.to, HashNode

Questo esempio di app è il più pratico. Creare un blog o un portfolio è la scelta pratica più diretta per mettere in mostra le tue abilità. Ti consente di mostrare cosa puoi fare come sviluppatore, permettendoti anche di includere post e contenuti che riflettono ciò che sai.

Sviluppare queste app con strumenti come Gatsby o Nextjs (entrambi framework di React) ora è più facile che mai.

Come sviluppare una app per un blog/portfolio :

  • Sviluppa l'app con Gatsby o Next.js
  • Usa il markdown per i post del blog con un plugin particolare come remark che converte il markdown
  • Esegui il deployment del sito su Netlify o Vercel

6. App per forum

Esempi reali: Reddit, StackOverflow, freeCodeCamp Forum

Un forum è il posto in cui andiamo quando abbiamo bisogno di aiuto, ed essendo programmatori visitiamo forum come Reddit e Stack Overflow per ottenere risposte alle nostre domande di programmazione.

Inoltre, i forum combinano vari elementi delle app per chattare e social media attraverso post, commenti e reazioni. Un forum è come una versione più organizzata di una app di social media, in cui gli utenti possono trovare più facilmente le risposte alle domande che stanno cercando.

Come sviluppare una app per forum:

  • Sviluppa il front end con create-react-app e il back end usando una API Node
  • Usa un database come Postgres o MondoDB, insieme ad un ORM come Prisma (Postgres) o Mongoose (MongoDB)
  • Usa l'autenticazione social con Google, Facebook o Twitter, usando Passport oppure un servizio più semplice come Auth0
  • Esegui il deployment del back end su Heroku e del front end su Netlify

7. App di musica in streaming

Esempi reali: Spotify, Soundcloud, Pandora

Le app in React sono perfette per mostrare contenuti video così come sono ottime per i media in streaming come la musica.

Le app di musica hanno una struttura simile alle app di condivisione dei video e possono o non possono permettere agli utenti di caricare la propria musica. Queste app permettono agli utenti di ascoltare musica, mettere like alle canzoni, commentarle ed eventualmente anche di comprare musica.

In questo modo, una app di musica in streaming può unire elementi delle app di condivisione dei video a quelli delle app di e-commerce.

Come sviluppare una app di musica in streaming

  • Crea l'app con create-react-app, e sviluppa il  back end con Node/Express
  • Usa Cloudinary per i caricamenti delle immagini e dei video sull'API di Cloudinary
  • Usa un database come Postgres o MondoDB, insieme ad un ORM come Prisma (Postgres) o Mongoose (MongoDB)
  • Esegui il deployment del back end su Heroku, del front end su Netlify (oppure entrambi su  Heroku)

Buona programmazione!