Delivery App

Explicação breve do projeto com no máximo 2 a 3 linhas

Tecnologias

Website ( ReactJS + TypeScript )

• React Router Dom
• Styled Components
• React Query - Tanstack
• Axios

Utilitários

• Protótipo: Figma → Protótipo (Projeto)
• Editor: Visual Studio Code → Extensions: Prettier + EditorConfig
• Versionamento: Git
• Padronização de código: ESLint

Layout

O layout da aplicação está disponível no Figma:

Adicionar 2 a 3 imagens do Figma quando tiver disponível

Funcionalidades

Features que estão sendo adicionadas na aplicação

Front-end Web

• Features do Front-end concluídas
• Features do Front-end em andamento

Estrutura de pastas e componentes

Afim de facilitar a organização e manutenção do código, foi definido um padrão para organização das pastas neste projeto.

Estrutura de pastas

→ components: Pasta onde ficam os componentes da aplicação.
→ contexts: Pasta onde ficam os componentes da aplicação. Cada contexto criado vai ter uma pasta própria dentro da estrutura de contexts.
→ errors: Pasta onde ficam os errorsHandlers customizados da aplicação.
→ hooks: Pasta onde ficam os custom hooks da aplicação. Cada custom hook vai seguir o mesmo padrão do context.
→ lib: Pasta onde ficam algumas configurações internas de lib externas que precisamos utilizar da aplicação.
→ pages: Pasta onde ficam os componentes de cada página da aplicação. As páginas vão seguir a mesma padronização dos outros componentes.
→ routes: Pasta onde ficam as rotas públicas e privadas de cada página da aplicação.
→ service: Pasta onde vamos armazenar toda a camada de serviço. Cada service vai ter uma pasta alocada internamente na pasta service. E vai utilizar a classe httpClient para realizar as requests.
→ styles: Pasta onde vamos armazenar toda a configuração de estilo global e tema da aplicação.
→ utils: Pasta onde vamos armazenar todos os utilitários.

Estrutura de componentes

Para padronização dos componentes, nós vamos utilizar um pattern de container/presentation. O componente vai possuir uma camada de presentation, que vai possuir toda a view do componente, e uma camada de container, que vai possuir toda a lógica do componente.

Essa comunicação entre o container e presentation vai ser feita através de um customHook exportado do container.

Vamos tomar como exemplo um componente chamado example:

→ index.ts: Responsável por exportar o componente, e o que mais for necessário para funcionamento do componente; → example.tsx: Responsável por ter a camada de presentation do componente; → example.hook.ts: Responsável por armazenar a camada de container do componente; → example.spec.tsx: Responsável por armazenar os testes do componente; → example.styles.ts: Responsável por toda estilização do componente;

Como executar o projeto

Pré-requisitos

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas:
→ Git;
→ Node.js;

Além disto é bom ter um editor para trabalhar com o código como VSCode;

Getting started

Clone este repositório:

$ git clone https://github.com/DeliveryAPP-Project/delivery-app-frontend
$ cd delivery-app-frontend

Instale as dependências:

yarn install

Caso você esteja utilizando npm, execute:

npm install

Rodando a aplicação

Então, inicie o projeto:

yarn dev
# A aplicação será aberta na porta:5173 - acesse http://localhost:5173

Caso você esteja utilizando npm, execute:

npm run dev

Como contribuir

Para contribuir, acesse Guia de contribuição

Colaboradores

A galera que ta fazendo acontecer ;)

Nome do usuário