vinisi12363/devio-frontend

Front End doo desafio técnico fullstack da Devio

Vini Fast Food - Fullstack Challenge

Modelo de Fast food fullstack

Faça seu pedido de forma rápida e com visualização em TEMPO REAL do que está sendo preparado na cozinha e também os pedidos para retirada!

[Acesse o aplicativo online]

Principais recursos

• Acesso rápido e fácil - comece fazendo o seu pedido sem precisar de cadastros chatos, indicando apenas o nome para retirada e a forma e pagamento.
• Organização - Faça seus pedidos de forma simples, podendo alterar ou excluir qualquer item do pedido antes de finalizar, de acordo com o seu gosto.
• Design responsivo - Faça seus pedidos em qualquer dispositivo, seja no computador ou celular.
• Design intuitivo - Interface simples e intuitiva, com poucos cliques você consegue escolher os itens do pedido e finalizá-lo.

Como utilizar:

1. Quando você abrir o app você poderar escolher qualquer um dos produtos disponíveis na sessão Produtos , ou por Categoria!

2. Clique no produto desejado.

3. No Modal de resumo do pedido, ao clicar em um produto, será exibida uma janela com o resumo do seu pedido, valor total e opção de adicionar mais itens , e também de deixar uma observação para a cozinha.

4. No final da janela você terá duas opções continuar comprando ou adicionar ao pedido, caso escolha continuar, a janela de resumo do pedido será fechada , e você pode continuar adicionando itens normalmente, caso queira finalizar, receberá um aviso que deve finalizar o pedido e prencher o nome para retirada e a forma de pagamento.

5. Preencha os dados para retirada e a forma de pagamento, basta preencher os dados de maneira resumida, caso digite dinheiro como forma de pagamento, deverá ser preenchido o campo troco, com o valor ou zero.

6. **Após preencher o nome para retirada vá para a parte da cozinha para visualizar o seu pedido** - Na aba cozinha você pode acompanhar todos os pedidos que estão sendo preparados e os pedidos prontos para retirada.

Na aba cozinha também é possível excluir, enviar para retirada ou dar baixa em um pedido em tempo real.

7. por fim na aba retirada : - É possível visualizar os nomes das pessoas que estão com os pedidos prontos e também os nomes de quem o pedido está sendo preparado.

Tecnologias usadas

Front-end (interface):

• React
• Vite
• TypeScript
• Styled-Components

Back-end (servidor):

• NodeJS
• PostgreSQL
• TypeScript
• Swagger
• Render

Server

Ao rodar o projeto, a documentação da API estará disponível em: Acesse no seu navegador:

• Backend Docs

Como rodar o projeto

Para rodar o projeto ambos Front-end e Back-end devem estar rodando.

Como rodar o back-end

1. Clone o repositório do back-end:

   git clone https://github.com/vinisi12363/backend-devio

2. Instale as dependências:

   npm install

3. Crie o arquivo .env na raiz do projeto e insira as seguintes linhas:

   #database connection
   DATABASE_URL=postgres://zhsjjmhb:[email protected]/zhsjjmhb
   
   #production mode
   MODE=prod
   
   #server port access used by the front-end
   PORT=4080

4. Rode o projeto em modo de desenvolvimento:

   # development
   npm run dev
   

Como rodar o front-end

1. Clone o repositório do projeto:

   git clone https://github.com/vinisi12363/devio-frontend

2. Instale as dependências:

   npm install

3. Crie o arquivo .env na raiz do projeto e insira a seguinte linha:

   #The same url as the back-end
   VITE_APP_API_URL= https://devio-backend-challenge.onrender.com 

4. Rode o projeto em modo de desenvolvimento:

   npm run dev

5. Acesse o projeto em:

   http://localhost:5173/

6. Para gerar uma build do projeto:

   npm run build