.png?updatedAt=1746213311039)
O Foodly é um sistema de delivery desenvolvido com foco em agilidade e experiência do usuário. A aplicação possui uma interface moderna construída com React, Tailwind CSS e TypeScript no front-end, integrada a uma API robusta desenvolvida em Java com Spring Boot no back-end.
Confira a aplicação em funcionamento pode ser acessada por meio do seguinte link: Site Foodly
Já o back-end deste projeto pode ser encontrado no seguinte link: Foodly
- 💡 Conhecimentos Mobilizados
- 🏗️ Estrutura do Projeto
- 📂 Código Desenvolvido
- 🛠️ Tecnologias Utilizadas
- 🤝 Desenvolvedoras do Projeto
- Axios: Consumo de APIs REST de forma eficiente, com tratamento de respostas assíncronas.
- React: Criação de componentes reutilizáveis e responsivos para a construção da interface.
- Tailwind CSS: Estilização da aplicação com classes utilitárias, garantindo agilidade e responsividade.
- TypeScript: Aplicação da tipagem estática para maior segurança, legibilidade e escalabilidade do código.
- Vite: Ferramenta de build para aplicações React, proporcionando um ambiente de desenvolvimento ágil.
- Componentização: Separação de responsabilidades com componentes reutilizáveis e de fácil manutenção.
- Vercel: Plataforma utilizada para o deploy da aplicação, permitindo acesso rápido e gratuito à versão em produção.
- React Router DOM: Gerenciamento de rotas de maneira declarativa, permitindo navegação fluida entre páginas da aplicação.
foodly/
├── public/
│ ├── assets/
│ │ ├── fonts/
│ │ └── react.svg
│ └── index.html
├── src/
│ ├── assets/
│ ├── components/
│ │ ├── barradepesquisa/
│ │ │ └── BarraDePesquisa.tsx
│ │ ├── categories/
│ │ │ ├── atualizarcategoria/
│ │ │ │ ├── AtualizarCategoria.tsx
│ │ │ │ └── AtualizarCategoria.css
│ │ │ ├── cadastrarcategoria/
│ │ │ │ ├── CadastrarCategoria.tsx
│ │ │ │ └── CadastrarCategoria.css
│ │ │ ├── cardcategoria/
│ │ │ │ └── CardCategoria.tsx
│ │ │ ├── deletarcategoria/
│ │ │ │ └── DeletarCategoria.tsx
│ │ │ └── listacategoria/
│ │ │ └── ListaCategoria.tsx
│ │ ├── footer/
│ │ │ └── Footer.tsx
│ │ ├── navbar/
│ │ │ └── Navbar.tsx
│ │ ├── paginanaoencontrada/
│ │ │ └── NaoEncontrado.tsx
│ │ └── produtos/
│ │ ├── atualizarproduto/
│ │ │ ├── AtualizarProduto.tsx
│ │ │ └── AtualizarProduto.css
│ │ ├── cadastrarproduto/
│ │ │ ├── CadastrarProduto.tsx
│ │ │ └── CadastrarProduto.css
│ │ ├── cardproduto/
│ │ │ └── CardProduto.tsx
│ │ ├── deletarproduto/
│ │ │ └── DeletarProduto.tsx
│ │ ├── listaprodutos/
│ │ │ └── ListaProdutos.tsx
│ │ └── modalproduto/
│ │ ├── ModalProduto.tsx
│ │ └── ModalProduto.css
│ ├── contexts/
│ │ └── AuthContext.tsx
│ ├── models/
│ │ ├── Card.ts
│ │ ├── Categoria.ts
│ │ ├── Produto.ts
│ │ ├── Usuario.ts
│ │ └── UsuarioLogin.ts
│ ├── pages/
│ │ ├── cadastro/
│ │ │ ├── Cadastro.tsx
│ │ │ └── Cadastro.css
│ │ ├── home/
│ │ │ └── Home.tsx
│ │ ├── login/
│ │ │ ├── Login.tsx
│ │ │ └── Login.css
│ │ ├── perfil/
│ │ │ ├── atualizarperfil/
│ │ │ │ └── AtualizarPerfil.tsx
│ │ │ ├── deletarperfil/
│ │ │ │ └── DeletarPerfil.tsx
│ │ │ └── Perfil.tsx
│ │ └── sobre_nos/
│ │ └── SobreNos.tsx
│ ├── services/
│ │ └── Service.ts
│ ├── utils/
│ │ └── ToastAlerta.ts
│ ├── App.tsx
│ ├── App.css
│ ├── index.css
│ └── main.tsx
├── .gitignore
├── README.md
├── eslint.config.js
├── index.html
├── package.json
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── yarn.lock
App.tsx: Componente raiz da aplicação, responsável por definir as rotas e renderizar os principais elementos de interface.main.tsx: Ponto de entrada da aplicação, onde o React é inicializado e o componente App é injetado no DOM.index.csseApp.css: Arquivos de estilização global da aplicação, com configurações personalizadas e utilitários baseados em Tailwind CSS.vite.config.ts: Configuração do Vite como bundler, otimizando a performance e o ambiente de desenvolvimento.Navbar.tsxeFooter.tsx: Componentes fixos e reutilizáveis de cabeçalho e rodapé, presentes em todas as páginas da aplicação.BarraDePesquisa.tsx: Componente funcional de busca, que melhora a usabilidade permitindo ao usuário encontrar produtos com mais agilidade.CardCategoria.tsx,CadastrarCategoria.tsx,AtualizarCategoria.tsx,DeletarCategoria.tsx,ListaCategoria.tsx: Conjunto de componentes responsáveis pelas operações de CRUD de categorias, implementando boas práticas de modularidade.CardProduto.tsx,CadastrarProduto.tsx,AtualizarProduto.tsx,DeletarProduto.tsx,ListaProdutos.tsx,ModalProduto.tsx: Componentes voltados ao gerenciamento de produtos, com foco em interatividade, reatividade e responsividade.Home.tsx: Página inicial com destaque para os produtos e categorias.Login.tsxeCadastro.tsx: Telas de autenticação e registro de usuários.Perfil.tsx,AtualizarPerfil.tsx,DeletarPerfil.tsx: Funcionalidades relacionadas à visualização e gerenciamento do perfil do usuário.SobreNos.tsx: Página institucional com informações sobre o projeto.NaoEncontrado.tsx: Página de erro 404 personalizada.AuthContext.tsx: Contexto global para gerenciamento de autenticação e estado do usuário, utilizando a Context API do React.ToastAlerta.ts: Função utilitária para exibir mensagens de alerta e feedback ao usuário utilizando notificações.Categoria.ts, **Produto.ts**, **Usuario.ts**, **UsuarioLogin.ts**, **Card.ts`: Interfaces TypeScript que representam as entidades da aplicação, garantindo tipagem estática e segurança durante o desenvolvimento.Service.ts: Centralização das requisições HTTP feitas com Axios, promovendo reaproveitamento de código e melhor organização das chamadas à API.
- Linguagem: JavaScript (ES6+) e TypeScript
- Framework: React
- Roteamento: React Router DOM
- Estilização: Tailwind CSS
- Ferramenta de Build: Vite
- Gerenciador de Pacotes: npx
- Consumo de API: Axios
- Hospedagem: Vercel
Este projeto foi possível graças às contribuições das seguintes desenvolvedoras:
