Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/phelipeg/coffee-app-web

O Coffee Delivery nada mais é que um carrinho de compras de café, contendo página de opções e seleção de pedidos, página de finalização do pedido, e por fim uma página com as informações de entrega. Tudo nesta aplicação é salvo de forma local.
https://github.com/phelipeg/coffee-app-web

localstorage polished react react-hook-form react-hooks typescript vite zod zod-validation zustand zustand-persist

Last synced: about 15 hours ago
JSON representation

O Coffee Delivery nada mais é que um carrinho de compras de café, contendo página de opções e seleção de pedidos, página de finalização do pedido, e por fim uma página com as informações de entrega. Tudo nesta aplicação é salvo de forma local.

Awesome Lists containing this project

README 

        
# Coffee Delivery Web :rocket:





  Logo Coffee Delivery

  Coffee Delivery




---



## Visão Geral :eyes:



O projeto é um ecommerce on-line de cafés com a opção de delivery, onde o usuário adiciona ao carrinho de compras um ou mais dos produtos disponíveis e solicita a compra preenchendo o formulário com o endereço de entrega.



A aplicação foi desenvolvida com React(ViteJs) + Typescript e como desafio do módulo 2 do bootcamp Ignite - 2022. Neste projeto foi aplicado diversos conhecimentos visto no módulo como: Context API, layout default, rotas, formulários com React-Hook-Form, hooks (useState e useEffect), fui um pouco além e utilizei para gerenciamento de dados o Zustand e aperfeicoei os fundamentos básicos da ferramenta como por exemplo a componentização.



---



### Pré-requisitos



Antes de baixar o projeto você vai precisar ter instalado na sua máquina as seguintes ferramentas:



- [Git](https://git-scm.com)

- [NodeJS](https://nodejs.org/en/)

- [Yarn](https://yarnpkg.com/) ou [NPM](https://www.npmjs.com/)



Além disto é bom ter um editor para trabalhar com o código como [VSCode](https://code.visualstudio.com/)



## Funcionalidades :white_check_mark:



- **Interface Responsiva**: Layout adaptável para dispositivos móveis, tablets e desktops.

- **Experiência de Usuário Otimizada**: Interações intuitivas e animações suaves.

- **Acessibilidade**: Conformidade com as diretrizes WCAG para garantir inclusão e facilidade de uso.

- **Componentes Reutilizáveis**: Código modularizado para facilitar manutenção e escalabilidade.



---



## Capturas de Tela :camera:



### Tela Inicial



![Tela Inicial](https://github.com/user-attachments/assets/3fe60f6e-a9aa-41da-a2d3-b05b53b86dd8 "Tela Inicial da Aplicação")



### Página de Detalhes



![Página de Detalhes](https://github.com/user-attachments/assets/97a4827b-8fe6-4fce-8fae-30ca0f7cd798 "Página de Detalhes da Aplicação")



---



## Tecnologias Utilizadas :wrench:



- **Vite**

- **Styled-Components**

- **JavaScript (ES6+)**

- **Typescript**

- **PhosporIcons**

- **ReactJs**

- **Zustand**

- **React Router**

- **Polished**

- **Zod**

- **Gerenciador de Dependencias - PNPM**

- **Webpack & Babel** _(para build e compatibilidade)_



---



## O que Aprendi :mortar_board:



Durante o desenvolvimento deste projeto, tive a oportunidade de aprofundar meus conhecimentos e aprender novas abordagens, tais como:



- **Design Responsivo**: Aprimorei minhas habilidades em criar layouts que se adaptam a diferentes dispositivos e tamanhos de tela.

- **Melhores Práticas de Componentização**: Estruturei o código de forma modular, facilitando a manutenção e a escalabilidade.

- **Otimização de Performance**: Aprendi técnicas para otimizar o carregamento e a renderização da aplicação, resultando em uma experiência de usuário mais fluida.

- **Gerenciamento de Dados**: Aprendi técnicas para gerenciamento de dados por toda a aplicacao usando Zustand e LocalStorage onde o persist salva esses dados no mesmo.

- **Acessibilidade Web**: Apliquei diretrizes para tornar a aplicação mais inclusiva e amigável para todos os usuários.



---



## Roadmap :dart:



- [x] **Versão Inicial**: Estruturação do projeto e configuração do ambiente.

- [x] **Implementação da Interface**: Desenvolvimento do layout responsivo e componentes reutilizáveis.

- [x] **Otimizações Finais**: Melhoria na performance e ajustes finais de usabilidade.

- [] **Implementar Testes**: Falta implementar testes.



---



## Contribuições :handshake:



Contribuições são muito bem-vindas! Se você deseja melhorar o projeto ou propor novas funcionalidades, siga estes passos:



1. **Fork** o repositório.

2. Crie uma **branch** com sua feature: `git checkout -b minha-feature`

3. Faça as alterações necessárias e **commit**: `git commit -m 'Adiciona nova feature'`

4. Envie para a **branch**: `git push origin minha-feature`

5. Abra um **Pull Request** explicando suas alterações.



---



## Documentação :books:



Para facilitar a compreensão e manutenção do projeto, toda a documentação está disponível:



- [Figma Project]()

- [Zustand Reference](https://zustand-demo.pmnd.rs/)



---



## Licença :scroll:



Este projeto está licenciado sob a [MIT](LICENSE).



---



## Agradecimentos :clap:



Gostaria de agradecer a todos que contribuíram para este projeto, especialmente:



- **Mentores e Colegas**: Por suas valiosas dicas e suporte durante o desenvolvimento.

- **Comunidade Open Source**: Pela inspiração e pelas ferramentas incríveis que tornam este projeto possível.



---



## Como Executar o Projeto :computer:



1. **Clone o Repositório:**



   ```bash

   git clone https://github.com/PhelipeG/coffee-app-web.git

   cd coffee-app-web

   pnpm install

   pnpm run dev

   ```