universal-ratings

A site for rating TV shows and movies.

Tech Stack • Features • Installation • Configuration • Usage

Tech Stack

• React

• Next.js

• GraphQL

• Aloglia Search

• Material-UI

• Webpack

• Node.js

• AWS

  📃

  • Amplify
  • Cognito
  • Lambda
  • DynamoDB
  • AppSync
  • S3
  • Cloudfront

Features

Searching

• Federated, live, search for rated/unrated shows with fuzzy matching and result grouping
  • Rated/watchlisted shows retrieved from Algolia
  • Unrated shows retrieved from TMDB API
• Client and server side caching of search results
• Debouncing and request cancellation to ensure the user is presented with search results for their current query

Shows

• 3rd party ratings from OMDB API
  • IMDB
  • Rotten Tomatoes
• Users can rate shows and view other users' ratings
• Users can view the schedule of a specific TV show or all TV shows they've rated/watchlisted
• Users can add rated/unrated shows to their watchlist and favorite them
• Show card grid for basic details
  • Title, type, and poster
  • Overall/user rating
  • Streaming availability
• Show modal for extended details
  • 3rd party and user ratings
  • Year, title, type, plot summary, and poster
  • Streaming providers
  • Watchlisted/favorited by user
• Views for trending shows, recently rated, recently released, TV, movies, watchlist, watched, favorites, and schedule
• Updates dynamic metadata of stored shows, such as streaming providers, via CRON job
• Posts to a Discord webhook when a show is first rated
• Infinite Scroll
  • Fetches paginated shows from GraphQL when user scrolls to end of page

Users

• AWS Cognito user auth
  • Signup, login, and logout
  • GraphQL read/write auth
• User profile with customizable avatar and display name
• User selectable custom Material-UI themes and theme preference

Installation

yarn

yarn install

npm

npm install

Configuration

Create a .env file in the project's root directory with the required API keys.

OMDB_API_KEY=<YOUR_OMDB_API_KEY>
TMDB_API_KEY=<YOUR_TMDB_API_KEY>

Usage

• To serve the app at http://localhost:3000, run one of the following commands in the project's root directory.
• Both commands will mock the GraphQL API and DynamoDB before serving the app.

Starting the Development Server

Uses HMR to update the served version on code changes

yarn

yarn dev

npm

npm run dev

Starting the Production Server

Serves the optimized build

yarn

yarn prod

npm

npm run prod