Having the rick power!!! Pt.1

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

Table of Contents

1. Creating the project
   1. Installing dependencies
2. Creating Home page
   1. Making a nice entry
   2. Making cards

I will be using as I said in the first post, React and Apollo with the API of rick and morty using the graphQL one.

Creating the project

Everything is going to be uploaded on my GitHub with some comments (I guess... 😶‍🌫️).

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

YESSSS we are...

DONEEE!!!

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

just... continue reading and ignore it :D

» Installing dependencies

We need Apollo client, GraphQL and Tailwind (why not?) So installing them...

npm i @apollo/client graphql tailwindcss

(Since my WiFi is like...

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

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

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.

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

-- Restarting
-- Here we go!

» Making cards

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 😵.

---

Follow me!

(I liked more the red bird :_()
🐦 Twitter
🐙 GitHub
👥 LinkdIn

---