{"id":28497758,"url":"https://github.com/lorussogiacomoluca/webapp-react","last_synced_at":"2026-04-13T22:32:06.898Z","repository":{"id":296386295,"uuid":"993190346","full_name":"lorussogiacomoluca/webapp-react","owner":"lorussogiacomoluca","description":"Exercise #62- 30/05/2025","archived":false,"fork":false,"pushed_at":"2025-06-05T12:59:46.000Z","size":781,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-08T13:06:41.772Z","etag":null,"topics":["bootstrap","cors","react","react-router-dom","vite"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lorussogiacomoluca.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-30T11:17:49.000Z","updated_at":"2025-06-05T12:59:47.000Z","dependencies_parsed_at":"2025-05-30T15:23:29.325Z","dependency_job_id":"b7151e82-f19a-4340-b3c6-42afc81e8e02","html_url":"https://github.com/lorussogiacomoluca/webapp-react","commit_stats":null,"previous_names":["lorussogiacomoluca/webapp-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lorussogiacomoluca/webapp-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lorussogiacomoluca%2Fwebapp-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lorussogiacomoluca%2Fwebapp-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lorussogiacomoluca%2Fwebapp-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lorussogiacomoluca%2Fwebapp-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lorussogiacomoluca","download_url":"https://codeload.github.com/lorussogiacomoluca/webapp-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lorussogiacomoluca%2Fwebapp-react/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263335362,"owners_count":23450823,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","cors","react","react-router-dom","vite"],"created_at":"2025-06-08T13:06:42.155Z","updated_at":"2026-04-13T22:32:01.860Z","avatar_url":"https://github.com/lorussogiacomoluca.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎯 Esercizio 62\n\n📁 **Repo**: `webapp-react`\n\n---\n\n## 🧠 Esercizio\n\nOra è il momento di prepararci al frontend della nostra Web App!\n\n---\n\n## 🚩 MILESTONE 1\n\n✅ Mettiamo su un nuovo progetto **React** aiutandoci con **Vite**  \n🧹 Ripuliamo come sempre l’app da file e codice di esempio non necessari  \n📦 Installiamo il necessario:\n\n- React Router\n- Axios _(oggi non è obbligatorio installarlo, lo sarà martedì)_\n- Bootstrap _(se volete utilizzarlo)_\n\n---\n\n## 🚧 MILESTONE 2\n\n🎨 Creiamo un layout di base per la nostra applicazione ed impostiamo le rotte per le diverse pagine.\n\n📄 **Creiamo 2 pagine:**\n\n- 🏠 _La home_, in cui mostreremo la lista dei film\n- 🎬 _La pagina di dettaglio_ di un singolo film in cui mostrare sia le informazioni del film che le recensioni\n\n🧱 Fate tutto **statico**.\n\n---\n\n## 🎁 Bonus\n\n- 🎞️ Create un array finto di film da ciclare e mostrare nella homepage\n- 🧩 Creare la componente `MovieCard` in cui passare tramite **props** il singolo libro\n\n---\n\n## 🦸‍♂️ SUPER BONUS\n\n📌 Nella pagina di dettaglio del film:\n\n- Copiate l'array dei film aggiungendo a ciascun oggetto un'array di recensioni\n- Trovate l'elemento all'interno dell'array da mostrare nella pagina attraverso l'**id** che avete passato come parametro\n- Mostratelo in pagina assieme alle sue **recensioni**\n\n---\n\n# ⚙️ Integrazione SETUP Web App React\n\n📦 **Installate axios** nell'app **frontend** e provate quindi ad effettuare una **chiamata Ajax** dalla **home** del progetto React, per ottenere la **lista dei libri**.  \n📄 In utlimo effettuiamo una **chiamata AJAX** dalla **pagina di dettaglio** per ottenere il **dettaglio di un singolo film**, comprese le sue **recensioni**\n\n---\n\n## 🎁 BONUS\n\n- ✨ Realizzare una componente **StarsRating** in cui mostrare il voto delle recensioni (magari anche il voto medio, chissà....)\n- 🎨 Curare l’aspetto estetico della vostra ap\n\n---\n\n## 🚀 Aggiungere recensioni\n\nCreiamo un componente che contenga il form per le recensioni\nInseriamo questo componente nella pagina di dettaglio del film\nAll’invio del form, la nuova recensione viene salvata sul database e visualizzata nella pagina, in fondo alle altre\n\n---\n\n## 🚀 Concludiamo migliorando l’esperienza sulla nostra SPA, inserendo un loader.\n\n### 🧱 creiamo un componente loader\n\nQuesto componente deve poter apparire su qualunque pagina della nostra app.\n\n### 🌐 Creiamo e sfruttiamo un Context\n\nPer dare la possibilità ad ogni componente di attivare o disattivare il loader sulla propria pagina.\n\n---\n\n### 🎁 BONUS\n\n_(scegliete voi quale fare, non siete obbligati a farli tutti, potete farne solo alcuni)_:\n\n1. 🎨 Personalizziamo l’aspetto della nostra app col CSS\n2. 🔍 Aggiungere il filtraggio dei film nella homepage\n3. 🧾 Aggiungere la validazione della form delle recensioni mostrando un messaggio d'errore generico quando i dati inseriti non sono validi\n4. 🛑 Validazione dei campi della form singola: quando un utente sbaglia ad inserire un valore di un campo o non lo inserisce viene mostrato l'errore inerente quel campo\n\n---\n\n🎉 **Buon Lavoro e buon divertimento!**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Florussogiacomoluca%2Fwebapp-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Florussogiacomoluca%2Fwebapp-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Florussogiacomoluca%2Fwebapp-react/lists"}