https://github.com/eubrunolima/costs_project
Aplicação React para controle de projetos e custos. Permite cadastrar, editar e gerenciar projetos, serviços e orçamento de forma prática
https://github.com/eubrunolima/costs_project
horadecodar html-css-javascript reactjs website
Last synced: 29 days ago
JSON representation
Aplicação React para controle de projetos e custos. Permite cadastrar, editar e gerenciar projetos, serviços e orçamento de forma prática
- Host: GitHub
- URL: https://github.com/eubrunolima/costs_project
- Owner: euBrunoLima
- License: mit
- Created: 2025-07-11T15:32:19.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-07-11T18:46:48.000Z (11 months ago)
- Last Synced: 2025-07-11T20:34:11.186Z (11 months ago)
- Topics: horadecodar, html-css-javascript, reactjs, website
- Language: JavaScript
- Homepage:
- Size: 251 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 💰 Costs
Costs é uma aplicação web desenvolvida com React para o gerenciamento de projetos e seus respectivos serviços. A plataforma permite criar e editar projetos, adicionar serviços, controlar o orçamento e visualizar detalhes de cada projeto de forma simples e eficiente.
## 🚀 Funcionalidades
✅ Cadastro de projetos com nome, orçamento e categoria
➕ Adição, edição e remoção de serviços em cada projeto
💸 Controle do orçamento total e dos custos individuais dos serviços
📢 Exibição de mensagens de feedback para ações do usuário
📱 Interface responsiva, moderna e intuitiva
📄 Páginas de contato e informações sobre a empresa
## 🎞️ Preview do Projeto
## 📁 Estrutura de Pastas
```
src/
App.jsx
index.js
index.css
components/
layout/
NavBar.jsx
Footer.jsx
Container.jsx
Message.jsx
Loading.jsx
LinkButton.jsx
pages/
Home.jsx
Projects.jsx
Project.jsx
NewProject.jsx
Contact.jsx
Comapany.jsx
projects/
ProjectCard.jsx
ProjectForm.jsx
services/
ServiceCard.jsx
ServiceForm.jsx
form/
Input.jsx
Select.jsx
SubmitButton.jsx
TextArea.jsx
img/
...
public/
index.html
db.json
```
## 📦 Scripts Disponíveis
- `npm start` — Inicia o app em modo desenvolvimento ([http://localhost:3000](http://localhost:3000))
- `npm run build` — Gera o build de produção na pasta `build`
- `npm test` — Executa os testes
- `npm run backend` — Inicia o backend fake com JSON Server ([http://localhost:5000](http://localhost:5000))
## 🔧 Backend Fake
O projeto utiliza o [JSON Server](https://github.com/typicode/json-server) para simular uma API REST. Os dados estão em [`db.json`](db.json).
Para iniciar o backend:
```sh
npm run backend
```
## ▶️ Como Rodar o Projeto
1. Instale as dependências:
```sh
npm install
```
2. Inicie o backend fake:
```sh
npm run backend
```
3. Inicie o frontend:
```sh
npm start
```
## 🛠️ Tecnologias Utilizadas
- React
- React Router DOM
- React Icons
- JSON Server
## 📄 Licença
Este projeto está licenciado sob a licença [MIT](https://opensource.org/licenses/MIT).
## ✏️ Customizações e Melhorias Pessoais
Este projeto foi originalmente desenvolvido durante o curso do professor Matheus Battisti, do canal Hora de Codar, como base para estudos em React.
Após a conclusão do conteúdo principal, realizei diversas melhorias e extensões por conta própria, incluindo:
✅ Continuação e finalização das páginas Contact e Company
🔧 Criação de uma nova rota no JSON Server para armazenar os dados do formulário da página de contato
🧩 Desenvolvimento de novos componentes e atualização dos componentes existentes
✏️ Adição da funcionalidade de edição de serviços, com suporte a modal personalizado
📱 Implementação de responsividade completa, garantindo que o site funcione bem em mobile e desktop
Essas customizações foram feitas com foco em praticar conceitos avançados de React, componentização, organização de código e integração com API fake.
## Links úteis