Aplicação web desenvolvida em React para o gerenciamento de orçamentos de projetos. Crie projetos, defina um orçamento e adicione serviços, controlando os custos de forma simples e eficaz.
- Criar Projetos: Cadastre novos projetos com nome, orçamento total e categoria.
- Listar e Visualizar: Veja todos os seus projetos em um layout de cards.
- Editar e Excluir: Gerencie seus projetos, podendo atualizá-los ou removê-los.
- Adicionar Serviços: Dentro de um projeto, adicione serviços com nome, custo e descrição.
- Controle de Orçamento: O sistema valida se o custo de um novo serviço não ultrapassa o orçamento restante do projeto.
- Layout Responsivo: Interface adaptável para diferentes tamanhos de tela.
- ReactJS: Biblioteca para construção da interface de usuário.
- React Router Dom: Para gerenciamento das rotas da aplicação.
- React Hooks: (
useState,useEffect) para gerenciamento de estado e ciclo de vida dos componentes. - JSON Server: Para simular uma API RESTful completa para o frontend.
- CSS Modules: Para estilização dos componentes de forma escopada.
Para rodar este projeto, você precisará ter o Node.js e o Git instalados em sua máquina.
-
Clone o repositório:
git clone https://github.com/EdsonAkaves/projeto-costs-reactjs
-
Acesse o diretório do projeto:
cd nome-do-repositorio -
Instale as dependências do projeto:
npm install
-
Inicie a API com o JSON Server: O projeto utiliza o
json-serverpara simular o backend. Execute o comando abaixo em um terminal para iniciar o servidor na porta 5000.npm run backend
(Observação: Você talvez precise adicionar o script
"backend": "json-server --watch db.json --port 5000"ao seu arquivopackage.json) -
Inicie a aplicação React: Em outro terminal, execute o comando para iniciar o servidor de desenvolvimento do React.
npm start
-
Abra seu navegador e acesse
http://localhost:3000para ver a aplicação.
| Página de Projetos | Criando um Novo Projeto |
|---|---|
 |
 |
| Detalhes do Projeto | Adicionando um Serviço |
|---|---|
 |
 |