Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/renanfachin/rs_foodexplorer
Projeto de conclusão do programa EXPLORER da rockeseat
https://github.com/renanfachin/rs_foodexplorer
javascript reactjs styled-components
Last synced: about 1 month ago
JSON representation
Projeto de conclusão do programa EXPLORER da rockeseat
- Host: GitHub
- URL: https://github.com/renanfachin/rs_foodexplorer
- Owner: RenanFachin
- Created: 2022-09-02T13:43:05.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-10-08T22:35:02.000Z (over 2 years ago)
- Last Synced: 2024-04-19T09:56:14.918Z (9 months ago)
- Topics: javascript, reactjs, styled-components
- Language: JavaScript
- Homepage: https://foodexplorer182.netlify.app/
- Size: 11.4 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Back-end: https://github.com/RenanFachin/FoodExplorer_BackEnd
Site funcionando: https://foodexplorer182.netlify.app/
# FOOD EXPLORER
Aplicação de um cardápio digital para um restaurante fictício, conhecido como FoodExplorer.
O projeto será divido em duas partes: `Front-end` e `Back-end`
Desenvolvido em:
## 🎯 Critérios obrigatórios do projeto
- [x] Um projeto estruturado, com uma boa organização das pastas, divisão de componentes no front-end, etc.
- [x] Um arquivo README.md com as especificações sobre como executar o projeto em um ambiente dev.
- [x] Os usuários deverão se autenticar para entrar na aplicação através da tela de login, você pode aplicar o que aprendeu nas aulas de autenticação JWT. A autenticação deve ser validada com senha.
- [x] O admin irá fazer upload de imagens para cadastrar os pratos.
- [x] Fazer o deploy da aplicação
- [x] Aplicar conceitos de Clean Code
- [x] Os dados do admin, do restaurante e dos usuários serão armazenados em um banco de dados.
- [x] Possibilidade de fazer uma busca pelo nome do prato, pelos ingredientes ou por prato favorito
- [x] Consumir uma API própria
- [] Aplicação responsiva
- [x] Aplicar algumas animações, transições e transformações
- [x] Atender ao modelo proposto pelo Figma
## 🎯 Critérios opcionais do projeto
- [ ] O usuário poderá incluir itens no carrinho, clicando no botão incluir. Já a quantidade é controlada pelos botões “-” e “+”;
- [ ] Ao clicar no botão meu pedido, o usuário será redirecionado para uma tela onde irá ver o seu pedido, a soma e os métodos de pagamento;
- [ ] O usuário poderá excluir um prato do carrinho e o valor total do pedido deve ser atualizado automaticamente;
- [ ] O usuário poderá marcar um prato como favorito, basta clicar no coração que aparece ao lado de cada um;
- [ ] O admin irá visualizar e controlar o status de cada pedido, por um campo do tipo select. Os pedidos irão aparecer em uma tabela ao clicar em Pedidos;
- [ ] Já que o projeto está em dark mode, você pode aplicar a versão light mode;
## 🎯 Incrementos adicionais propostos por mim
- [x] Criar página de profile para usuário com as opções de trocar dados de nome, email, foto de avatar e senha. Além de poder acessar informações (histórico de pedidos, pratos favoritos e fale conosco);
- [x] Criar página de profile para adm com opções de trocar dados da conta (nome, email, foto de avatar e senha). Além de poder acessar página de criação de prato, edição de prato e deletar pratos;
- [x] Criar uma página de não autorizado (error 401) para que usuários não possam acessar páginas da administração (add, edit e delete dish)
- [x] Validações de email válido mais complexo, validações de password (tamanho da senha) e se todos os campos estão preenchidos
### 📘 Ferramentas/Bibliotecas utilizadas
- Biblioteca para criação de interfaces: `reactJS`
- Setup para criar o projeto no React: `ViteJS`
- CSS-in-JS: `Styled-components`
- Biblioteca de ícones: `react-icons`
- Lib de navegação do projeto: `react-router-dom`
## Instalação
```bash
# Faça o clone do repotório
git clone [email protected]:RenanFachin/RS_FoodExplorer.git
# Acessar a pasta do projeto pelo terminal
cd RS_FoodExplorer
# Faça a instalação das depêndencias
npm i
# Executando o projeto no ambiente de desenvolvimento
npm run dev
```
```bash
# Perfil do adminstrador
usuário: [email protected]
senha: 123456
```
## ✔️ Autores
- [Renan Fachin](https://github.com/RenanFachin/)
## 📄 Referência
- [Rockeseat](https://www.rocketseat.com.br/)