https://github.com/samuelmsilva2v/webfinancas
Aplicação front-end desenvolvida em Angular para gerenciamento de despesas, integrando com uma API REST.
https://github.com/samuelmsilva2v/webfinancas
angular bootstrap front-end
Last synced: 3 months ago
JSON representation
Aplicação front-end desenvolvida em Angular para gerenciamento de despesas, integrando com uma API REST.
- Host: GitHub
- URL: https://github.com/samuelmsilva2v/webfinancas
- Owner: samuelmsilva2v
- Created: 2024-09-07T19:32:17.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-15T18:24:34.000Z (over 1 year ago)
- Last Synced: 2025-03-15T18:25:54.481Z (over 1 year ago)
- Topics: angular, bootstrap, front-end
- Language: TypeScript
- Homepage:
- Size: 158 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Controle de Finanças Web
[🇺🇸 Read in English](#financial-control-web)
💸 Este é um projeto de front-end desenvolvido com **Angular**. O objetivo do projeto é desenvolver uma aplicação para controle de finanças, controle de receitas, despesas, categorias de transações e o saldo total de um usuário .
## Funcionalidades
A API de Controle de Finanças oferece as seguintes funcionalidades:
- **Cadastrar, atualizar e remover contas a pagar**: Cadastre novas contas a serem pagas com nome, valor, data e categoria.
- **Cadastrar, atualizar e remover dinheiro a receber**: Cadastre novas entradas de dinheiro com nome, valor, data e categoria.
- **Controle de categorias**: Cada despesa pode ser associada a uma categoria (ex: Alimentação, Lazer, Transporte, etc.).
## Endpoints
### Endpoints de contas
| Método | Endpoint | Descrição |
|--------|--------------------|--------------------------|
| POST | `/api/contas` | Registra uma nova conta |
| GET | `/api/contas` | Consulta todas as contas |
| GET | `/api/contas/{id}` | Detalha uma conta por ID |
| PUT | `/api/contas/{id}` | Atualiza uma conta |
| DELETE | `/api/contas/{id}` | Remove uma conta |
### Endpoints de categorias
| Método | Endpoint | Descrição |
|--------|------------------------|------------------------------|
| POST | `/api/categorias` | Registra uma nova categoria |
| GET | `/api/categorias` | Consulta todas as categorias |
| GET | `/api/categorias/{id}` | Detalha uma categoria por ID |
| PUT | `/api/categorias/{id}` | Atualiza uma categoria |
| DELETE | `/api/categorias/{id}` | Remove uma categoria |
## Tecnologias Utilizadas:
* Java 17
* Spring Boot
* Spring Data JPA
* Hibernate
* PostgreSQL
* Swagger
* Lombok
* Model Mapper
* Bean Validation (javax.validation)
* Docker
#### Front-end:
* Angular 19
* Bootstrap
* HttpClient
## Instalação:
#### **1. Clonar o Repositório do Back-end**
```bash
git clone https://github.com/samuelmsilva2v/apiFinancas.git
cd apiFinancas
```
#### **2. Execute o comando abaixo para criar a imagem Docker:**
```bash
docker build -t apifinancas .
```
##### Executando o container
```bash
docker-compose up -d
```
Acesse a documentação no Swagger: http://localhost:8082/swagger-ui/index.html#
**3. Clonar o Repositório do Front-end**
```bash
git clone https://github.com/samuelmsilva2v/webFinancas.git
cd webFinancas
```
**4. Instale as dependências do projeto:**
```bash
npm install
```
**5. Executar o front-end:**
```bash
$ ng s -o
```
Isso irá iniciar o servidor de desenvolvimento na URL http://localhost:4200/. Você pode abrir seu navegador e acessar essa URL para visualizar a aplicação.
### API rodando integrada com o front-end
#### [Repositório do back-end](https://github.com/samuelmsilva2v/apiFinancas)
---
# Financial Control Web
[🇧🇷 Leia em Português](#controle-de-finanças-web)
💸 This is a front-end project developed with **Angular**. The goal of the project is to develop an application for financial management, including tracking income, expenses, transaction categories, and the total balance of a user.
## Features
The Financial Control API offers the following features:
- **Add, update, and remove payable accounts**: Register new accounts payable with name, amount, date, and category.
- **Add, update, and remove receivable funds**: Register new income entries with name, amount, date, and category.
- **Category management**: Each expense can be associated with a category (e.g., Food, Leisure, Transportation, etc.).
## Endpoints
### Account Endpoints
| Method | Endpoint | Description |
|--------|-----------------------|-------------------------------|
| POST | `/api/contas` | Registers a new account |
| GET | `/api/contas` | Retrieves all accounts |
| GET | `/api/contas/{id}` | Retrieves account details by ID |
| PUT | `/api/contas/{id}` | Updates an account |
| DELETE | `/api/contas/{id}` | Deletes an account |
### Category Endpoints
| Method | Endpoint | Description |
|--------|-----------------------|-------------------------------|
| POST | `/api/categorias` | Registers a new category |
| GET | `/api/categorias` | Retrieves all categories |
| GET | `/api/categorias/{id}`| Retrieves category details by ID |
| PUT | `/api/categorias/{id}`| Updates a category |
| DELETE | `/api/categorias/{id}`| Deletes a category |
## Technologies Used:
#### Back-end:
* Java 17
* Spring Boot
* Spring Data JPA
* Hibernate
* PostgreSQL
* Swagger
* Lombok
* Model Mapper
* Bean Validation (javax.validation
* Docker
#### Front-end:
* Angular 19
* Bootstrap
* HttpClient
## Installation:
#### **1. Clone the Back-end Repository**
```bash
git clone https://github.com/samuelmsilva2v/apiFinancas.git
cd apiFinancas
```
#### **2. Run the command below to create the Docker image:**
```bash
docker build -t apifinancas
```
##### Running the Container
```bash
docker-compose up -d
```
Access the Swagger documentation: http://localhost:8082/swagger-ui/index.html#
**3. Clone the Front-end Repository**
```bash
git clone https://github.com/samuelmsilva2v/webFinancas.git
cd webFinancas
```
**4. Install the project dependencies:**
```bash
npm install
```
**5. Run the front-end:**
```bash
ng s -o
```
This will start the development server at URL http://localhost:4200/. You can open your browser and access this URL to view the application.
### API Running Integrated with the Front-End
#### [Back-end Repository](https://github.com/samuelmsilva2v/apiFinancas)