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 e subscribe 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 useRef
• React 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