Duranzno / react-assessment-tv-nextjs

React Assessment TV Database App made for an Interview following a Given design implementing Next.js, Material-UI, Redux, React Hooks, Jest, TVMaze API andStorybook

Welcome to react-assessment-tv-nextjs 👋

🏠 Homepage

🚧 Project

✨ Demo

📝 Documentation

React Assessment Description

Create a project from scratch to represent a web app with the following design:

Requirements

• 1. Use Next.js framework for development: https://nextjs.org/

• 2. Do not use classes, use React Hooks https://reactjs.org/docs/hooks-intro.html

• 3. Use Material-UI for designing the components: https://material-ui.com/

• 4. Use Redux for managing the application state: https://redux.js.org/

• 5. Add unit testing for the components using Jest (https://jestjs.io/en/) or React Testing Library (https://github.com/testing-library/react-testing-library)

• 6. Set up ESLint (https://eslint.org/) and Prettier (https://prettier.io/) and follow Airbnb's style guide.

• 7. Use TVMaze API (http://www.tvmaze.com/) for fetching the data.

App

• 1. Feel free to show any movie or picture you prefer (don't need to follow the design attached).
• 2. Feel free to show any information you prefer about the movie in both the card and the text below.
• 3. The "hamburger button" must pop up the menu shown in the design. The pop up has no functionality, it only shows the menu.
• 4. For the slider (carousel), choose the movies you prefer to show. The left and right buttons should go to the next or previous movie. At least add 3 movies to the slider.
• 5. In the Featured section, there should be at least 6 movies but only 4 are shown at a time. The buttons left and right should show the hidden movies.
• 6. Whenever a movie is clicked (both on the slider or the featured section) show extended information about the specific movie. It must be shown in a new fragment/page. Feel free to show the information you want and to choose the design you want. You don't have to create a new design for it if you don't want to, plain text without any format can be used.

Notes:

1. Every single button/link which doesn't have any functionality explained in the previous section (App) is a dummy button, meaning it only has an esthetic purpose.
2. Feel free to use any third party library that might help you to speed up the development.
3. You can use Storybook if you’re feeling brave (not required) https://storybook.js.org/
4. Make sure the app is responsive.
5. Execute the development as if you were doing a real project which is going to be deployed on production.
6. Have fun :)

---

Design Modifications

Part of the interface shows the use of tags that would work similarly to the Hastags used in social networks, like #FreeWatch and #WatchNow but the TvMazeApi doesn't have them. The most similar item that wouldn't change hardly the design would be the TVNetwork where it is streamed the series.

Install

yarn install

Usage

yarn dev

Run tests

yarn test

Author

👤 Alejandro Duran

• Website: duranzno.now.sh
• Website: duranzno.now.sh
• Twitter: @duranzno_
• Github: @duranzno
• LinkedIn: @duranzno

Show your support

Give a ⭐️ if this project helped you!

---

This README was generated with ❤️ by readme-md-generator