React.JS Agap2it Challenge
Routes
/ -> Home Page
/s<number>/ep<number> -> Episode details page
Challenge
We would like to see a small web app with two pages (routes): a details page for the TV show "Powerpuff Girls",
and an episode detail page with information about specific episodes.
Page 1
The TV show page should at least display the following information (you're free to add more):
- Show title
- Show Description
- Show cover image
- Episode list. Every episode in the list should link to a details page for that specific episode
Page 2
The episode detail page should contain at least:
- Episode-title
- Episode Summary
- Episode cover image
API
http://www.tvmaze.com/api
Requirements
- Setup two routes in your app, one for TV shows and one for episodes.
- Retrieve data from TV Maze REST API.
- Use of typescript.
- Use React to render UI components.
- Use "Create React App" to bootstrap your project.
- Use of react-hooks.
- Do not leave any unused dependencies or scripts
- Setup state management - redux - and data flow.
- Style your components with css-in-js, make sure that the end result is responsive and has at least one breakpoint.
- All code should be checked-in into a Git repository.
- Documentation is optional but appreciated, the same goes for comments in your code.
Nice to have
If you feel you have time to express yourself more here's the list of few points to guide you:
- Add unit and snapshot tests.
- URL where the app can be viewed and seen working (use any platform of your preference: heroku.com, aws.amazon.com, etc)
Evaluation points
- use of community best practices
- use of clean code which is self documenting
- use of domain driven design
- tests for business logic
- clean and extendable project structure, usage of best practices
- use of css-in-js
- use of design frameworks
- use of code quality checkers such as linters and build tools
- use of git with appropriate commit messages
- documentation: README and inline code comment