Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/glauccoslima/efood
https://github.com/glauccoslima/efood
babel concurrency cypress eslint formik-yup html jest nodejs nodemon prettier pwa react react-redux react-router react-router-dom styled-components typescript
Last synced: 6 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/glauccoslima/efood
- Owner: glauccoslima
- Created: 2024-08-15T19:30:32.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-11-08T18:23:09.000Z (7 days ago)
- Last Synced: 2024-11-08T19:27:15.679Z (7 days ago)
- Topics: babel, concurrency, cypress, eslint, formik-yup, html, jest, nodejs, nodemon, prettier, pwa, react, react-redux, react-router, react-router-dom, styled-components, typescript
- Language: TypeScript
- Homepage: https://efood-two-flax.vercel.app
- Size: 3.22 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# efood š½ļø
Este projeto Ʃ um sistema de delivery interativo chamado **efood**, onde os usuƔrios podem explorar restaurantes, visualizar menus e fazer pedidos online.
š [**Visite o site!**](https://efood-two-flax.vercel.app/) š
## Ćndice
- [Sobre o Projeto](#sobre-o-projeto)
- [Funcionalidades](#funcionalidades)
- [Tecnologias Utilizadas](#tecnologias-utilizadas)
- [Como Executar o Projeto](#como-executar-o-projeto)
- [Componentes Principais](#componentes-principais)
- [Estrutura do Projeto](#estrutura-do-projeto)
## Sobre o Projeto
O objetivo deste projeto Ć© criar uma aplicaĆ§Ć£o web para pedidos online, permitindo que os usuĆ”rios explorem restaurantes, visualizem menus e faƧam pedidos de forma intuitiva e rĆ”pida. A aplicaĆ§Ć£o interage com uma API para obter informaƧƵes dos restaurantes e processar pedidos.
## Funcionalidades
- **ExploraĆ§Ć£o de Restaurantes**: Os usuĆ”rios podem visualizar uma lista de restaurantes disponĆveis.
- **VisualizaĆ§Ć£o de Menus**: Ć possĆvel ver o cardĆ”pio completo de cada restaurante, com descriĆ§Ć£o, fotos e preƧos.
- **AdiĆ§Ć£o ao Carrinho**: Os usuĆ”rios podem adicionar produtos ao carrinho de compras.
- **FinalizaĆ§Ć£o de Pedido**: A aplicaĆ§Ć£o permite que os usuĆ”rios finalizem seus pedidos, fornecendo informaƧƵes de entrega e pagamento.
- **IntegraĆ§Ć£o com API**: A aplicaĆ§Ć£o realiza chamadas a uma API para buscar informaƧƵes dos restaurantes e processar os pedidos.
## Tecnologias Utilizadas
- **React**: Biblioteca principal para construĆ§Ć£o da interface.
- **Redux Toolkit**: Gerenciamento de estado da aplicaĆ§Ć£o.
- **Styled-Components**: Para estilizaĆ§Ć£o dos componentes.
- **Formik & Yup**: Para gerenciamento de formulĆ”rios e validaĆ§Ć£o.
- **React-Router-DOM**: Para navegaĆ§Ć£o entre pĆ”ginas.
- **TypeScript**: Para tipagem estĆ”tica e melhor manutenĆ§Ć£o do cĆ³digo.
- **ESLint & Prettier**: Para garantir a qualidade do cĆ³digo.
- **Concurrently & Nodemon**: Para execuĆ§Ć£o e monitoramento de tarefas em desenvolvimento.
## Como Executar o Projeto
1. **Clone o repositĆ³rio:**
```bash
git clone https://github.com/glauccoslima/efood
```
2. **Navegue atĆ© o diretĆ³rio do projeto:**
```
cd efood
```
3. **Instale as dependĆŖncias:**
```
npm install
```
4. **Execute a aplicaĆ§Ć£o:**
```
npm run start
```
## Componentes Principais
### Cart
- ResponsƔvel por gerenciar o carrinho de compras.
- Permite ao usuƔrio adicionar e remover itens, alƩm de calcular o preƧo total.
### Checkout
- Gerencia o processo de finalizaĆ§Ć£o de pedido, incluindo a coleta de informaƧƵes de entrega e pagamento.
### Footer
- Exibe o rodapƩ com informaƧƵes adicionais e links para redes sociais.
### Header
- NavegaĆ§Ć£o principal da aplicaĆ§Ć£o, com link para a pĆ”gina inicial e o status do carrinho.
### Modal
- Exibe informaƧƵes detalhadas de produtos ou confirmaƧƵes.
## Estrutura do Projeto
- `src/components`: ContĆ©m os componentes reutilizĆ”veis da aplicaĆ§Ć£o.
- `src/pages`: ContĆ©m as pĆ”ginas principais da aplicaĆ§Ć£o.
- `src/store`: Gerenciamento de estado usando Redux Toolkit.
- `src/styles`: ContƩm os estilos globais e temas do projeto.
- `src/services`: IntegraĆ§Ć£o com APIs externas.
- `public`: ContĆ©m os arquivos pĆŗblicos e estĆ”ticos da aplicaĆ§Ć£o.
---
```plaintext
|-- .editorconfig
|-- .eslintrc.json
|-- .gitignore
|-- .prettierrc
|-- README.md
|-- package-lock.json
|-- package.json
|-- tsconfig.json
|-- public
| |-- favicon.svg
| |-- index.html
| |-- manifest.json
| |-- robots.txt
|-- src
|-- App.tsx
|-- index.tsx
|-- react-app-env.d.ts
|-- reportWebVitals.ts
|-- routes.tsx
|-- setupTests.ts
|-- styles.ts
|-- types.d.ts
|-- assets
| |-- images
| |-- barca-sushi-1.jpg
| |-- close.png
| |-- facebook.svg
| |-- garbage-icon.png
| |-- header.svg
| |-- hero.svg
| |-- hioki-sushi-big.png
| |-- hioki-sushi.png
| |-- instagram.svg
| |-- ladolcevita-big.png
| |-- ladolcevita-trattoria.png
| |-- logo.svg
| |-- marguerita-modal.png
| |-- pizza-marguerita.png
| |-- star.svg
| |-- temaki.jpg
| |-- twitter.svg
|-- components
| |-- Button
| | |-- index.tsx
| | |-- styles.ts
| |-- Cart
| | |-- index.tsx
| | |-- styles.ts
| |-- Checkout
| | |-- index.tsx
| | |-- styles.ts
| |-- Footer
| | |-- index.tsx
| | |-- styles.ts
| |-- Header
| | |-- index.tsx
| | |-- styles.ts
| |-- Hero
| | |-- index.tsx
| | |-- styles.ts
| |-- Loader
| | |-- index.tsx
| | |-- styles.ts
| |-- Modal
| | |-- index.tsx
| | |-- styles.ts
| |-- Presentation
| | |-- index.tsx
| | |-- styles.ts
| |-- Product
| | |-- index.tsx
| | |-- styles.ts
| |-- ProductsList
| | |-- index.tsx
| | |-- styles.ts
| |-- Restaurant
| | |-- index.tsx
| | |-- styles.ts
| |-- RestaurantsList
| | |-- index.tsx
| | |-- styles.ts
| |-- Tag
| |-- index.tsx
| |-- styles.ts
|-- pages
| |-- Home
| | |-- index.tsx
| |-- Perfil
| |-- index.tsx
|-- services
| |-- api.ts
|-- store
| |-- index.ts
| |-- reducers
| |-- cart.ts
| |-- checkout.ts
| |-- modal.ts
|-- utils
|-- index.ts
Este projeto foi desenvolvido para fornecer uma experiĆŖncia de compra fĆ”cil e intuitiva, garantindo a melhor usabilidade e performance para os usuĆ”rios.
```