Il progetto prevede di realizzare un'applicazione clone del sito del New York Times utilizzando l'API gratuita fornita per gli sviluppatpri. É un progetto per il corso di React del master in Front-End Development di Start2Impact.
Lo scopo principale del progetto è di poter accedere alle notizie e alle informazioni attraverso la costruzione di un sito web clone del NYT. Non ho fatto una replica totale, ma ho cambiato qualche parte per renderlo più personale.
Cosa deve includere il sito:
- Replica della home di NYT
- Prendere i dati dall’API e visualizzarli
- UI e UX semplice e facile da usare
- Struttura dell’app organizzata e comprensibile
- Design responsive
Ho cercato di mantenere il layout e l’accessibilità più puliti e minimal possibile, senza troppi effetti di animazione. Ho ricreato la struttura generale del sito del NYT, composta da 3 macro aree:
- HEADER
- NAVBAR
- CORPO
Prevede il titolo che rimanda alla homepage, la data dinamica e i due bottoni per il login e la sottoscrizione alla newsletter.
È composta dalla barra di ricerca e dal menu responsive con le categorie.
Tutta la parte in cui vengono visualizzati gli articoli e le varie sezioni.
- Tag
select
per filtrare gli articoli per periodo e sezione - Il bottone
BUY
con il link per l’acquisto dei libri nella sezione Best Sellers. - Searchbar: per cercare articoli specifici attraverso parole chiave e per cercare recensioni attraverso titoli dei libri.
- Bottoni
login
esubscribe
con i rispettivi form per accedere all’area personale e per abbonarsi alla newsletter. - Ogni articolo, opinione, recensione o contenuto, inoltre prevede un
Link
che rimanda all'articolo completo sul sito del New York Times. - Il sitoweb è responsive: il menu con le categorie diventa ad hamburger per schermi medio-piccoli (tablet e smartphone) e anche il display e le dimensioni degli articoli si adattano.
Tra le funzionalità di React utilizzate vi sono:
React Hooks
: useState, useEffect e useRefReact Router
: Link, useLocation, useNavigate, useParams, Route, Routes e BrowserRouter.- La libreria
Axios
per gestire la richiesta API Vite
come framework di sviluppo
Altre funzionalità e librerie utilizzate:
Alice Carousel
: un componente React che fornisce gallerie e caroselli.Framer Motion
: una libreria per animazioni e transizioni.Vercel
: piattaforma per l'hosting dell'app
Powered by Vercel ⇾ QUI