Skip to content

A fullstack application using React, SASS, Express and MongoDB

License

Notifications You must be signed in to change notification settings

f2xiao/next-watch

Repository files navigation

Project Title

NextWatch

Deployment on Render

Overview

Nextwatch is a place for people to find the upcoming new tvs/movies and keep track of the ones they are interested in by creating a list called nextwatch and share it with other users.

Problem

For the new tvs/movies that's coming out, when decide what to watch together with your friends or family, there should be an app or website that allow you to create a list of them and also includes the basic information, so you can share with them in one place and decide together.

User Profile

  • Movie/TV/Anime new season followers:
  • looking for the new season shows/tvs
  • that want to keep track of the ones they are interested in
  • that want to share the list with the people that is going to watch it together

Features

  • As a user, I want to be able to create an account.

  • As a user, I want to be able to login to my account.

  • As a user, I want to be able to logout to my account.

  • As a logged in user, I want to be able to find the new shows/tvs/animes/movies in this season.

  • As a logged in user, I want to be able to save a list of the ones that i am interested in.

  • As a logged in user, I want to be able to rate a show on my nextwatch list.

  • As a logged in user, I want to be able to change the rating of af the shows out of 10 stars.

  • As a logged in user, I want to be able to see my nextwatch list.

  • As a logged in user, I want to be able to share my nextwatch list with other users by publishing it on the shared page.

Implementation

Tech Stack

  • React
  • TypeScript
  • MongoDB
  • Express
  • Client libraries:
    • react
    • react-router-dom
    • react-youtube
    • axios
    • sass
  • Server libraries:
    • express
    • express-async-errors
    • bcrypt
    • jsonwebtoken
    • mongoose
    • axios
    • cors
    • dotenv

APIs

TMDB: seedData.js is the script wrote to fetch and sanitize the initail data from TMDB to save to the mongodb database.

Sitemap

  • Signup
  • Login
  • Home page: a list of new tvs/movies/animes that is the same for all users
  • WatchDetails page: one page per a tv/movie with youtube video that is the same for all users
  • Nextwatch page: a private page per user, it lists a table of all the tv/movies that the user is interested in
  • Shared page: a public page that is available to all users, it lists the nextwatch that other users choose to share

Mockups

Signup Page

mobile view

tablet/desktop view

Login Page

mobile view

tablet/desktop view

Home Page

mobile view

tablet view

desktop view

WatchDetails (tv/movie) Page

mobile/tablet/desktop view, not added in the nextwatch state

mobile/tablet/desktop view, added in the nextwatch state

Nextwatch Page

mobile/tablet/desktop view

Shared Page

mobile/tablet/desktop view