🚀 Dash GO - Ignite 🚀

Technologies ✨

Esse projeto foi desenvolvido com as seguintes tecnologias:

About 💻

This project simulates a users control application. Its been made during the course of ReactJS from RocketSeat Ignite 2021.

It has a bunch of interesting features, like pagination; API builder with MirageJS; query runner with react-query; chakra-ui; and husky to easier run linter.

Declarative Interface

It uses Theme UI
When we can define the styles directly by the jsx tag
Example:

export default {
  colors: {
    text: '#000',
    background: '#fff',
    primary: 'tomato',
  },
  fonts: {
    body: 'system-ui, sans-serif',
    heading: '"Avenir Next", sans-serif',
  },
}

/** @jsxImportSource theme-ui */
export default (props) => (
  <h1
    sx={{
      color: 'primary',
      fontFamily: 'heading',
    }}>
    Hello
  </h1>
)

2. Chakra UI

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

It joins the declarative interface with accessibility
Integrates by default with Framer Motion (to make animations)
- Very popular animation library
To getting started on Chakra UI

yarn create next-app NAME_OF_PROJECT

& cd /NAME_OF_PROJECT

& yarn add @chakra-ui/react @chakra-ui/core @emotion/react @emotion/styled framer-motion

Forms

1. Controlled Components

Components where we can control their state
Basically when we monitor each typing of a person inside an input and save it in the state
This is the mostly used in smaller forms - with 1, 2, or 3 fields
- Because we store just few state info into the component
There is no performance problem in React at first
You must use the "debounce" concept
- So that the "setSearch" search is only called after the user stops typing (1s or 2s)
- Useful to use hook for this
Example:

const [search, setSearch] = useState('')
<input ...props value={search} onChange={event => setSearch(event.targe.value)} />

2. Uncontrolled Components

Way to access the value of the input only at the time we will need it
We do not store the value of each input in a state
We must use the reference of the inputs
useRef stores a ref. of the input inside the DOM (HTML element tree)
- Which type of element this ref belongs to (HTMLInputElement)
We can also normally use the ref to focus the input
Example:

const searchInputRef = useRef<HTMLInputElement>(null)
console.log(searchInputRef.current.value)
if (true) searchInputRef.current.focus()
<input ...props ref={searchInputRef} />

3. formik library

To know more access the link

4. react-hook-form library

To know more access the link
We can continue using the standard react form components, using just a few hook methods to link the fields with the library
- We got more control of the fields
- Validations etc.
Based on the idea of Uncontrolled Components

5. unform library

To know more access the link
Recommended for forms that are in need of high performance
Large forms
Based on the idea of Uncontrolled Components

Data Fetching

Search for data of a backend or another hosted application

Ex.: fetch & axios

Problem:

When we´re using useEffect and saving information inside a state, after the page be dropped, all data is deleted.
When the page is reopenned, the same data is reloaded again
Performance loss

Local Data Caching

It´s possible to store the data from made requests into a cache of the application. When the data is needed again while a period of time (which the data has small chances of changing), these data can be salved and displayed effectively.

Increased effectiveness and usability
Data synchronizing with the "data syncing"
"React Query" tool
- SWR
MirageJS
- It gives a way to build a temporary API in cases of the non backend existence
- Could give fake data, by a known schema and pré-define models
- To initiate miragejs, run: yarn install mirajejs -D

React Query

It creates a temporary cache whenever an HTTP request is made by BE

This cache is mapped from a few keys
Strategy: Stale While Revalidate
Keep cached in FE by the 'users' and {page} params keys

Geting Started ⚡

Go the Chacka-UI official documentation here!

Running the project 🚀

Clone the repo

git clone https://github.com/robertomorel/dash-go.git

Run the application

# Installing dependencies
yarn install

# Run
yarn dev

To run with higher performance

yarn build && yarn start

License 📄

Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

melquisedeque-magalhaes / dash-go