DEMO Streaming Application

Introduction

A simple streaming app that shows series and movies in a grid. The app is built using Parcel to gain more control over the build configurations like naming conventions without having to eject the app.

Project Architecture

The app is divided into two parts; Client and Server.

.
├── client
├── server
├── ...
└── README.md

The client directory contains the presentational logic built using React JS, while the server directory contains an express JS based server that is responsible for providing /api/movies, and /api/series endpoints. The server is also responsible for adding filters and sorting on the data. The client is being served over express server using express proxy which creates a full stack environment.

Tools

• React JS
• Express JS
• Styled Components
• Jest
• SuperTest ( for http assertions )

Installation Instructions

After you successfully clone the application to your local machine, you need to run the following commands to build and run the application:

1. Install the dependencies

   yarn install
   

2. Start the Development server ( builds the app in the dist folder and serves it over the express server )

   yarn dev
   

CI/CD

The app uses Circle CI for continuos integration and deployments. On every push to origin, the config.yml file in the .circleci directory runs the pipeline to test the app, build and deploy it to Heroku.

Tests

To run the tests run the following command:

yarn test

The app uses Jest to run the tests. The app is integrated with circle CI that runs the tests and creates a new build on every push to make sure things run smooth. The app is automatically deployed to Heroku.

Improvements

I believe that there is always room for improvements. If given more time, I will:

• Write more unit tests for the components.
• Tweak mobile UI to be more user friendly.
• Add code spliting for faster loading.
• Refactor the components folder to be more tidy.