Watchboxd

Jack Roybal

Backend Engineer

Frontend Engineer

Web Developer

JavaScript

Python

React

Watchboxd is a clone of Letterboxd, a movie-based social media site. Watchboxd is providing the moviegoer a space to create custom lists, find friends and discover films.

Check out Watchboxd

Technologies Used

Python

HTML5

JavaScript

CSS3

React

Redux

Flask

PostgreSQL

Amazon AWS

Splash Page

Films

Lists

Getting started

Clone this repository:

https://github.com/ExcuseMeImJack/watchboxd.git

2. Install denpendencies into the Backend by running this command in the terminal:

pipenv install -r requirements.txt

3. Install denpendencies into the Frontend by running these commands in another terminal:

cd react-app

npm install

4. Create a .env file using the .envexample provided

5. Set up your database with information from your .env and then run the following to create your database, migrate, and seed:

pipenv run flask db migrate

pipenv run flask db upgrade

pipenv run flask seed all

6. Start the app for both backend using:

pipenv run flask run

7. Start the app for both frontend using:

npm start

8. Now you can use the Demo User or Create an account

Amazon Web Services S3

For setting up your AWS refer to this guide.

Features

Films

Logged in users can create a Film

Users can read/view Films

Logged in users can update their Film

Logged in users can delete their Film

Lists

Logged in users can create Lists and add Films to the lists

Users can read/view all of the Lists

Logged in users can update their Lists

Logged in users can delete their List

Profile

Users can create a Profile

Logged in users can read/view their Profile

Logged in users can update their Profile

Logged in users can delete their Profile

Likes

Logged in users can like a Film

Logged in users can read/view their Likes

Logged in users can delete/remove their Like from a Film

Watches

Logged in users can add a Watched to a Film

Logged in users can read/view their Watches

Logged in users can delete/remove their Watches from a Film

Watchlist

Logged in users can add a Film to their Watchlist to create the Watchlist

Logged in users can read/view their Watchlist

Logged in users can update their Watchlist

AWS

Logged in users can upload a profile picture to AWS S3

Logged in users can upload a film background image to AWS S3

Logged in users can upload a film tile image to AWS S3

Future Features

Shows

Logged in users can create a Show

Users can read/view Shows

Logged in users can update their Show

Logged in users can delete their Show

Friends

Logged in users can friend other users

Logged in users can read/view their friends

Logged in users can remove another user as a friend

Advanced Details for Films and Shows

Genres will be able to be added by dropdown menu

Cast and Crew will be able to be added to the Film/Show

Episodes will be added to the Shows

Users will be able to view a cast/crew member's detail page

Web Sockets

Logged in users can message other users they friend

API Routes

This web app uses the following API routes to dynamically update the page to create a single-page-app-like feel for the user for specific features.

FILMS

GET /api/films

Purpose: Query for all the films and returns them in a list of film dictionaries

Return: {'films': [{'id': 1, 'title': 'Jurassic Park', . . . }, {'id': 1, . . . }]}

GET /api/films/{film_id}

Purpose: Query for a film by the film id and returns a film in a dictionary

Return: {'id': 1, 'title': 'Jurassic Park', . . . }

POST /api/films

Purpose: Create a film that will assign the current user as it's creator and returns the created film in a dictionary

Return: {'id': 1, 'title': 'Jurassic Park', . . . }

PUT /api/films/{film_id}

Purpose: Update a film by id if the film belongs to the current user and returns the updated film in a dictionary

Return: {'id': 1, 'title': 'Jurassic Park', . . . }

PUT /api/films/{film_id}

DELETE /api/films/{film_id}

Purpose: Delete a film by id

Return: {'message': 'Successfully deleted!'}

LISTS

GET /api/lists

Purpose: Query for all the lists and returns them in a dictionary

Return: {'lists': [{'id': 1, 'list_name': 'My List', . . . }, {'id': 2, 'list_name': 'My List', . . . }]}

GET /api/lists/{list_id}

Purpose: Query for a list by the list id and returns a list in a dictionary

Return: {'id': 1, 'list_name': 'My List', . . . }

POST /api/lists

Purpose: Create a new list

Return: {'id': 1, 'list_name': 'My List', . . . }

PUT /api/lists/{list_id}

Purpose: Update a list by id

Return: {'id': 1, 'list_name': 'My List', . . . }

DELETE /api/lists/{list_id}

Purpose: Delete a list by id

Return: {'message': 'Successfully deleted!'}

LIKES

POST /api/likes/{film_id}

Purpose: Add a like to a film

Return: 'message': 'Film liked'

DELETE /api/likes/{film_id}

Purpose: Remove a like from a film

Return: {'message': 'Film unliked'}

WATCHED

POST /api/watched/{film_id}

Purpose: Add a watched to a film

Return: 'message': 'Film watched'

DELETE /api/watched/{film_id}

Purpose: Remove a watched from a film

Return: {'message': 'Film unwatched'}

WATCHLIST

POST /api/watchlist/{film_id}

Purpose: Add a film to the user's watchlist

Return: {'message': 'Film added to watchlist'}

DELETE /api/watchlist/{film_id}

Purpose: Remove a film from the user's watchlist

Return: {'message': 'Film removed from watchlist'}

USERS

GET /api/users

Purpose: Query for all users and returns them in a list of user dictionaries

Return: {'users': [{'id': 1, 'first_name': 'Tester', . . .}, {'id': 2, 'first_name': 'Tester', . . .}]}

GET /api/users/{user_id}

* Purpose: View a specific user by id

* Return: {'id': 1, 'first_name': 'Tester', . . .}

POST /api/auth/signup

Purpose: Create a new user

Return {'id': 1, 'first_name': 'Tester', . . .}

PUT /api/users

*Purpose: Update the current user

*Return: {'id': 1, 'first_name': 'Tester', . . .}

DELETE /api/users

Purpose: Delete the current user

Return: {'message': 'Successfully deleted!'}

Like this project

Posted Nov 9, 2024

A multi-page web application where users can view film information, create watchlists and follow their friends to see their likes and watches.

Likes

Views