Case - IMDb Table

Requested

It is desired to develop a SPA where the user can list movies and view their details. The operations that can be done on the application are listed below: Movies should be listed in a table/grid. There should be at least the movie's name, release date and IMDb ID columns. Pagination should be done with 10 films on each page. It should be possible to search by movie name with a textfield on the grid/table. When the application is first opened, it is desired to act as if the default Pokemon was searched. The user should only be able to list movies released in the year he/she wants. The user should be able to search only movies, only series or only series episodes if he/she wishes. When the movie name is clicked, the user should be directed to another page where the movie's poster and other details (title, duration, genre, director, actors, IMDb score, etc.) can be viewed. The technical requirements are listed below. The solution must meet these requirements as much as possible. React should be used as a framework. OMDb API (http://www.omdbapi.com/) should be used to retrieve movie information. TypeScript or ES5+ can be used. The commands required to start the application should preferably be provided in README.md Use of SASS/LESS/SCSS for custom styling will be considered as a plus point. State management Redux usage will be considered as a plus point. Using React Hooks will be considered as a plus point. Utility libraries such as Lodash, Underscore.js, moment etc. can be used. CSS frameworks such as Bootstrap, Semantic UI, Material UI etc. can be used.

Result

About

This is a case study to measure some React.js skills such as; api request handling, query (search) params handling, data table handling.

Stack

HTML, CSS, JS, TS, React.js, React Router Dom, Chakra UI, Axios, React Data Table Component, React Icons, React Helmet

Installation

Clone the repository

git clone https://github.com/saintyusuf/case-imdbTable.git

Change directory

cd case-imdbTable

Install dependencies

npm install

Run the project

npm run start