O front-end web, criado para o do Cine Drive-in de Brasília, permite que os usuários visualizem o cardápio disponível e façam pedidos de forma prática e intuitiva. Através dessa aplicação, os clientes podem navegar pelos itens oferecidos, adicionar produtos ao carrinho e finalizar seu pedido. Essa aplicação é focada em uma navegação Mobile.
Features • Demonstração da Aplicação • Pré-requisitos • Rodando a aplicação • Metodologia • Tecnologias
- Visualização do Cardápio
- Navegação por Categorias
- Adição ao Carrinho
- Atualização de Quantidades
- Remoção de Itens
- Resumo do Pedido
- Confirmação de Pedido
- Responsividade
- Feedback Visual
- Visualização de Pedidos Recentes
Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js e um editor de código como VSCode
Além disto é necessário ter o back-end rodando: Link Back-end e alterar o link de requisição da api no caminho src/services/api.ts
# Clone este repositório
$ git clone https://github.com/leoFagundes/cine-drivein-web.git
# Acesse a pasta do projeto no terminal/cmd
$ cd cine-drivein-web
# Esse projeto utiliza a versão 18.18.0 do Node.js. Garanta que você tenha o NVM instalado e utilize o comando abaixo para usar a versão correta:
$ nvm install 18.18.0
$ nvm use 18.18.0
# Instale as dependências
$ npm install
# Execute a aplicação
$ npm start
# O servidor inciará na porta:3000 - acesse <http://localhost:3000>Este projeto utiliza a metodologia Atomic Design para organizar e estruturar os componentes da interface. O Atomic Design é uma metodologia que divide os componentes em cinco níveis distintos, que são átomos, moléculas, organismos, templates e páginas. Cada nível representa uma abstração diferente e ajuda na construção de componentes reutilizáveis e escaláveis.
- Átomos: São os elementos de interface mais básicos, como botões, inputs e ícones.
- Moléculas: São combinações de átomos que formam componentes mais complexos, como um campo de formulário.
- Organismos: São componentes compostos por moléculas e/ou átomos e representam partes de uma interface mais completa, como um formulário completo.
- Templates: São estruturas que organizam os organismos em uma página, definindo a disposição e o layout.
- Páginas: São instâncias específicas de templates, onde são definidos os dados e conteúdos específicos.
O uso do Atomic Design neste projeto proporciona uma melhor organização e manutenção do código, facilitando a criação de novos componentes e a reutilização de código já existente.
As seguintes ferramentas foram usadas na construção do projeto:
Além das tecnologias mencionadas anteriormente, este projeto também fez uso das seguintes ferramentas:
