Mosaic

Group watch nights should be fun – not an hour-long debate about what to watch.

Mosaic is a mobile app that takes the guesswork out of group entertainment. Instead of endlessly scrolling or settling for whatever’s “okay,” Mosaic uses AI-driven mood inputs, collaborative filtering, and short, curated video clips to help groups find the perfect thing to watch fast! Each person bookmarks what catches their eye, and over time, Mosaic uses advanced machine learning to understand your group’s evolving tastes, preferences, and viewing dynamics. It suggests titles that match the mood, not just the genre. Whether you're in the mood for something light and funny or emotionally intense, Mosaic will make deciding what to watch as enjoyable as watching itself.

MVP 🏆

• User account with secure authentication

• Mood-Based Input

  • Users describe or take a quick quiz about the kind of vibe they’re in the mood for.

• Taste Refinement

  • Mosaic learns user and group preferences over time through mood inputs, clip bookmarks, and feedback.

• Clip Browsing

  • Watch short, curated, spoiler-free clips and bookmark anything interesting to refine suggestions.

• Personal/Group Recommendation Engine

  • Based on combined preferences, Mosaic suggests a small set of titles tailored to the group’s current mood.

• Shared Watchlist

  • Groups can bookmark movies/shows to watch later and track what they’ve already seen or skipped.

• Movie Import from other apps (e.g., Letterboxd)

• Basic Filters

  • Filter content by genre, runtime, and available streaming platforms.

  
  
  

Stretch Goals ⏳

• Spoiler Free Clips
  • Automatically identify and extract compelling, spoiler-free scenes from full content.
• Group Analytics Dashboard
  • Visualize patterns like genre leanings, shared mood trends, and content overlap.
• Taste-Stretching Wildcards
  • Suggest high-quality picks that fall slightly outside the group's usual preferences for new discovery.
• Contextual Info Cards
  • View trailers, cast details, ratings, trivia, and related titles from within the app.
• Browser Extension
  • Save scenes, trailers, or YouTube videos to your Mosaic profile from external sites.

Milestones 📆

Week 1: Set Up 🚀

General:

• Discuss with the team who’s frontend/backend and the overall project/tech stack
• Set up communication, environments, and WhenToMeet(Link available in doc) 📆
• Go over GitHub basics
• Create a Figma account and start working on UI designs (For Everyone) 🎨
  • Start with Low Fidelity and then build up to High Fidelity
  • Create User Flowchart

Backend:

• Start looking into Firebase and frameworks
• Look into API’s and playing around with Postman
  • Identify accessible data for our use and strategize on leveraging this data to our advantage.
• Look into AI/ML

Week 2: Further Preparations 🔍

Frontend:

• Go over some UI design basics and do’s/don’ts
• Try to finish up the Figma Design by the end of this week
• Start planning UI components, including:
  • Mood quiz screen
  • Clip browsing page
  • Group/Personal suggestion view
  • Shared watchlist
  • Settings Page
• If not done already, create app logo!!

Backend:

• Start setting up the User Authentication and the Database. Have a working prototype by the end of the 2nd week
  • Database:
    • User preferences (e.g., preferred coding platform, hint frequency).
    • Saved challenges, solutions, and user code drafts for future reference.
• Keep doing research with the Friebase Tech Stack
• Start looking into APIs for Movies and AI/ML options for the recommendation engine

Weeks 3/4: Coding 🧑‍💻

Frontend:

• Start working on the frontend components. Make sure to evenly split the workload
  • Login/Sign Up Page
    • Have this done by the end of the 3rd or 4th week
  • Mood quiz screen
  • Clip browsing view screen
  • Clip interaction components
  • Settings Page (optional)

Backend:

• Start working on these features. Have a plan created for these features by the end of the 3rd week, and start working on them starting on the 4th week.
• Develop Firestore write/read logic for:
  • Storing mood input under each user session
  • Bookmarking clips and syncing state
  • Group creation (add user ID to group document)
  • Watchlist updates (add/remove functionality)
  • Recommendation Engine
    • Do collaborative research and later have 1 person who is more confident in this area be in charge
• Set up Cloud Function (Node.js) for:
  • Basic suggestion algorithm using bookmarks + moods + previous watchlist
  • Fetching top TMDB titles by group tastes

Weeks 5/6: Middle Ground 🚧

General:

• Start looking into prepping for the Presentation.
• Work on the Presentation Script over the weeks.
• Each person will be assigned a section of the script that they need to - - complete by the end of Week 7.
• Start of Week 6, begin integrating backend with frontend components.

Frontend:

• Continue working on any remaining pages
• Complete group recommendation screen by the end of week 5:
  • Show top suggested movies/shows
  • Have filter buttons for more advanced filtering
  • Indicate which user bookmarked/interacted with which clip
• Complete shared/personal watchlist screen by week 5:
  • Allow adding suggestions to the shared watchlist
  • Be able to remove, mark as watched, or save
• Improve clip experience:
  • Dynamic loading of new clips
  • Improved transitions between clips

Backend:

• Finish working on the remaining backend features. Once completed, start working on these new features:
  • Expand recommendation logic:
  • Factor in genres from bookmarks and watchlist
  • Incorporate group/personal mood
  • Start tagging clips by genre/mood in the database for quicker filtering
  • Track skipped clips to avoid repeats
• Have all data either be stored in a database or have an API connection all set up
• Keep looking into AI/ML be ready to pivot to gpt wrapper if need be.
• Curate a plan and start working on these features. Have these done by end of week 6 or week 7.

Weeks 7/8: Finishing Touches 🏁

General:

• Finish any remaining pages and implementations by the end of week 7
• Finish connecting Frontend with Backend by the 8th week
• If possible work on stretch goals
• Start looking into the Presentation material and creating a script

Weeks 9/10: Preparations ✨

General:

• Prep for Presentation Night! 🥳
• Make sure the Slides and Demo are ready and good to go

Tech Stack & Resources 💻

FrontEnd

• React Native

  • Learn the Basics
  • Setting up the Environment
  • React Native #1: Setup Visual Studio Code
  • React Native Tutorial for Beginners - Getting Started

• Expo

  • Integration with Firebase

• Tailwind CSS

  • Setup
  • Learn Tailwind CSS - Course for Beginners

Backend

• Firebase

  • Integration
  • Firebase Authentication
    • Super EAsy React Native Authentication with Firebase
    • Google Auth
      • Step-by-Step Guide: Implementing Google Sign-In Using React Native with Firebase (Android)
  • Firebase Firestore
    • React Native Firebase Firestore | Cloud Firestore Database
  • Cloud Functions
    • Admin SDK
  • AI/ML
    • Adding on-device recommendations to your app using TensorFlow and Firebase
    • Collaborative Filtering
    • Movie Recommendation System | Python Machine Learning Project Tutorial for Beginners
  • Firebase Cloud Messaging (Stretch Goal)
  • Cloud Messaging

• APIs

• TMDB

  • Industry-standard API for retrieving detailed metadata on movies, shows, actors, trailers, genres, ratings, posters, and more.

• OMDb API

  • Lightweight API offering basic movie/show information, including IMDb ratings, plot summaries, and release data.

• Rapid API

  • A centralized marketplace for APIs across many domains, including entertainment, sentiment analysis, recommendation engines, subtitle generation, and more. You can find specific APIs that fill data gaps in TMDB/OMDb or add unique features.

• Kaggle

  • Offers a lot of datasets, including movies which could cover watch history, genre preferences, mood annotations, and collaborative filtering data. Ideal for training/testing early-stage ML models or prototyping recommendation logic offline.

Alternatives 🔄

• AWS Tech Stack

  • User Auth:

    • Cognito
      • Amazon Cognito Beginner Guide

  • Database/Storage:

    • AWS DynamoDB over AWS S3?
    • DynamoDB
      • AWS DynamoDB Tutorial For Beginners
    • S3
      • Amazon/AWS S3 (Simple Storage Service) Basics | S3 Tutorial, Creating a Bucket | AWS for Beginners
      • Next.js To AWS S3 File Uploads

  • API:

    • Amplify
      • AWS Amplify (Gen 1) in Plain English | Getting Started Tutorial for Beginners
    • OpenAI:
      • Documentation

  • Servers: (Optional)

    • EC2

• React Website (Optional)

  • Setup
  • Setting up the Environment
  • React Tutorial for Beginners
  • Do’s and Don'ts -
    • 10 React Antipatterns to Avoid - Code This, Not That!

• Node (Optional)

  • Use this in conjunction with React
  • Node Download
  • What is Node?
    • This is optional but I recommend taking a look at this.

• HTML/CSS:

  • HTML Full Course - Build a Website Tutorial
  • HTML Documentation
  • CSS Documentation

Roadblocks and Possible Solutions 🚧 💡

• Either the Frontend or Backend team falling behind.
  • If this happens the best course would be to get some assistance from the other side until caught up
  • Worst case scenario we move on and focus on implementing the important features
• Running into Firebase Tech Stack Issues.
  • If for any reason we are having a hard time with utilizing Firebase in the early stages of development then we immediately switch over to another like MERN, AWS, ….
• Clip acquisition and processing limitations
  • Begin with licensed trailer content or API-based previews before exploring Spoiler free clip generation

Competition 🆚

• TikTok/YouTube Shorts
  • Great for entertainment discovery, but lack group decision-making tools and personalization.
• Netflix
  • Offers trailers and some suggestions, but no collaborative or mood-based recommendation systems.
• JustWatch
  • Focuses on availability across streaming platforms, not preference learning or group interaction.
• Letterboxd
  • Strong in reviews and logging, but lacks real-time, group-based suggestion features.

Other Resources ➕

• GitHub - Docs - Tutorial
• • Visual Studio Code
• Postman

Git Commands 📓

Command	What it does
git branch	lists all the branches
git branch "branch name"	makes a new branch
git checkout "branch name"	switches to speicified branch
git checkout -b "branch name"	combines the previous 2 commands
git add .	finds all changed files
git commit -m "Testing123"	commit with a message
git push origin "branch"	push to branch
git pull origin "branch"	pull updates from a specific branch

Mosaic TEAM!! 🥳 🎆

• Tanaz Lodi
• Atharva Mishra
• Zahraa Al-Naami
• Sagar Lamichhane