Breaking-Bad-Char-Index: A JavaScript repository from marcelxv

Web-based app built in React searches for Breaking Bad characters via API

Tailor-made improvements:

Status translate function to Brazilian Portuguese
Function that converts dates to Brazilian format
Search using UseState (real-time search)
Use Axios to query via query (real-time search)

#API #frontend #components #CSS #JavaScript #react

Made using React 6, Axios, Redux, Webpack and CSS3, JavaScript and HTML5 API provided by https://breakingbadapi.com

Repository: https://github.com/marcelxv/Breaking-Bad-Char-Index Live project: https://breaking-bad-char-index.vercel.app/

Walkthrough (step by step):

Create a React App Structure via npm
Clean code that we’ll not use
Clean files that we’ll not use
Open terminal on VSCODE and give command to create react app
Open new folder on VSCODE
Add imagens (pasta em src)
Mistake with hard reload
Copy CSS from repository
Create components folder
Use ES7 React/Redux to create a pre-modeled component (template) with arrow function
@ Header.js import logo using Webpack
@ Header. Js apply class center
@ Header.js insert logo image
@app.js Test Header component
@app.js Import UseState
@app.js Import UseEffect
@app.js Create const to cards, with setCards function to useStates (empty)
@app.js Create const to carregando, with estaCarregando function to useStates (true)
@app.js Create useEffect arrow function to fetch data (using AXIOS)
@app.js Import AXIOS
@packcage.json Check if it’s installed
@ terminal Install AXIOS via npm
@app.js Create const to FetchData / arrow function async = await axios( base url )
@app.js Console log to test data fetch
@app.js Get an error caused by never called FetchData function
@app.js Call fetch item
Clear console errors get rid of Webvitals module
@app.js set data fetched to cards (setCards)
Create a new folder called Characters
Create component inside /Characters GridPersonagens.js
@CharacterGrid.js use ES7 shortcut to create component rafce
Call gridPersonagens em @app.js
@app.js pass data from state of cards and estaCarregando para GridPersonagens.js
Catch values / data from app.js densconstructive way
@GridPersonagens.js returns estaCarregando
@GridPersonagens.js Use a ternary to check if isLoading is true / false
@GridPersonagens.js create a section with class name of cards (to use pre-style from css)
@GridPersonagens.js Use map to catch data through items and put that on cards via react list
@GridPersonagens.js Test card receiving data passing name card.name to element H1
@GridPersonagens.js add key={card.char_id} to element to get rid of error on react list without index
Create a file called ItemPersonagem.js inside ui/personagens to deal with specific character item component
Generate a component with arrow function using Redux
@ItemPersonagem.js Bring Card value as a prop
@GridPersonagem Import ItemPersonagem.js
Test if card name value pass through via props
@ItemPersonagem.js create following UI’s in the JSX format: div.card, div.card-inner, div.card-front, div.card-back,
@ItemPersonagem.js use h1 for card.name, li for card.portrayed, card.nickname, card.status and card.birthday
Test if values is applied to all UI elements correctly
Create a new file on components/ui called search.js
Use redux to create arrow function component
Give a section class name of search
Create a input type text
Test while @app.js import
@search.js Create a const for search (arrow function) for text and setTextfunction
@search.js Add value = value={text} at input
@search.js add onChange= setText
Error on useState caused by forgot to import use state in the header of @search.js / correct
Test if search.js is collecting user value in the input
@app.js create a const to useState that queries (setQuery) the value of search input and use it on fetch url
@search.js Change onChange value to function called onChange with e.target.value
@search.js Create arrow function for onChange (previous assign to onChange at input with two values that get a ‘q’ value
@app.js set at search module a getQuery parameter with value of (q) on arrow function of setQuery(q)
@app.js on url of axios promise, change the format to a dynamic format that put {query}
At fetchData const (arrow function) assign query as dependency (inside brackets at end)
Test the input and useState render – it’s reacting to letters typed
Create a new component inside components/ui called spinner
Use Redux to start a the new component with arrow function
@spinner.js Import the spinner gif
@spinner.js Add image with spinner as src
@GridPersonagem.js import spinner component
@GridPersonagem.js change h1 tag for the Spinner Component
Test it out

useState: allow use different ‘states’ inside of an component
UseEffect: fire off when component loads to make HTTP request to get the data