WAITER APP

O **WAITERAPP** é uma aplicação voltada para restaurantes e locais de gastronomia no geral. Esse projeto foi desenvolvido em aula na imersão do Mateus Silva no Youtube, e o mesmo liberou para que os alunos publicassem e fizessem as suas próprias alterações. Futuramente irei acrescentar novas funcionalidades que você pode conferir no [Roadmap](#roadmap).

## Instalando e rodando o projeto localmente: Para rodar o WAITER**APP** em sua máquina é bem simples. Você precisa ter instalado: - Node.js LTS v16 - MongoDB Compass v1.33.1 (apenas caso você queira criar e editar pedidos e categorias, não é necessário para testar) - Expo para celular ou o Emulador do Android ou IOS. Para a instalação dos pacotes você deve entrar em cada pasta individualmente e rodar o comando `yarn install`, pois neste projeto temos a _API_, _WEB_ e _MOBILE_ Navegue para `./api` e rode no terminal o comando: ```bash yarn install ``` Repita esse passo para `../app` e depois em `../fe`. ### Rotas Lembre-se de alterar as rotas da aplicação nos arquivos: > Para facilitar você pode buscar na raíz do projeto por `uri:` que o VSCode encontra para você. E mais um detalhe, a porta padrão da aplicação foi definida para `:3001`. Caso você queira alterar basta entrar em: `\waiterapp\api\src\index.ts` ou pesquisar na raíz do projeto por `const port` e alterar o valor da váriavel. Pronto, agora você está preparado para utilizar esta aplicação. Para iniciar a _API_ e a _WEB_ basta rodar `yarn dev` em suas respectivas pastas. E para iniciar a versão _MOBILE_ basta rodar `yarn start` em sua respectiva pasta. **OBS:** Caso você queira rodar a _API_ fora do ambiente de desenvolvimento, você pode rodar o comando `yarn build` e logo em seguida passar a utilizar o comando `yarn start`.

Stack utilizada

* **Front-end:** React, React-Native, Styled-Components, Axios, Expo, Intl e Typescript. * **Back-end:** Node, Express, Multer, Socket.io, Mongoose e Typescript.

Demonstração

Para fazer um pedido iremos utilizar o aplicativo. 1. Na tela inicial escolha um item, e logo em seguda será solicitado o número da mesa.

2. Logo em seguida você poderá adicionar, remover itens ou cancelar o pedido.

3. Após clicar em `Confirmar pedido` ele aparecerá na sua _Dashboard_ no navegador. Onde você poderá iniciar a produçao, finalizar, limpar ou cancelar o pedido.

Aprendizados

Neste projeto aprendemos a utilizar muito bem o React, principalmente o `useState` e `useEffect` como podemos ver neste trecho de código: ```bash \waiterapp\app\src\Main\index.tsx const [isTableModalVisible, setIsTableModalVisible] = useState(false); const [selectedTable, setSelectedTable] = useState(''); const [cartItems, setCartItems] = useState([]); const [isLoading, setIsLoading] = useState(true); const [categories, setCategories] = useState([]); const [products, setProducts] = useState([]); const [isLoadindProducts, setIsLoadindProducts] = useState(false); ``` Além disso o uso de `Interfaces` se faz presente durante todas as etapas do projeto, como podemos ver aqui: ```bash \waiterapp\app\src\components\Cart\index.tsx interface CartProps { cartItems: CartItem[]; onAdd: (product: Product) => void; onDecrement: (product: Product) => void; onConfirmOrder: () => void; selectedTable: string; } ``` Utilizamos tambem durante toda a estilização do projeto o _Styled-Components_, facilitando a leitura do código tanto na _WEB_ quanto no _MOBILE_. Vale lembrar também da criação das rotas utilizando o `node:path`, `express` e `multer`.

Roadmap

- Lançamento da v1.0 ✅ - Adicionar animação **Shimmer Effect** 🔲 - Adicionar **Splash Screen** 🔲 - Adicionar **versão responsiva ao Dashboard** 🔲 - Adicionar **autenticação de usuários** 🔲 - Adicionar **nova tela de criar e alterar pedidos dentro do MOBILE** 🔲

Status

Entre em contato comigo!