Implement in React a web page, which contains 2 tabs ("Create a new team" and "Team") as defined in the following mockup.
the challenge can be done with pure React (plus Typescript, if you have familiarity) or with some other React-based framework like NextJs, styling with Styled Components if you want to, maintaining a global state with Context API. In addition you will need a database to store the data and a simple backend to consume it and it was meant to be done in 3 days.
the idea of the App is to create a Pokémon team builder, where you must choose 6 monsters to compose your team and view the teams already created.
- Put proper comments in code, so that we can understand the function usage etc..
- Componentization and interactions taking in to consideration the atomic design principles.
- Api consuming and iteration with its data into the UI.
- State management between pages (preferably with Context API, but you can try Redux as well)
- Figma Design - all the UX specs are here
- Figma Prototype
- PokéAPI - Public API for the data
- CSS Filters
Once you are done, please share with us:
- Source code link (GitHub, BitBucket, etc), to do that your repository must be link only.
- URL where you deployed the project. You need to deploy the WebApp on some cloud platform (like Heroku, Vercel, etc.) and provide us with the URL.
non-essential features that will differentiate you
- Drag and Drop for team building
- Infinite scroll and pagination listings
you can get in touch to clarify doubts
- Email - [email protected]