ui-challenge's Introduction

The Graph UI Challenge

This is a NextJS React app interview challenge. Please fork this repo, and push your code to a branch in your forked repo (following the instructions below).

In this exercise you will create a page that lists all projects (as cards), and when clicking on the individual project card, it will take a user to a new page, which has more details about the project.

Designs can be found here.

On the Projects page - show the list of projects as cards. Make sure to implement the hover state, and to make the layout responsive.
React Query is already setup and we use it to fetch data for both pages. For the cards, make sure to use project names. For the cards images, use the avatar property (which is a Qm.. hash) and prepend this to it https://ipfs.io/ipfs/. For example, this is an image URL: https://ipfs.io/ipfs/QmfWoVg7xFrf1nx5P5ANJJfVzMABbrUJhg3FMkgnVKf9jH
On the individual Project page - show more details about the project itself. The data should be already available for that page. Remember to have the hover state for the button. Button click shouldn't do anything.

Notes

Make sure to implement the UI/UX according to the Designs provided. We highly value attention to detail.
For styling we use Theme UI. You can read more about it here: https://theme-ui.com/getting-started/. There is an example in the app of how to add styles.

Setup and Development

Fork this repo [email protected]:edgeandnode/ui-challenge.git
Make sure you are inside of the repo you just cloned, by running cd ui-challenge
Run yarn to install all dependencies
Run yarn dev to start the app
Open http://localhost:3000 in your browser

Recommend Projects