☕ Coffee Delivery - A coffee shop app built in React ☕

Resumo

1. Visão geral do projeto
2. Tecnologias utilizadas
3. Instalação e utilização
4. Conhecimentos aplicados

Visão geral do projeto

Ver projeto no Vercel

Tecnologias utilizadas

• ReactJS
• React Hook Form
• React Router Dom
• Styled Components
• React-Toastify
• ViteJS
• Phospor React
• Yup
• Zod
• Vercel

Instalação e utilização

Pré-requisitos

Instalações necessárias

1. NodeJS
2. Npm

Instalação

1. Baixe as depedências do projeto com o comando $ npm i.
2. Rode o projeto com o comando $ npm run dev. -> localhost:5173

Conhecimentos aplicados

Utilizando Layouts do React Router DOM

Essa funcionalidade permite a criação de layout para nossa aplicação. Por exemplo, imagine que temos um

que é exibido em diversas páginas do nosso App, cada vez que uma página é carregada o é carregado novamente. Utilizando os Layouts evitamos isso. Vamos conferir o código abaixo:

O componente Outled diz respeito ao local onde o resto da aplicação vai ser inserido, como se fosse o children...

// criando layout
import { Outlet } from 'react-router-dom'

import { Header } from '../components/Header'

export function DefaultLayout() {
  return (
    <>
      <Header />
      <Outlet />
    </>
  )
}

// configurando as rotas para usar o layout
import { Routes, Route, BrowserRouter } from 'react-router-dom'

import { DefaultLayout } from './layouts/DefaultLayout'
import { Home } from './pages/Home'
import { Checkout } from './pages/Checkout'

export function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<DefaultLayout />}>
          <Route path="/" element={<Home />} />
          <Route path="/checkout" element={<Checkout />} />
        </Route>
      </Routes>
    </BrowserRouter>
  )
}

Reaproveitando estilização de componentes no styled-components

const PriceBase = styled.div<SectionPriceProps>``

export const SectionPrice = styled(PriceBase)``

Tipando elemento através da chave de outro elemento

export const defaultTheme = {
  white: '#FAFAFA',

  'yellow-200': '#F9EBCB',
  'yellow-300': '#F1E9C9',
}

export const Tags = styled.div`
  span {
    background: ${({ theme }) => theme['yellow-300']};
  }
`

Versionando LocalStorage

A prática de versionar o localStorage é usada para evitar bugs futuros na aplicação. Imagine que atualmente os dados são salvos de uma forma e, futuramente esse formato é alterado. Ao tentar ler os dados que já estavam no localStorage do usuário a aplicação vai bugar.

const localStorageKey = '@ZehCoffeeDelivery:cart'

Utilizando contextos do React

Utilizar contextos no React permite com que posssamos acessar valores de uma forma global entre todas as rotas da nossa aplicação.Para isso precisamos criar um provider no nível mais alto do nosso app, encapsulando todo o resto.

  <CyclesContextProvider>
    <Rotas />
  </CyclesContextProvider>

Agora dentro da rota desejada basta chamar o método useCyclesContext para ter acesso a todos os valores enviados pelo provider.

Voltar ao Início