• Tecnologias
• Layout
• Funcionalidades
• Estrutura do banco de dados
• Como executar
• Como contribuir
• Autor
• Licença
WAITERAPP é um software de gerenciamento de pedidos para restaurantes!
Nele, o garçom pode anotar os pedidos pelo app e enviar para o dashboard web. O dashboard web foi dividido em 3 colunas: 🕒 Fila de espera, 👨🍳 Em produção e ✅ Pronto!
O projeto foi desenvolvido inteiramente em Typescript durante o evento O Poder do JS, pelo Mateus Silva.
Tecnologias e ferramentas utilizadas no desenvolvimento do projeto:
Website ( ReactJS + TypeScript )
Mobile ( React Native + TypeScript )
API ( NodeJS + TypeScript )
- Banco de dados: MongoDb
- Protótipo: Figma → Protótipo (WaiterApp)
- Editor: Visual Studio Code → Extensions: Prettier + EditorConfig
- Fontes: General Sans
- Versionamento: Git
- Padronização de código: ESLint
Os layouts do app estão disponíveis no Figma: https://www.figma.com/file/dm7tP9X81c5loLur8Z3Y91/WAITERAPP
Afim de manter uma dinâmica e uma conexão em tempo real entre as interfaces, realizamos a comunicação entre o dashboard web e a api utilizando web-socket.
O Web socket permite uma comunicação em duplo sentido entre o front-end e o back-end. De tal maneira que, deixamos o front-end "ouvindo" um determinado canal de comunicação. E quando realizamos uma alteração no back-end, ele retorna uma comunicação nesse canal que o front-end está "ouvindo".
E a partir disso, o front-end executa uma ação, que no nosso caso, é atualizar os dados que estão sendo exibidos em tela.
Este projeto é divido em três partes:
- Backend (pasta api)
- Frontend Web (pasta fe)
- Frontend Mobile (pasta app)
💡 O Frontend precisa que o Backend esteja sendo executado para funcionar.
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;
Para executar o banco de dados MongoDb, foi utilizado a aplicação do MongoDB Community, mas existem outras alternativas como o Docker container
# Clone este repositório
$ git clone https://github.com/vitorrsousaa/WaiterApp.git
# Vá para a pasta da aplicação Front End
$ cd api
# Instale as dependências
yarn install
# Rode a aplicação
yarn start
# A aplicação será aberta na porta:3001 - acesse http://localhost:3001# Clone este repositório
$ git clone https://github.com/vitorrsousaa/WaiterApp.git
# Vá para a pasta da aplicação Front End
$ cd client
# Instale as dependências
yarn install
# Rode a aplicação
yarn start
# A aplicação será aberta na porta:5173 - acesse http://localhost:5173# Clone este repositório
$ git clone https://github.com/vitorrsousaa/WaiterApp.git
# Vá para a pasta da aplicação Front End
$ cd app
# Instale as dependências
yarn install
# Rode a aplicação
yarn start
# A aplicação será visualizado através do [Expo](https://expo.dev/) em um dispositivo físico ou emulador (Android ou iOS)Caso queira contribuir, seja corrigindo bugs, adicionando comentários ou novas features, você pode seguir o seguinte tutorial:
- Faça um fork desse repositório
- Clone o repositório que você fez o fork em seu computador
- Crie uma branch com a sua feature:
git checkout -b minha-alteracao - Envie suas alterações para a staging area:
git add . - Faça um commit contando o que você fez:
git commit -m "feat: minha nova alteracao!" - Faça um push para a sua branch:
git push origin minha-alteracao - Agora é só abrir uma pull request!
Caso tenha alguma dúvida, confira este guia de como contribuir no GitHub :)
Esse projeto está sob a licença MIT. Consulte LICENSE para mais informações.
Linkedin: https://www.linkedin.com/in/vitorr-sousaa/
Desenvolvido por Vitor Sousa 👋🏻🧑