Skip to content

Latest commit

 

History

History
278 lines (171 loc) · 15.7 KB

README.md

File metadata and controls

278 lines (171 loc) · 15.7 KB
Raw

iBirita

Bem-vindo(a) ao iBirita, um aplicativo de delivery de bebidas completo e fácil de usar! Com o iBirita, você pode escolher entre uma grande variedade de bebidas e recebê-las diretamente na sua porta.

O iBirita foi desenvolvido por uma equipe de 5 pessoas dedicadas a fornecer a melhor experiência de compra online para seus usuários. Utilizando tecnologias modernas, o aplicativo inclui telas de login e cadastro para seus clientes, vendedores e administradores, bem como uma seleção de produtos, checkout e rastreamento de pedidos.

Além de ser uma opção conveniente para dispositivos móveis, o iBirita também pode ser usado em PCs. Isso permite que você faça seus pedidos diretamente do seu computador, sem precisar alternar entre diferentes dispositivos. Compatibilidade com dispositivos móveis e desktop é uma das nossas principais prioridades, garantindo que você possa acessar e utilizar o iBirita de qualquer lugar e em qualquer dispositivo.

Com o iBirita, nunca foi tão fácil pedir uma bebida. Experimente agora mesmo!


Rotas

O aplicativo possui as seguintes rotas:

  • / - Rota raiz da aplicação, redireciona o usuário para a página de login.

  • /login - Rota para o login do usuário. A página de login apresenta um formulário de login onde o usuário deve inserir seu e-mail e senha para acessar a plataforma.

  • /register - Rota para o registro de novos usuários. A página de registro apresenta um formulário de cadastro onde o usuário deve inserir informações como nome, e-mail, senha e endereço.

  • /customer/products - Rota para a lista de produtos disponíveis para compra pelos clientes. A página apresenta uma lista de produtos com suas respectivas informações como nome, preço, descrição e imagem. O usuário pode adicionar os produtos ao carrinho de compras.

  • /customer/checkout - Rota para o carrinho de compras e finalização de pedidos. A página apresenta os produtos adicionados ao carrinho de compras pelo usuário, onde é possível visualizar os detalhes dos produtos e finalizar o pedido.

  • /customer/orders - Rota para a lista de pedidos realizados pelo cliente. A página apresenta uma lista de todos os pedidos realizados pelo usuário, onde é possível visualizar as informações sobre o pedido e seu status.

  • /customer/orders/:id - Rota para os detalhes de um pedido específico. A página apresenta todas as informações sobre um pedido específico, incluindo informações do produto, preço, quantidade, endereço de entrega e status do pedido.

  • /seller/orders - Rota para a lista de pedidos realizados pelos clientes e que aguardam atendimento pelo vendedor. A página apresenta uma lista de todos os pedidos que ainda não foram atendidos pelo vendedor, onde é possível visualizar as informações sobre o pedido e seu status.

  • /seller/orders/:id - Rota para os detalhes de um pedido específico que aguarda atendimento pelo vendedor. A página apresenta todas as informações sobre um pedido específico, incluindo informações do produto, preço, quantidade, endereço de entrega e status do pedido.

  • /admin/manage - Rota para a página de gerenciamento da plataforma pelo administrador. A página apresenta diversas funcionalidades como gerenciamento de produtos, gerenciamento de usuários, entre outros.

  • * - Rota para o tratamento de rotas não encontradas. Quando o usuário tenta acessar uma rota que não existe, ele é redirecionado para esta rota, apresentando uma mensagem informando que a rota não foi encontrada.


Context API

O ContextAPI é uma das funcionalidades do React que permite compartilhar dados entre componentes sem precisar passar props manualmente em cada nível da árvore de componentes. Vantagens do ContextAPI:

  • Reduz a necessidade de passar props manualmente em cada nível da árvore de componentes, tornando o código mais limpo e fácil de ler.
  • Permite compartilhar dados em toda a árvore de componentes sem precisar se preocupar com a hierarquia dos componentes.
  • Facilita a criação de temas personalizados, permitindo que os componentes tenham acesso a um tema global sem a necessidade de passá-lo manualmente em cada componente.
  • Ajuda a manter o estado da aplicação em um único lugar, tornando mais fácil a manipulação e a atualização dos dados.
  • Permite o uso de múltiplos contextos em uma única aplicação, tornando a organização e a estruturação da aplicação mais flexíveis.
  • Melhora a performance da aplicação, uma vez que reduz a necessidade de atualizar vários componentes ao mesmo tempo.

Arquitetura de Software MSC

Optamos por utilizar a arquitetura MSC. que é uma estrutura de design de software que divide um aplicativo em três componentes principais: Model, Service e Controller.

  • Model: A camada Model é a representação de um objeto no banco de dados, com seus atributos e relacionamentos. Ela lida com a leitura e escrita de dados no banco de dados e fornece uma interface para manipular esses dados.

  • Service: A camada service é responsável por implementar a lógica de negócios do aplicativo. Ela geralmente encapsula uma ou mais operações do modelo e fornece uma camada adicional de abstração para o controller.

  • Controller: A camada controller é responsável por lidar com as requisições HTTP e coordenar as interações entre os modelos e os serviços. Ela recebe as solicitações do usuário e decide qual serviço ou modelo deve ser usado para lidar com essa solicitação.

Ao usar a arquitetura MSC, a lógica de negócios é separada da camada de apresentação e da camada de armazenamento de dados, o que torna o código mais modular e escalável. Além disso, a separação de responsabilidades torna mais fácil testar cada componente separadamente.

Aqui estão alguns benefícios da arquitetura MSC:

  • Organização: Com a divisão clara de responsabilidades, é mais fácil para os desenvolvedores entenderem e manterem o código.

  • Escalabilidade: Como cada componente é independente, é possível escalar o aplicativo de forma granular, sem precisar escalá-lo como um todo.

  • Reutilização de código: Como os serviços encapsulam a lógica de negócios, é possível reutilizar o mesmo serviço em várias partes do aplicativo.

  • Testabilidade: Como cada componente é independente, é mais fácil escrever testes automatizados para cada componente.


Testes

Foram realizados testes automatizados durante o desenvolvimento da aplicação para garantir seu correto funcionamento e evitar possíveis erros no código. Foram implementados testes de integração e testes unitários tanto no front-end quanto no back-end.

No front-end, os testes foram escritos utilizando a biblioteca React Testing Library em conjunto com o framework Jest. Os testes unitários verificam a funcionalidade de cada componente individualmente, enquanto os testes de integração testam o comportamento de múltiplos componentes em conjunto. Isso garante que a interface do usuário esteja funcionando corretamente, independentemente de qualquer mudança no código.

No back-end, foram implementados testes de unidade utilizando a biblioteca Mocha, o framework de asserção Chai e a biblioteca de simulação Sinon. Além disso, foram realizados testes de integração para garantir que os diferentes componentes do servidor estejam interagindo corretamente.

A utilização de testes automatizados permite uma maior confiabilidade e segurança na aplicação, garantindo que ela continue funcionando corretamente mesmo após alterações no código.


Segurança

A segurança é uma preocupação primordial em nosso aplicativo. Utilizamos várias técnicas e tecnologias para garantir que nosso sistema seja seguro e confiável.

Uma das tecnologias que usamos para garantir a segurança é o JWT (JSON WEB TOKEN), que é uma maneira segura de transmitir informações entre dois ou mais sistemas de forma criptografada. Isso garante que apenas as partes autorizadas possam acessar as informações transmitidas.

Além disso, utilizamos o MD-5, que é um algoritmo de hash criptográfico, para proteger as senhas de nossos usuários. O MD-5 é um algoritmo robusto e comprovadamente seguro para uso em senhas.

Outra maneira pela qual garantimos a segurança é através da arquitetura de nosso software. Nossos sistemas são construídos com uma arquitetura modular e escalável, o que significa que podemos isolar e proteger cada componente do sistema de forma independente. Isso nos permite detectar e corrigir vulnerabilidades de segurança de forma mais rápida e eficiente.


Estilização

No aplicativo iBirita, utilizamos três ferramentas para estilizar a aplicação web: Tailwind, Material UI e CSS. O Tailwind é um framework CSS utilitário que nos permite criar estilos customizados rapidamente, enquanto o Material UI é um conjunto de componentes React pré-construídos que seguem as diretrizes de design do Google. Além disso, o CSS nativo foi utilizado em alguns casos para complementar o estilo dos componentes.

Utilizamos Tailwind principalmente para estilizar os componentes criados do zero, enquanto Material UI foi utilizado para os campos de input e botões que utilizamos na aplicação. Ambos foram customizados para atender às necessidades de design e experiência do usuário específicas do projeto.

No geral, a combinação dessas ferramentas nos permitiu criar uma interface web responsiva, atraente e funcional.



INSTALAÇÃO DO APLICATIVO iBIRITA

Instalação


  • Clone o repositório git@github.com:Rafael-Souza-97/ibirita-delivery-app.git:
git clone git@github.com:Rafael-Souza-97/ibirita-delivery-app.git

  • Entre na pasta do repositório que você acabou de clonar:
cd ibirita-delivery-app

  • Instale as depëndencias, caso necessário, com npm install:
npm install
  • Instale as depëndencias do Front-end e Back-end, com npm run dev:prestart:
npm run dev:prestart

Executando a aplicação:

  • Execute a aplicação com com npm start na raiz do projeto:

Executará a aplicação em modo de desenvolvimento.

npm start

Abra http://localhost:3000 no seu navegador para visualiza-lo.


Testando a aplicação:

  • Execute os testes com npm test:

Executará os testes unitários e testes de integração.

npm test

Contribuição

Contribuições são sempre bem-vindas! Para contribuir com o projeto, siga as instruções abaixo:

  • Fork este repositório

Crie uma nova branch com sua feature ou correção de bug:

git checkout -b sua-feature-ou-correcao
  • Faça as alterações necessárias e commit as mudanças:
git commit -m "sua mensagem de commit"
  • Envie suas alterações para seu repositório remoto:
git push origin sua-feature-ou-correcao
  • Crie um Pull Request para o repositório original.

Equipe

Referências

Tecnologias e Ferramentas

Estilização

Testes

  • Framework de teste de unidade: Jest
  • Biblioteca de teste de componentes React: React Testing Library
  • Framework de teste de unidade: Mocha
  • Biblioteca de assertividade para teste de unidade: Chai
  • Biblioteca de espiões, stubs e mocks para testes: Sinon

Deploy

Este projeto foi implantado em três serviços diferentes: Vercel para o front-end, Render para o back-end e Railway para o banco de dados.

  • Front-end: O front-end foi implantado no Vercel. Você pode acessar o link do site aqui: iBirit@

  • Back-end: O back-end foi implantado no Render.

  • Banco de dados: O banco de dados foi implantado no Railway.


Preview

ibirita-cliente.mp4