https://github.com/emersonpenelli/efood
Plataforma de divulgação de restaurantes com React, TypeScript, Redux e Styled-components
https://github.com/emersonpenelli/efood
Last synced: about 1 month ago
JSON representation
Plataforma de divulgação de restaurantes com React, TypeScript, Redux e Styled-components
- Host: GitHub
- URL: https://github.com/emersonpenelli/efood
- Owner: EmersonPenelli
- Created: 2024-08-20T03:37:09.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-09-04T15:35:23.000Z (10 months ago)
- Last Synced: 2025-05-04T08:54:21.805Z (about 1 month ago)
- Language: TypeScript
- Homepage: https://efood-beta-nine.vercel.app/
- Size: 7.22 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🏆 eFood
## ✔️ Tecnologias Utilizadas
## 📎 Sumario
- 📌 Resumo do Projeto
- 🛠️ Como executar o projeto
- ⭐ Desafio do Projeto
- 📂 Temas abordados
- 🙋🏻♂️ Autor
- 💻 Licença
## 📌 Resumo do Projeto
Este projeto é um desafio do curso engenheiro front-end da EBAC, cujo objetivo é reproduzir o layout disponibilizado no figma e todas as funcionalidades e requisitos que o desafio pede. As tecnologias e forma como serão construidas fica a cargo do desenvolvedor. Para este projeto foi utilizado React + TypeScript + Styled-components.
## 🛠️ Como executar o projeto
Para executar este projeto localmente em sua máquina, siga estas etapas:
- Certifique-se de ter o Node.js instalado em sua máquina.
- Clone este repositório em sua máquina local usando o comando `git clone`.
- Instale as dependências do projeto executando `npm install` no diretório do projeto.
- Execute o comando `npm start` para rodar o projeto.
## ⭐ Desafio do Projeto
### 1º Etapa
- Utilizar como base o layout disponível no link do [Figma](https://www.figma.com/file/JjduV2Tg713TzYUUsees8b/efood?type=design&node-id=0-1&mode=design&t=fWWekknoLsPfkJ5n-0);
- Criar um novo projeto React;
- Utilizar como biblioteca o Styled Component para estilização;
- Utilizar como biblioteca o React Router para a navegação entre páginas;
- Criar um novo repositório para o projeto;
- Subir as alterações no repositório;
- Criar um projeto na Vercel;
### 2º Etapa
- Utilizar como base o layout disponível no link do [Figma](https://www.figma.com/file/JjduV2Tg713TzYUUsees8b/efood?type=design&node-id=0-1&mode=design&t=fWWekknoLsPfkJ5n-0);
- Criar a modal utilizada ao clicar em comprar o produto e preencher o conteúdo do site por AJAX utilizando essa API https://fake-api-tau.vercel.app/api/efood/restaurantes
- Suba as alterações no repositório.
- Faça um novo deploy
### 3º Etapa
- Utilizar como base o layout disponível no link do [Figma](https://www.figma.com/file/JjduV2Tg713TzYUUsees8b/efood?type=design&node-id=0-1&mode=design&t=fWWekknoLsPfkJ5n-0);
- Crie a página do carrinho e também faça a dinâmica do preenchimento do carrinho através do Redux;
- No carrinho o valor da compra deverá ser a soma do preço dos produtos;
- Suba as alterações no repositório.
- Faça um novo deploy na Vercel, na plataforma da EBAC nos envie o link do projeto publicado.
### 4º Etapa
- Crie a página de entrega do pedido;
- Ao clicar em concluir, faça um POST para esta rota;
- Crie a tela de confirmação do pedido;
- Depois que a API responder, exiba a tela de confirmação do pedido preenchendo os dados com as informações que API responder;
- Atualize o repositório do projeto com as alterações;
- Faça um novo deploy na Vercel;
## 📂 Temas abordados
- `TypeScript`: Este projeto utiliza TypeScript, uma extensão tipada de JavaScript, para trazer um nível adicional de segurança e previsibilidade ao código. O TypeScript permite a detecção precoce de erros e fornece autocompletar melhorado no editor de código, tornando o desenvolvimento mais eficiente e menos propenso a erros.
- `React`: O React é usado neste projeto para construir a interface do usuário. O React permite a criação de componentes reutilizáveis, tornando o código mais limpo e fácil de manter. Além disso, o React facilita a criação de interfaces de usuário interativas e dinâmicas.
- `Styled Components`: Styled Components é uma biblioteca para estilizar componentes React. Neste projeto, Styled Components é usado para escrever CSS em JavaScript, permitindo que os estilos sejam dinâmicos e baseados em props. Isso também ajuda a manter os estilos encapsulados no componente, evitando conflitos de estilo e tornando o código mais limpo.
## 🙋🏻♂️ Autor
| [
Emerson Penelli](https://github.com/EmersonPenelli) |
| :--------------------------------------------------------------------------------------------------------------------------------------------: |