Movies lookup

Live demo:

Netlify: https://movies-lookup.netlify.app/
AWS Cloudfront: https://d10q0qg2u0uitv.cloudfront.net/

Introduction

An application that displays top trending movies and helps to search for all previous movies' details.

Development process

This app built using React, Redux and written in Typescript. It ultilises TMDB API to fetch movies and details. Continuous Integration and Continuous Deployment (CI/CD) pipeline is set up for every branch, ensuring smooth development and deployment process.

In develop and master branch, a series of jobs to push the build folder to AWS S3 for storage and deploy the application to AWS Cloudfront

Techs

Frontend: React, TypeScript, Redux, React-router-dom, Sass
Hosting: Netlify, AWS Cloudfront, AWS S3
Others: Slack API, Docker, CircleCI, Terraform

Setup

Create CircleCI account and follow the instructions.
Create AWS Account Free tier and obtain AWS_ACCESS_KEY_ID AWS_REGION, AWS_SECRET_ACCESS_KEY. Instruction
Create Slack account and workspace, then obtain SLACK_ACCESS_TOKEN and SLACK_DEFAULT_CHANNEL. Instruction
Add above environment variables in Project Setting/Environment Variables Link
Signup for an account and acquire the API_KEY from TMDB.
Create a .env file and add the environment variable VITE_API_SECRET='your_api_key'

Scripts

npm i to install the dependencies.
npm run dev to start the development server.
npm run build to create build folder in dist.
npm run preview to see the build content.