MoviesListAngular

This project is purely built on MEAN Stack. It is deployed in AWS Elastic BeanStalk EC2 instance Amazon Linux 2/5.5.6. Below is the link.

Project Link

This project was generated with Angular CLI version 13.3.7.

Here is the quick demo of the project:

moviesDB.mp4

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Run npm run start:server to run the backend node server.

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Dependencies Used

• express: a node js web application framework that provides broad features for building web and mobile applications
• mongoose: a JavaScript object-oriented programming library that creates a connection between MongoDB and the Node.js JavaScript runtime environment.
• aws-sdk: aws cli for using aws services
• multer: for uploading/storing posters and trailers on aws S3 bucket
• node-dataset: for rendering the datasets in nodejs
• ngx-videogular: npm package for angular with great video control features. Built on top of HTML5
• @angular/material: used as frontend templates for the project which gives a lot of beautiful templates
• shimmer-css: for shimmer effect while loading

Thought Process

• First of all, a movies data-set called TMDB from Kaggle is used for the movie names
  Kaggle TMDB Dataset
• After loading all the movies and its details, the posters and trailers needed to be uplaoded and fetched from a cloud source.
• AWS S3 Bucket is used here as storage for trailers and posters for the movies.
• For storing the trailers and posters, an end-point is been created at the backend in nodejs server. /addPosters/:id and /addVideos/:id
  
• So, the posters and trailers are uploaded to the S3 bucket using these routes/end-points and are stored in mongoDB at the same time.
  Note: The links to all the posters and trailers are stored to the particular movie in mongoDB.
• And then, it is fetched from the S3 bucket to the client side.
• Coming to the trailers section, it is also fetched from the S3 bucket. And @ngx-videogular dependency is been used here for video playback in angular.
  Trailers are played as soon as the user hits the /movie/ end-point
• In the movie page, the movie details can be seen along with trailer in the overview section.

Design Choices

• Coming to design, Angular Material is been used here because it gives more flexibility and more beautiful UIs and templates


• And also it has a good documentation for its API.


• For the design, one of the Dribbles Movies UI is been used for the reference.

For better optimization

• The queris for fetching the data from AWS S3 can be optimized using CloudFront Service in AWS.
  It is used to stream images, video files, etc. for smooth user experience.
• Coming to design issues, the carousel effect of the movies list can be optimized further for better user experience.
• The video streaming can be optimized by using CloudFront Service from AWS.
  The video player can have better controls using the @ngx-videogular module.
• The shimmering effect can be further more optimized for better user experience.