ExpensesManager_CaCPython_24155G8_Front

Family expenses manager

Despliegue Online Netlify

Pruebame online / Click to try me online

Table of contents

• Description
• Technologies
• Screenshoots
• 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)

   • Form Validation: There is a validation for name different from empty and also number must be higher than 0. If so will display an error message.
   • Update: Form managed by built-in form detection provided by Netlify this feature simplifies the process of adding and managing forms. This eliminates the need for extra API calls or additional JavaScript. Once enabled, Netlify's build system automatically parses your HTML at deploy time, so there's no need for you to make an API call or include extra JavaScript on your site. The data provided by form is accessible on Netlify and can be exported to CSV.
   • Redirect Success: After Form submission there will be a redirect to a success page that displays a random picture on the background (there are 5).

   🔷 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 Registration: (FUNCTIONALITY TO BE ADDED)

   • Form + Validation: Validation for name different from empty and mail must content '@' and '.com'. If not will display an error message.
   • A registration system ensures secure access to personalized accounts, enhancing privacy and data protection.

   🔶 User Authentication: (FUNCTIONALITY TO BE ADDED)

   • A 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.
   • Form + Validation: There is a validation for name different from empty and mail must content '@' and '.com'. If not will display an error message.
   • Update: Form managed by built-in form detection provided by Netlify this feature simplifies the process of adding and managing forms. This eliminates the need for extra API calls or additional JavaScript. Once enabled, Netlify's build system automatically parses your HTML at deploy time, so there's no need for you to make an API call or include extra JavaScript on your site. The data provided by form is accessible on Netlify and can be exported to CSV.
   • Redirect Success: After Form submission there will be a redirect to a success page that displays a random picture on the background (there are 5).

   🍉🍉🍉 EXTRAS 🍉🍉🍉

   🟢 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.

   🟢 Error Route: (ADDED)

   • Case the user access a route that does not exist the ErrorPage component will be displayed which background is also a random image among 5 options.

   🟢 Netlify Automatic Form Detection & Notificaction: (ADDED)

   • Case the user submit form in "Expenses" or "Contact" page Netlify will automatically receive and store plus a notification by mail will be sent to owner of site.

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

🟦 Technologies

🟦 Screenshoots

🟦 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