/moviematch-app

Imagine there was an app to help you and your friends make the almost impossible decision of choosing a movie you all want to watch!

Primary LanguageJavaScript

moviematch-app

An app to help you discover and choose movies with friends. When you and your friends like the same movie, it's a match!

backend repo

Screenshots:

Discover Movies Tab Party Matches Tab Match Modal view MovieDetails Screen

Who am I?

I am a student at Codaisseur from a far away land of Crocodiles and kangaroos. I started coding in 2020 this is my portfolio assignment to build an MVP over a period of 2 weeks

My idea with this app was to make a fun game to help friends and partners decide what movies to watch.

app stack:

  • React Native - A framework for building native react apps.
  • Socket.IO () - A solution for real time bi-directional communcation (server <=> client) using the WebSocket protocol. This allows user clients to interact with each other without needing the client to constantly check for updates.
  • Redux - A predictable & robust global state management system

Project info

Installation

  1. clone the app Repo git clone https://github.com/Mr0cket/moviematch-app.git
  2. Install expo command line tools npm install --global expo-cli
  3. Install all dependencies npm init
  4. clone & install dependencies for backend repo
  5. Install the expo client app on your device (android or ios
  6. start the project through expo with either npm start or expo start
  7. using your expo-client app on your Android or IOS device, check you and the computer are on the same network, scan the QR code generated in the terminal/browser.
  • you can scan the QR code through the expo client app for android, or your camera for ios
  1. Expo will load and open the App
  2. in the backend repo, start the server npm start & copy the local area network address of the BE
  3. in FE repo navigate to /src/config/constants.js replace the address in line 4 with the address for your own backend.

Future Features:

  • Improved Discover Movies page
    • Ability to use touch gestures (swiping) to like/dislike a movie
    • Dynamic Animations for like & dislike events
  • Improved UI/UX for signup, My Account screen, My Party screen & Match popup modal
  • Better interface to manage parties
    • mechanism for user to accept or decline a party invitation when invited
    • ability to remove a user from your party, or join another party

The Backend stuff:

socket events

  • user/join - an event which the client sends on successful connection with the server containing user authentication details
  • user/likedMovie - event emitted by client when the user likes a movie
  • user/dislikedMovie - event emitted by client when the user likes a movie
  • party/match - event emitted by server when it detects a party match.

HTTP Endpoints

Most endpoints are OAuth 2.0 Bearer Token Authenticated (auth)

User authentication

  • POST /login
  • POST /signup
  • GET /me - (auth)

/movies - Fetch user movie lists

  • GET /movies/liked (auth) - fetches the user's list of liked movies
  • GET /movies/matches - (auth) - fetches the user's list of party matched movies

/party

  • GET /party (auth) - fetches the user's party members
  • POST /party/invite (auth) -

GET /stagingList - dynamic Lists of movies shown to user

uses an algorithm which weights:

  • movies liked by other users in the party,
  • movies previously the user has already interacted with
  • etc...