Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nachasilva/expense-control

Application that helps you organize and have a better control of your finances.
https://github.com/nachasilva/expense-control

css vue3 vuejs

Last synced: 15 days ago
JSON representation

Application that helps you organize and have a better control of your finances.

Awesome Lists containing this project

README 

        
# Expense-control app



## Índice



* [1. Descripción del Proyecto](#1-descripcion-del-proyecto)

* [2. Características](#2-caracteristicas)

* [3. Tecnologías utilizadas](#3-tecnologías-utilizadas)

* [4. Instrucciones de uso](#4-instrucciones-de-uso)

* [5. Contribuciones](#5-contribuciones)

* [6. Contacto](#6-contacto)



## 1. Descripción del Proyecto



El objetivo de este proyecto es desarrollar una aplicación responsiva que permita a los usuarios gestionar sus finanzas de manera sencilla e intuitiva. La app facilita acciones como crear, editar y eliminar gastos, así como definir presupuestos, filtrar por categorías (Ahorro, Comida, Salud, Ocio, Suscripciones, entre otras), y consultar el saldo disponible y los gastos realizados. Además, ofrece una visualización clara y amigable de los datos, tanto en su totalidad como según filtros personalizados, apoyándose en gráficos que representen los porcentajes de gasto para una comprensión rápida y efectiva.



![imagen] (./src/assets/img/home.png)

![imagen] (./src/assets/img/gastos.png)



## 2. Características



* Crear presupuesto: Define el monto total que tienes disponible para gastar de manera fácil y rápida.



* Registrar gasto: Personaliza tus registros asignándoles una categoría específica para mayor organización.



* Visualización: Consulta tu presupuesto y gastos en tiempo real con gráficos interactivos que muestran el porcentaje gastado en relación al presupuesto y el saldo disponible de forma clara.



* Editar: Actualiza cualquier campo para mantener tu información al día.



* Filtrar: Explora tus gastos por categoría para un análisis detallado y enfocado.



* Eliminar: Borra los registros de gastos que ya no necesites con un solo clic.



* Límites y alertas: Recibe notificaciones si superas tu presupuesto, intentas ingresar un gasto que lo excede, o si faltan datos en el formulario. Estas alertas aseguran que mantengas un control preciso y optimices tus finanzas.



* Almacenamiento: la aplicación guarda la informaciòn automaticamente por lo que el usuario no tiene que preocuparse de perder la data registrada.



## 3. Tecnologías utilizadas



 * Vue.js: La interfaz de usuario está construida utilizando con el framework Vue.js, lo que permite crear componentes reutilizables y una experiencia de usuario fluida.



 * Javascript: Lenguaje de programación. 



 * CSS: Estilos y diseño de la aplicación.



 * Librería: vue3-circle-progress para la creación de gráficos



 * Figma: Creación e ideación de prototipo de baja y alta calidad.



 * Responsive: Media query para ser adaptativo a mobile, tablet, laptop y desktop size.



 * Trello: Para la organización de tareas y optimización de tiempo.



 * Netlify: Para desplegar la aplicación



## 4. Instrucciones de uso

1. Clona este repositorio.

2. Abre una terminal y navega hasta el directorio del proyecto.

3. Ejecuta npm install para instalar las dependencias.

4. Ejecuta npm run dev para iniciar la aplicación en tu navegador.

5. Interactúa con la aplicación!



## 5. Contribuciones

¡Las contribuciones son bienvenidas! Si deseas contribuir a este proyecto, sigue estos pasos:



1. Realiza un fork de este repositorio.

2. Crea una rama con una descripción clara de la función que estás implementando.

3. Desarrolla y prueba tu función.

4. Realiza un pull request describiendo tus cambios.



Como tip: Agregar funcionalidad de descargar la data en formato Excel u otro documento.



## 6. Contacto



- [x] Si tienes alguna pregunta o sugerencia, no dudes en ponerte en contacto conmigo! [Aquí](https://www.linkedin.com/in/mariaignaciasilva/)