Published on

Building Dashfolio Movies - A Localized Movie Dashboard with Next.js, Tailwind, and Recharts

Authors

    Building Dashfolio Movies: A Fast, Localized, and Interactive Movie Explorer

    Dashfolio Movies is a modern movie dashboard that lets users explore trending, top rated, and now playing movies, browse and explore movies by genre, view detailed cast and crew info, and interact with visual statistics in a fully localized interface.

    On the backend, the project leverages NestJS, Prisma, PostgreSQL, Redis, and AWS RDS. On the frontend, Dashfolio Movies takes full advantage of Next.js 15 App Router, Tailwind CSS, Framer Motion, Recharts, and next-intl to create a responsive, animated, and internationalized experience.

    Project Goals

    • Deliver a beautiful, responsive movie discovery experience
    • Let users explore trending, top rated, and now playing movies
    • Enable deep dives into genres, cast, and crew stats
    • Display localized content with full support for multiple languages
    • Provide interactive charts and insights for each person’s film career
    • Ensure the app is modular, scalable, and built with modern dev practices

    Frontend Architecture - Next.js + Tailwind + Recharts

    1. Home Page with Trending, Top Rated & New Tabs

    • Implemented using Tabs (Radix UI) and useInfiniteQuery (React Query)
    • Displays movie cards with hover animations (react-spring)
    • Infinite scroll triggers additional data fetch when in view

    2. Genre Pages

    • Accessible via dynamic routes: /genres/:slug
    • Uses genre ID from the slug to fetch and display paginated results
    • Reusable layout and card design for visual consistency

    3. Movie Detail Pages

    • Accessible via /movies/:slug
    • Detail includes:
      • Poster, trailer, overview
      • Release date, rating, vote count
      • Budget & revenue (with AnimatedNumber)
      • Production companies & countries
      • Cast and crew displayed using expandable panels

    4. Person Detail Pages

    • Accessible via /persons/:slug
    • Highlights:
      • Profile photo, bio, top 10 movie appearances
      • Expandable full movie list with tooltips and hover previews
      • Visual stats: movies per year, movies by genre (Recharts)
      • Career timeline with movie thumbnails

    5. Internationalization (i18n)

    • Powered by next-intl
    • Fully translated UI with dynamic routing per locale
    • Custom useLocalizedPath() hook to generate locale-prefixed URLs

    UI Stack

    • Tailwind CSS: Utility-first styling with responsive and dark mode support
    • Radix UI: Accessible UI primitives like Tabs, Tooltip, HoverCard, Dialog
    • Framer Motion: Smooth animations and transitions
    • Recharts: Powerful charting for statistics and career visualizations
    • Lucide React Icons: Lightweight and elegant iconography

    Backend Architecture (Same as Dashfolio Core)

    • NestJS: Modular and scalable architecture
    • Prisma ORM: Schema-managed PostgreSQL access with type safety
    • Redis: Caching for fast API responses
    • PostgreSQL: Hosted via AWS RDS for reliability
    • CI/CD: GitLab Pipelines with Prettier, ESLint, Jest, and automatic deployments

    Features in Action

    • 🌍 Localized Movie Exploration: Users can explore movies and genres in English and French
    • 🎥 Dynamic Movie Cards: Reusable component with animations, ratings, and links
    • 📊 Cast & Crew Insights: Expandable sections for each contributor
    • 📈 Career Stats with Charts: Recharts visualize trends over time and by genre
    • 📅 Timeline View: View the evolution of an actor's career year by year
    • 🧪 Smooth Developer Experience: TurboPack for blazing fast build times and instant refresh

    Learnings & Takeaways

    • Tailwind + Radix UI offers great flexibility and accessibility with minimal CSS overhead
    • Recharts can be customized deeply to suit dashboard-like visualizations
    • next-intl integrates smoothly with App Router for multilingual apps
    • Keeping a reusable component system (e.g., cards, buttons, tooltips) pays off fast
    • The same NestJS + Prisma + Redis backend served both Dashfolio Data and Dashfolio Movies with no major changes

    What’s Next?

    While chatbot and AI search features are under construction, the core experience of exploring movies, genres, and contributors is complete and blazing fast.

    🚀 Try it live – available in English and French!

    Feel free to connect if you’re building a multilingual, chart-driven, or performance-focused web application and want to exchange ideas or collaborate.

    🔗 LinkedIn - Steward OUADI