Having the rick power!!! Pt.1
Tags: javascript, webdev, react
Published: 2021-07-29 00:06:09

WOOOHOOOOOO we are going to have a nice time doing this :O

<img width="100%" style="width:100%" src="https://media.giphy.com/media/efHpdducCDKUMMyzte/giphy.gif" />

## Table of Contents
1. [Creating the project](#creating-proyect)
    1. [Installing dependencies](#dependencies)
2. [Creating Home page](#home-page)
    1. [Making a nice entry](#nice-entry)
    2. [Making cards](#making-cards)

I will be using as I said in the first post, React and Apollo with the API of [rick and morty](https://rickandmortyapi.com/documentation/) using the graphQL one.

## Creating the project <a name="creating-proyect"></a>
Everything is going to be uploaded on my [GitHub](https://github.com/blitty-codes/rick-power) with some comments (I guess... 😶‍🌫️).

First thing is first, lets start our react project using
`npx create-react-app my-app`.

YESSSS we are...
<img width="100%" style="width:100%" src="https://media.giphy.com/media/kgahdSixevDLsgeuur/giphy.gif" />
DONEEE!!!

Okey... no :/ it was a joke...

just... continue reading and ignore it :D

### » Installing dependencies <a name="dependencies"></a>
We need **Apollo client**, **GraphQL** and **Tailwind** (why not?) So installing them...

`npm i @apollo/client graphql tailwindcss`

(Since my WiFi is like...
<img width="100%" style="width:100%" src="https://media.giphy.com/media/26uf10GWGaKqhD9Is/giphy.gif" />
here I am, waiting for it to finish, BTW is with the react project AHAHHAHAHAHAHA okey... okey... sorry you don't care about this, sorry 😬)

## Creating Home page <a name="home-page"></a>
We are going to get rid of... everything?? (I know I did the first commit with everything, sorry xd).

We don't need almost anything, so we will have only the `index.js` and `app.js`.

PERFECT!!! NOW WE HAVE... nothing :|

But don't cry, we are going to start now.

### » Making a nice entry <a name="nice-entry"></a>
For this... well... I will need **Apollo client** here, because I'll be showing 5 cards of characters.

And I thought... What about making a folder named `components` that is what everyone would use, and create a component `card.jsx`. And that is what I've done :).

And at this point I thought: "What about doing it in typescript...?" And I said: "Noup... too much for now".

Also... I realized that is the first time I use **tailwind** for **React**, so I needed to do the things that were in the [docs](https://tailwindcss.com/docs/guides/create-react-app).

And installed ESLint HEHE, sorry 😬😥 `restarting now...`

-- Restarting
-- Here we go!

### » Making cards <a name="making-cards"></a>
So far so good, I've made the cards, I think they are okey... (also responsive)
I got some problems with react, because I wasn't aware of some errors, like using `{{}}` instead of `{}` for strings :=.

So.. I wanted to make a nice styling card but simple and I decided to have what you see in the image behind, I don't really know what to explain here, because is simple and there is no Apollo 😬.

Well... I'll do a push ⬆ and go to sleep, see you tomorrow (?)!

This tailwind is dizzying me 😵.

![How is looking](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0s525au8ahu337h64r08.png)

---

## Follow me!
(I liked more the red bird :_()
🐦 [Twitter](https://twitter.com/blit12_)
🐙 [GitHub](https://github.com/blitty-codes)
👥 [LinkdIn](https://www.linkedin.com/in/blitty/)

---