Main Challenge of Chapter 04. WorldTrip. Using Chakra, Swiper and Next.js.
| Home page up part | Home page down part |
|---|---|
 |
 |
| Nation page up part | Nation page down part |
|---|---|
 |
 |
- NextJs
- Typescript
- yarn
- Chakra
- Swiper
This project used two main things. Next and Chakra. Next to use its power of Static Generation and Chakra to use its new way of styling.
The pages for each nation is created dynamically with getStaticProps methods. Also had to use getStaticPaths to create a list of possible paths. Its use a fake api. There is a json file with all the data needed. Like the title, description, photos paths, cities information and so on. Was done this way to avoid creating multiple tsx files for each nation page. Next is here to help so, lets use it, right?
Chakra give me a new way to styling the components. Its property is declared within the tag. Not html tag but the crakra tag. It is converted to html tag in the end. The project can become a little big and messy but with right indentation and spacing in the code, it become easy to change, debug, etc. There is too much to tell about chackra. To find more, visit its documentation: Chakra
The slides was created with Swiper. Very easy to use. To find more about Swiper: Swiper
Clone this project to you local files typing the command (go to the location where you wanna save it):
git clone https://github.com/Vinicius-PR/Ignite-Challenge-04-WorldTrip
Move to the file project:
cd Ignite-Challenge-04-WorldTrip
Open with your code editor. If you are using Visual Code, run:
code .
Install the dependencies:
yarn
Start the aplication and enjoy: \o/
yarn dev
This projet is my solution of the main challenge, chapter 4 - React. Bootcamp Administered by Rocketseat. Each challenge done is one more step to become a better programmer 😎. With this one, I took a huge step forward.