ExpensesManager_CaCPython_24155G8_Front

Family expenses manager

Despliegue Online Netlify

Pruebame online / Click to try me online

Table of contents

• Description
• Technologies
• Install
• Usage
• Contributing
• License
• Questions
• Deploy

🟦 Description

Our expense tracker family app provides a seamless solution for managing expenses effortlessly.

1. Functionality: The app enables users to track expenses, upload receipts, and monitor their financial evolution through a dashboard.

2. Styling: Bootstrap is utilized for styling, providing a visually appealing and responsive design across various devices.

3. Method Used (CDN): Vue.js, Vue Router, and Chartjs are incorporated into the app using Content Delivery Network (CDN) for efficient loading and performance.

4. Main Features:

   🔷 Expenses - Expense Tracking:

   • Users can easily input and categorize expenses, keeping a detailed record of their spending habits.

   🔴 Expenses - Receipt Upload: (TO BE ADDED)

   • The app allows users to upload pictures of receipts, enhancing accuracy and organization.

   🟢 Expenses - Form Validation: (ADDED)

   • There is a validation for name different from empty and also number must be higher than 0. If so will display an error message.

   🔷 Dashboard: (DISPLAY RANDOM DATA)

   • Users can visualize their financial data through an intuitive dashboard, providing insights into spending patterns and trends.
     • gastos: gastos generados aleatoriamente para un mes.
     • categorias: contiene las categorías de gastos posibles.
     • gastosFiltrados: los gastos filtrados por categoría.
     • computed: propiedad llamada ultimosGastos, devuelve los últimos 10 gastos, ya sea por categoría o todos si no hay ningún filtro aplicado.
     • methods: métodos de la aplicación:
       • filtrarPorCategoria(categoria): gastos por categoría seleccionada y actualizaion de los gráficos.
       • filtrarGastosPorCategoria(gastos, categoria): filtrar los gastos por categoría.
       • actualizarGraficos(): Actualiza los gráficos con los datos actualizados.
       • calcularGastosPorCategoria(): gastos totales por cada categoría.
       • mounted(): se llama al método actualizarGraficos() para inicializar los gráficos, se utilizan las bibliotecas Chart.js para renderizar los gráficos en los elementos canvas correspondientes. El gráfico de barras muestra los gastos por categoría, mientras que el gráfico de líneas muestra la evolución de los gastos a lo largo del tiempo.

   🔶 User Authentication: (FUNCTIONALITY TO BE ADDED)

   • A registration and login system ensures secure access to personalized accounts, enhancing privacy and data protection.

   🔶 Profile Management: (TO BE ADDED)

   • Users can manage their personal information and preferences within the app, ensuring a tailored experience.

   🔷 Contact: (ADDED)

   • This section displays an iframe map from the Google Maps.

   🔷 Theme Mode Control: (ADDED)

   • The app offers theme mode control, allowing users to customize the appearance based on their preferences for enhanced user experience.

   🔷 Responsive Design: (ADDED)

   • With responsiveness built-in, the app adapts seamlessly to different screen sizes and devices, ensuring accessibility for all users.

   🔷 Burger Menu: (ADDED)

   • A burger menu is incorporated for iproved navigation on smaller screens, enhancing usability and convenience.

Overall, the app combines robust functionality, user-friendly design, and seamless accessibility to provide an efficient and enjoyable expense tracking experience for families.

🟦 Technologies

🟦 Install

• Download the project

🟦 Usage

• run app.js on Live Server

🟦 Contributing

Currently working on this project

• Clone the repository
• Create a new branch
• Commit your changes
• Push your changes
• Submit a pull request

🟦 License

MIT License

🟦 Questions

If you have any questions about the project, please contact me via linkedin or GitHub

🟦 Deploy