Published on

Building Dashfolio Movies & Cineve AI - A Full-Stack Multilingual Movie Platform with Next.js, NestJS, and OpenAI

Authors

    Building Dashfolio Movies and Cineve AI: A Full-Stack Movie Discovery Experience

    Dashfolio Movies is a multilingual movie discovery platform that lets users explore trending, top rated, and now playing films, browse by genre, view cast and crew insights, and interact with career statistics in a fully localized interface.

    The project also includes Cineve AI, an intelligent movie assistant that recommends films using natural language queries, tone, mood, and themes, as well as advanced filters such as duration, release year, platform, and exclusions.

    On the backend, the platform leverages Node.js (NestJS) with TypeScript, Prisma, PostgreSQL, Redis, and AWS RDS, combined with Python scripting for data enrichment and API automation. On the frontend, Dashfolio Movies is built with JavaScript/TypeScript, React.js, and Next.js 15 App Router, styled with Tailwind CSS and enriched with Radix UI, Framer Motion, and Recharts for a fast, responsive, and animated experience. AI features are powered by the OpenAI API, and the entire system was designed with GDPR compliance in mind.

    Project Goals

    • Deliver a beautiful, multilingual movie discovery experience
    • Let users explore trending, top rated, and now playing films
    • Enable deep dives into genres, cast, and crew statistics
    • Provide an AI-powered movie assistant with personalized recommendations
    • Display localized content in English and French
    • Offer interactive charts and career timelines for contributors
    • Ensure the app is modular, scalable and production-ready

    Cineve AI - The Intelligent Movie Assistant

    Cineve AI brings AI-powered recommendations directly into the movie discovery experience:

    • Understands user intent using natural language, context, filters, and history
    • Searches a curated AI-enriched database of over 10,000 movies
    • Explains recommendations with summaries, reasons, and links
    • Supports advanced filtering (duration, release year, streaming platform, exclusions)
    • Engages in multilingual conversations (English/French)

    Frontend Architecture - React.js, Next.js, TypeScript & Tailwind

    1. Home Page with Tabs

    • Implemented with Tabs (Radix UI) and useInfiniteQuery (React Query)
    • Displays animated movie cards (react-spring)
    • Infinite scroll with seamless API fetches

    2. Genre Pages

    • Dynamic routes: /genres/:slug
    • Paginated results fetched by genre ID
    • Consistent card/grid design

    3. Movie Detail Pages

    • Dynamic route: /movies/:slug
    • Details include:
      • Poster, trailer, overview
      • Release date, rating, vote count
      • Budget and revenue (AnimatedNumber)
      • Production companies and countries
      • Expandable cast and crew panels

    4. Person Detail Pages

    • Dynamic route: /persons/:slug
    • Features:
      • Profile photo, bio, top appearances
      • Expandable filmography with hover previews
      • Career statistics (movies/year, movies/genre with Recharts)
      • Timeline view with movie thumbnails

    5. Internationalization (i18n)

    • Powered by next-intl
    • Dynamic routing with locale-prefixed URLs
    • Custom useLocalizedPath() hook

    6. User Accounts & Personalization

    • Users can create accounts to save filters, movie lists, and preferences
    • Profiles enable a personalized movie discovery experience
    • Saved configurations sync across sessions

    7. Real-Time Recommendations

    • Cineve AI delivers updated recommendations as users refine filters or interact
    • Results are streamed instantly for a smooth, conversational experience
    • Supports multilingual queries and contextual understanding

    UI Stack

    • Tailwind CSS → Utility-first, responsive design with dark mode
    • Radix UI → Accessible components (Tabs, Tooltip, Dialog, HoverCard)
    • Framer Motion → Smooth animations and transitions
    • Recharts → Career stats and data visualizations
    • Lucide Icons → Lightweight iconography

    Backend Architecture - Node.js (NestJS), TypeScript & PostgreSQL

    • Node.js (NestJS) → Modular, scalable backend design with TypeScript
    • Prisma ORM → Type-safe database access with PostgreSQL
    • PostgreSQL (AWS RDS) → Reliable managed database
    • Redis → Fast caching layer for API queries
    • Python scripting → Data pipelines, API integrations, automation
    • OpenAI API → Semantic analysis, chat, and movie recommendations
    • Testing → Jest for unit/integration tests and Cypress for end-to-end UI flows
    • CI/CD → GitLab pipelines with ESLint, Prettier, Jest, auto-deployments
    • GDPR Compliance → Data storage and processing designed to respect privacy regulations

    Features in Action

    • 🌍 Multilingual Experience: Movies and UI in English and French
    • 🤖 Cineve AI: Chat with an intelligent assistant for recommendations
    • 👤 User Accounts: Create an account to save filters, movie lists, and preferences
    • ⚡ Real-Time Recommendations: Receive instant updates from Cineve AI as you interact
    • 🎥 Dynamic Movie Cards: Hover animations, ratings, links
    • 📊 Cast and Crew Insights: Expandable sections and filmographies
    • 📈 Career Stats: Visualized trends over time and by genre
    • 📅 Timeline View: Actor careers shown year by year
    • 🧪 Optimized Developer Workflow: TurboPack, instant refresh, scalable components

    Learnings and Takeaways

    • Tailwind + Radix UI enabled accessible, reusable, and fast UI development
    • Recharts proved powerful for career and film data visualizations
    • next-intl integrated smoothly for multilingual routing and translations
    • OpenAI API unlocked powerful conversational recommendations
    • A shared Node.js (NestJS) + TypeScript + Prisma + Redis backend served both Dashfolio Core and Movies without major rework, while ensuring GDPR-compliant data handling

    What’s Next?

    Future improvements will focus on:

    • Expanding Cineve AI’s semantic understanding and personalization
    • Enhancing user profiles with richer personalization features
    • Adding collaborative features such as shared watchlists
    • Introducing notification options for new releases and AI suggestions

    🚀 Try it live – available in English and French, with Cineve AI built-in!

    If you’re building a multilingual, AI-powered, or chart-driven application and want to exchange ideas, I’d love to connect.

    🔗 LinkedIn - Steward OUADI