Hello! Glad to see you here! 👋
This page contains all the information you'll need to run and work on this assignment. If you have any question, you can find ways to contact us at the bottom of this page.
You should fork this repo to be able to work on it.
Imagine we just received new designs to build an interface for Yat. It's a page where you can see which collectibles your friends own. We call these groups "Pods":
As a user, you're able to:
- See the list of collectibles you and your friends own
- Filter collectibles you own
- Sort by price or most recent acquired
- Search by keyword
We would like you to build a functional interface based on this design. The Figma file can be found here.
We understand this design can take a meaningful amount of time to be implemented. If time is a constraint, focus on areas where you can really showcase your skills. Are you a CSS guru? Show us what you can do. If you prefer to work "under the hood", how do you handle the user actions and optimize the page to allow Pods to contain thousands of collectibles?
You're welcome to use libraries that could help you with this task. Also, feel free to modify any aspect of the code if you think that will make it better.
The data is being provided by React Query in combination with a Mock Server. The mocked responses can be modified here.
- We want to see how you approach this challenge
- Build this UI for a regular desktop screen, but a responsive design will be a plus
- If you use external libraries, tell us why and the reasoning behind your choice.
- Make sure your solution works on different scenarios (we will try to break it 😇)
- Be creative. We love simple and clever solutions.
Are there other aspects that you would consider while building this page? For example, what would you do improve this interface in terms of accessibility?
If you have new ideas or cool tricks to show us, go for it!
If you can't make any progress or feel defeated, try a different approach:
- Can you start with a small component in the UI? Keep iterating!
- Is there something else you could add to make the experience more enjoyable for our users?
Remember: we want to see what you are capable to do. Show off your coding and problem-solving skills. If you can't write even one single line, being a good storyteller can go a long way 🤣
-
Fork the repository
-
Install dependencies
yarn install- Run the app
yarn startYou should see the following page on your browser:
Use this page to build the interface. Don't worry about routes, but you're welcome to re-organize the files any way you prefer.
🌟 You are all set!
- Clean code
- How you build and reuse components
- Comments (where they make sense)
- Commit history, commit often to show your thought process
- Tests are a plus
If you have questions, plese reach out to the recruiter or directly to me: