Skip to main content

React 2 (React Movie Explorer - concept 13/1)

ChatGPT: Hier is een leuk projectidee dat studenten zowel enthousiast maakt als hen helpt om Vite + React te leren:

Projectnaam: "React Movie Explorer"

Beschrijving: Studenten bouwen een interactieve webapplicatie waarmee gebruikers informatie over films kunnen opzoeken. De applicatie gebruikt een externe API, zoals de OMDb API of een andere gratis films-API. Gebruikers kunnen zoeken naar films, details bekijken (zoals titel, genre, plot, en poster), en een lijst van favoriete films bijhouden.

Functionaliteiten:

  1. Zoekfunctionaliteit:

    • Gebruiker kan een film zoeken op naam.
    • Zoekresultaten worden dynamisch weergegeven.

  2. Film Details:

    • Klik op een film in de lijst om meer details te bekijken (bijvoorbeeld een aparte pagina of een popup).

  3. Favorieten:

    • Gebruikers kunnen films toevoegen aan een lijst met favorieten.
    • Favorieten worden opgeslagen in de localStorage, zodat ze blijven bestaan na het herladen van de pagina.

  4. Responsief Design:

    • De app werkt goed op zowel desktop als mobiel.

  5. Vite + React:

    • Vite zorgt voor een snelle ontwikkelomgeving.
    • Studenten leren component-gebaseerde ontwikkeling met React, inclusief statebeheer met useState en useEffect.

Extra Opties voor Gevorderde Studenten:

  • Filteren op genre of jaar: Voeg extra filters toe.
  • Paginering: Zorg dat zoekresultaten verdeeld worden over meerdere pagina's.
  • Themawisselaar: Laat gebruikers wisselen tussen een licht en donker thema.

Benodigde tools en kennis:

  1. Tools:

    • Vite: Voor snelle projectopzet.
    • React: Voor het bouwen van componenten.
    • API zoals OMDb API (registreer voor een gratis API-sleutel).
    • CSS-framework (optioneel): Tailwind, Bootstrap, of handgemaakte CSS.

  2. Kennis:

    • Basis JavaScript en ES6+ (bijv. fetch API).
    • React-beginselen (useState, useEffect, props, componenten).
    • Basis HTML/CSS.

Projectopbouw:

  1. Les 1: Introductie en opzet

    • Installeer Node.js, Vite, en maak een nieuw project.
    • Begrijp de folderstructuur van Vite + React.
    • Bouw een eenvoudige React-component die een "Hello World" bericht toont.

  2. Les 2: API-integratie

    • Leer hoe je de OMDb API gebruikt met fetch.
    • Bouw een zoekbalk en toon resultaten.

  3. Les 3: Statebeheer en favorieten

    • Gebruik useState voor statebeheer.
    • Voeg een favorietenfunctie toe en sla favorieten op in localStorage.

  4. Les 4: Styling en afronding

    • Voeg styling toe met CSS of een framework.
    • Maak de app responsive.
    • Voeg een themawisselaar toe als bonus.

Waarom dit project?

  • Het is interactief en visueel aantrekkelijk.
  • Studenten leren werken met externe APIs, een essentiële vaardigheid.
  • Vite + React wordt op een praktische manier geïntroduceerd.
  • Het project kan worden uitgebreid op basis van de vaardigheden van de studenten.

Laat weten of je meer details nodig hebt over dit project of een andere invalshoek wilt! 😊

Back to top