📺 What To Watch is a cloud-based movie watchlist. It adds rich media and movie-related attributes so you know what to watch next.
This project contains both, back-end and front-end implementation. The back-end consists of an API to search, create, read, update and delete movies (see section Architecture). All movie data and user accounts are stored remotely in a database. The front-end is implemented using plain HTML, CSS and JavaScript.
- Movie attributes like synopsis, ratings or poster and direct links to IMDb and YouTube
- List of available streaming providers and offers
- Light and dark theme dependent on system preference
- Responsive layout that works for both mobile and desktop
- User accounts and data are stored securely in a remote database
- HTTP security best practice, like CORS headers, secure cookies or the use of credentials
- User authentication and authorization using OAuth 2.0
- Performance optimizations, like "lazy loading" content or requesting images based on screen size (reduces memory footprint by 25x)
- Back-end:
- Front-end:
The architecture diagram below shows that the front-end is hosted in an S3 bucket, while the back-end utilizes an API gateway, serverless Lambda functions and databases. The entire architecture has been deployed to AWS.
This section describes how to install, configure and deploy the project.
- Clone the repository:
git clone https://github.com/mhubrich/what-to-watch.git
- Install dependencies (found in
package.json):
npm install
This project uses a configuration file to store and retrieve all required API keys and endpoint locations. Create a new file called default.json and place it in the directory ./config. It should follow the same schema as config/default-example.json.
The following list provides an overview of available configuration options:
session: Stores the secret used for the Express.js Sessions middleware.database.movies: Table name, location and keys of a AWS DynamoDB instance used to store movie data.database.users: Table name, location and keys of a AWS DynamoDB instance used to store user accounts.strategy: Authentication details to use with Passport's Google OAuth2.0 middleware.app: URL of the web application.streaming: Stores secrets of third-party streaming offer APIs.
The diagram in section Architecture depicts we have to deploy 1) AWS DynamoDB tables, 2) AWS Lambda functions, 3) an AWS API Gateway, and 4) one AWS S3 bucket.
Execute ./db/createtables.js to create two AWS DynamoDB tables, one to store user account data and another to store movie data:
node ./db/createtables.js
We use Claudia.js to deploy the Express.js application to AWS Lambda and to automatically create the corresponding API Gateway endpoints:
claudia generate-serverless-express-proxy --express-module app
claudia create --handler lambda.handler --deploy-proxy-api --region ${region} --runtime nodejs18.x
If your codebase changed and you need to re-deploy, simply run:
claudia update --runtime nodejs18.x
The front-end consists of plain HTML, CSS and JavaScript and is located at ./public/. Its entire content can be uploaded to a public AWS S3 bucket.
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.