Skip to main content

DAGGH Frontend Application

DAGGH is a modern, collaborative movie recommendation frontend built with Next.js 15 and React 19. It provides an intuitive swipe-based interface for movie discovery and group consensus features.

🎯 Core Features​

Swipe-Based Movie Discovery​

  • Tinder-like Interface: Intuitive swipe gestures for rating movies
  • Smooth Animations: Framer Motion-powered interactions
  • Responsive Design: Works seamlessly across devices
  • Real-time Feedback: Instant visual feedback for user actions

Collaborative Features​

  • Group Sessions: Multiple users can rate movies together
  • Real-time Sync: Live updates using Supabase Realtime
  • Consensus Building: Algorithm finds movies that work for groups
  • Session Management: Create, join, and manage group rating sessions

Personalized Experience​

  • User Profiles: Track individual preferences and history
  • Smart Recommendations: AI-powered suggestions from ML service
  • Preference Learning: System improves recommendations over time
  • Watchlist Management: Save movies for later viewing

🛠️ Technology Stack​

Core Framework​

  • Next.js 15: Latest features with App Router
  • React 19: Modern React with concurrent features
  • TypeScript: Full type safety across the application
  • ESLint: Code quality and consistency

Styling & UI​

  • Tailwind CSS 4: Utility-first CSS framework
  • Framer Motion: Smooth animations and transitions
  • Radix UI: Accessible, unstyled UI primitives
  • Custom Components: Reusable component library

Backend Integration​

  • Supabase: Database, authentication, and real-time features
  • TMDB API: Movie metadata and images
  • ML Service API: Custom recommendation engine
  • Type-safe APIs: Full TypeScript integration

🏗️ Architecture​

Project Structure​

src/
├── app/              # Next.js App Router pages
├── components/       # Reusable UI components
├── contexts/         # React Context providers
├── hooks/           # Custom React hooks
├── lib/             # Utility functions and configurations
├── types/           # TypeScript type definitions
└── middleware.ts    # Next.js middleware

Key Components​

  • SwipeCard: Core movie rating interface
  • MovieGrid: Browse and search movies
  • GroupSession: Collaborative rating features
  • UserProfile: Personal preferences and history
  • Recommendations: AI-powered movie suggestions

🔄 Data Flow​

  1. User Authentication: Supabase Auth handles login/signup
  2. Movie Data: TMDB API provides movie metadata
  3. User Preferences: Stored in Supabase database
  4. Real-time Updates: Supabase Realtime for live collaboration
  5. Recommendations: ML Service API generates personalized suggestions
  6. State Management: React Context + custom hooks

🚀 Getting Started​

Prerequisites​

  • Node.js 18 or higher
  • pnpm package manager
  • Supabase account and project
  • TMDB API key

Quick Setup​

  1. Clone the repository
  2. Install dependencies: pnpm install
  3. Configure environment variables
  4. Start development server: pnpm dev

For detailed setup instructions, see the Quick Start Guide.

📱 User Experience​

Onboarding Flow​

  1. Welcome Screen: Introduction to the app
  2. Account Creation: Quick signup process
  3. Preference Setup: Initial movie preferences
  4. Tutorial: Interactive guide to core features

Main User Journey​

  1. Browse Movies: Discover new movies via swipe interface
  2. Rate Preferences: Build personal preference profile
  3. Get Recommendations: Receive AI-powered suggestions
  4. Join Groups: Participate in collaborative sessions
  5. Plan Viewing: Build watchlists and share with friends

🎯 Current Status​

✅ Completed Features​

  • Core swipe interface with smooth animations
  • User authentication and profile management
  • Supabase integration for data persistence
  • TMDB API integration for movie metadata
  • Basic recommendation display
  • Responsive design across devices

🔄 In Development​

  • Advanced group session features
  • Enhanced recommendation algorithms
  • Performance optimizations
  • Mobile app improvements

📋 Planned Features​

  • Social features and friend connections
  • Advanced filtering and search
  • Watchlist sharing and collaboration
  • Integration with streaming services

🔗 Related Documentation​

Ready to dive deeper? Check out our Quick Start Guide to begin development with DAGGH!