Gepubliceerd op

Dashfolio Movies & Cineve AI bouwen - Een meertalig full-stack filmplatform met Next.js, NestJS en OpenAI

Auteurs

    Dashfolio Movies en Cineve AI bouwen: een full-stack ervaring om films te ontdekken

    Dashfolio Movies is een meertalig platform om films te ontdekken. Gebruikers kunnen trending films, best beoordeelde films en films die nu in de bioscoop draaien verkennen, op genre zoeken, inzichten over cast en crew bekijken en loopbaanstatistieken interactief onderzoeken in een volledig gelokaliseerde interface.

    Het project bevat ook Cineve AI, een intelligente filmassistent die films aanbeveelt op basis van zoekopdrachten in natuurlijke taal, toon, stemming en thema's, en geavanceerde filters zoals speelduur, verschijningsjaar, platform en uitsluitingen.

    Voor de backend gebruikt het platform Node.js (NestJS) met TypeScript, Prisma, PostgreSQL, Redis en AWS RDS, gecombineerd met Python-scripts voor gegevensverrijking en API-automatisering. Voor de frontend is Dashfolio Movies gebouwd met JavaScript/TypeScript, React.js en Next.js 15 App Router, vormgegeven met Tailwind CSS en uitgebreid met Radix UI, Framer Motion en Recharts voor een snelle, responsieve en geanimeerde ervaring. AI-functies worden aangedreven door de OpenAI API en bij het ontwerp van het hele systeem is rekening gehouden met naleving van de AVG.

    Projectdoelen

    • Een mooie, meertalige ervaring om films te ontdekken bieden
    • Gebruikers trending films, best beoordeelde films en films die nu in de bioscoop draaien laten verkennen
    • Diepgaand onderzoek naar genres, cast en crewstatistieken mogelijk maken
    • Een filmassistent op basis van AI met gepersonaliseerde aanbevelingen aanbieden
    • Gelokaliseerde content in het Engels en Frans weergeven
    • Interactieve grafieken en loopbaantijdlijnen voor cast en crew aanbieden
    • Zorgen dat de app modulair, schaalbaar en klaar voor productie is

    Cineve AI - De intelligente filmassistent

    Cineve AI brengt aanbevelingen op basis van AI rechtstreeks naar de ervaring om films te ontdekken:

    • Begrijpt de bedoeling van gebruikers met natuurlijke taal, context, filters en geschiedenis
    • Doorzoekt een zorgvuldig samengestelde, met AI verrijkte database van meer dan 10.000 films
    • Licht aanbevelingen toe met samenvattingen, redenen en links
    • Ondersteunt geavanceerde filters (speelduur, verschijningsjaar, streamingplatform, uitsluitingen)
    • Voert meertalige gesprekken (Engels/Frans)

    Frontendarchitectuur - React.js, Next.js, TypeScript & Tailwind

    1. Startpagina met tabbladen

    • Geïmplementeerd met Tabs (Radix UI) en useInfiniteQuery (React Query)
    • Toont geanimeerde filmkaarten (react-spring)
    • Oneindig scrollen met naadloos ophalen via de API

    2. Genrepagina's

    • Dynamische routes: /genres/:slug
    • Gepagineerde resultaten opgehaald op genre-ID
    • Consistent ontwerp met kaarten en rasters

    3. Filmdetailpagina's

    • Dynamische route: /movies/:slug
    • De details omvatten:
      • Poster, trailer, overzicht
      • Verschijningsdatum, beoordeling, aantal stemmen
      • Budget en opbrengst (AnimatedNumber)
      • Productiebedrijven en landen
      • Uitklapbare panelen voor cast en crew

    4. Persoonsdetailpagina's

    • Dynamische route: /persons/:slug
    • Functies:
      • Profielfoto, biografie, belangrijkste optredens
      • Uitklapbare filmografie met voorbeelden bij aanwijzen
      • Loopbaanstatistieken (films/jaar, films/genre met Recharts)
      • Tijdlijnweergave met filmminiaturen

    5. Internationalisering (i18n)

    • Aangedreven door next-intl
    • Dynamische routering met taalprefixen in URLs
    • Aangepaste useLocalizedPath()-hook

    6. Gebruikersaccounts & personalisatie

    • Gebruikers kunnen accounts maken om filters, filmlijsten en voorkeuren op te slaan
    • Profielen maken een gepersonaliseerde ervaring om films te ontdekken mogelijk
    • Opgeslagen instellingen worden tussen sessies gesynchroniseerd

    7. Aanbevelingen in realtime

    • Cineve AI levert bijgewerkte aanbevelingen terwijl gebruikers filters verfijnen of interacties uitvoeren
    • Resultaten worden direct gestreamd voor een vloeiende gesprekservaring
    • Ondersteunt meertalige zoekopdrachten en begrip van de context

    UI-stack

    • Tailwind CSS → Responsief ontwerp op basis van utilityklassen met donkere modus
    • Radix UI → Toegankelijke componenten (Tabs, Tooltip, Dialog, HoverCard)
    • Framer Motion → Vloeiende animaties en overgangen
    • Recharts → Loopbaanstatistieken en datavisualisaties
    • Lucide Icons → Lichtgewicht pictogrammen

    Backendarchitectuur - Node.js (NestJS), TypeScript & PostgreSQL

    • Node.js (NestJS) → Modulair, schaalbaar backendontwerp met TypeScript
    • Prisma ORM → Typeveilige databasetoegang met PostgreSQL
    • PostgreSQL (AWS RDS) → Betrouwbare beheerde database
    • Redis → Snelle cachelaag voor API-query's
    • Python-scripts → Gegevenspijplijnen, API-integraties, automatisering
    • OpenAI API → Semantische analyse, chat en filmaanbevelingen
    • Testen → Jest voor unit- en integratietests en Cypress voor end-to-end UI-trajecten
    • CI/CD → GitLab-pijplijnen met ESLint, Prettier, Jest en automatische implementaties
    • Naleving van de AVG → Gegevensopslag en -verwerking ontworpen om de privacyregelgeving te respecteren

    Functies in actie

    • 🌍 Meertalige ervaring: Films en UI in het Engels en Frans
    • 🤖 Cineve AI: Chat met een intelligente assistent voor aanbevelingen
    • 👤 Gebruikersaccounts: Maak een account om filters, filmlijsten en voorkeuren op te slaan
    • ⚡ Aanbevelingen in realtime: Ontvang directe updates van Cineve AI tijdens je interacties
    • 🎥 Dynamische filmkaarten: Animaties bij aanwijzen, beoordelingen, links
    • 📊 Inzichten over cast en crew: Uitklapbare secties en filmografieën
    • 📈 Loopbaanstatistieken: Gevisualiseerde trends door de tijd en per genre
    • 📅 Tijdlijnweergave: Loopbanen van acteurs per jaar weergegeven
    • 🧪 Geoptimaliseerde ontwikkelworkflow: TurboPack, direct vernieuwen, schaalbare componenten

    Lessen en inzichten

    • Tailwind + Radix UI maakten toegankelijke, herbruikbare en snelle UI-ontwikkeling mogelijk
    • Recharts bleek krachtig voor visualisaties van loopbanen en filmgegevens
    • next-intl integreerde soepel voor meertalige routering en vertalingen
    • OpenAI API maakte krachtige aanbevelingen in gespreksvorm mogelijk
    • Een gedeelde backend met Node.js (NestJS) + TypeScript + Prisma + Redis ondersteunde zowel Dashfolio Core als Movies zonder grote aanpassingen, terwijl de gegevensverwerking conform de AVG bleef

    Wat volgt er?

    Toekomstige verbeteringen richten zich op:

    • Uitbreiding van het semantische begrip en de personalisatie van Cineve AI
    • Verrijking van gebruikersprofielen met uitgebreidere personalisatiefuncties
    • Toevoeging van samenwerkingsfuncties zoals gedeelde kijklijsten
    • Introductie van meldingsopties voor nieuwe releases en AI-suggesties

    🚀 Probeer het live. Beschikbaar in het Engels en Frans, met ingebouwde Cineve AI!

    Als je een meertalige applicatie, een applicatie met AI of een applicatie met grafieken bouwt en ideeën wilt uitwisselen, kom ik graag met je in contact.

    🔗 LinkedIn - Steward OUADI