camilamiz / chakra-ui-interface

Rocketseat Ignite challenge using Next.js with chakra-ui

Building an interface with Chakra-ui and Next.js

Description

This challenge is part of Rocketseat's (@rocketseat-education) ReactJS RoadMap. In this exercise, we are given a Figma layout with the page design specification and we must develop it from scratch using Next.js and Chakra-ui resources. I also used json-server as a fake api for the continents page and random images from Unsplash for the cards and background images.

Layout

This is how the application is suppose to look like.

Web version


Mobile version


Used tecnologies

• Next.js
• React
• Swiper
• Chakra-ui
• Json-server

Application

Here is a quick video showing the end result.

How to run

1. First, we have to clone this project by running in a terminal window the command below:

$ git clone [email protected]:camilamiz/chakra-ui-interface.git

2. Access the cloned repository with:

$ cd chakra-ui-interface

3. Install the dependencies by running:

$ yarn

4. Start the aplication

$ yarn start

5. In other terminal window run the command below to start the fake api

$ json-server --watch db.json --port 3004

Now you can access the application by accessing in your browser the address https://localhost:3000