npm install

npm run start

npm run test

The application initially displays the shows and allows the user to access to the show details related to the selected show.

Additionally, redux was used to manage states and some components were tested. As an extra, the dark-light theme option and the use of localstorage for data persistence also were added.

Just click on the show to go to the details section:

Which also has its dark version:

The button at the right corner makes possible to return to the shows list section, this action is achieved using the Route component from the react-router-dom library. For styling, the tailwindcss library was used as it makes it easy to implement theme selection throughout the application.

The following cases were taken into consideration,

given a wrong url the following message will be displayed:

When trying to access an undefined route, a Not found message is delivered but you can still go to the show lists using the back to shows button.

All possible cases comes with their own respective dark-light theme option.

The application is made up of three main folders: Components, hooks and store and the UI folder, where there are reusable components.

A custom hook were created to modify the theme, enabling refactoring and delegating specific tasks outside the components. The store folder contains the store management system (redux) which was used to centralize states, update and make them available through the components. The App.js file makes the call to obtain the information and renders the components. A possible improvement is to clean the App.js file, so that it only renders a single component (creating a Layout component for example) making it clear that this is its only function following the practice of making a component as specific and simple as possible.

👤 Guido Stifani