Wallet Wizard - Budget Setter/Tracker App

Welcome to Wallet Wizard, a web application that helps users manage their finances by providing tools to track income, expenses, and budgets. The project incorporates APIs, selectors, algorithms for modifying data, an object to store user data, localStorage, and more.

Wallet Wizard is a collaborative project developed by a team of Front End development course attendees. It serves as a budget setter and tracker application to help users manage their finances effectively. The app provides users with a seamless onboarding experience, allowing them to input essential information, set budgets, and visualize their financial data on the dashboard.

Getting Started

To access and get started with Wallet Wizard, follow one of the following methods:

A. Visit the Web Page

Visit the page at https://wallet-wizard.github.io/finance/.
Create a new user.
Since this is a "Front End app" that uses an API service, when redirected to the 'Dashboard', you will be asked to provide an API key before proceeding. Please create a free key from https://currencyapi.com/ and paste it in the prompt. You only have to do this once.

B. Clone the repository

Clone the repository.
Open the index.html file in the root folder to access the onboarding page.
In the ./assets/js/ folder, create a new JS file named apikey.js, and create a variable yourAPIkey that stores your currency API key.
Open index.html in your preferred browser to launch the app, and follow the on-screen instructions.

Note: This is a portfolio project and it does not follow security protocols for Registration and onboarding. Please make sure you remove such information from localStorage after use.

Features

Onboarding

Existing users are prompted to fill in their username and then are being redirected to their Dashboard.
New users receive a welcome message and are guided to complete the necessary details before they can access their Dashboard.

Dashboard

Visual representation of budgets, incomes, and expenses.
Ability to add and track expenses linked to specific budgets.
Overview of monthly income, expenses, and savings.
Recent transactions section for quick reference.

Budget Setting

Users can set budgets with customizable descriptions, amounts, and frequencies.
Budgets support different frequency options such as hourly, daily, weekly, bi-weekly, monthly, and yearly.
Expenses can be associated with specific budgets for accurate tracking.

Currency Exchange

Users can select a new currency for their financial data.
Currency exchange rates are dynamically updated.

File Structure

.

├── .gitignore
├── readme.md
├── index.html
├── assets
│   ├── css
│   │   ├── welcome.css
│   │   ├── main.css
│   ├── html
│   │   ├── main.html
│   ├── js
│   │   ├── apikey.js (untracked)
│   │   ├── api-welcome.js
│   │   ├── api-main.js
│   │   ├── welcome.js
│   │   ├── main.js
└── README.md

Motivations

API Integration: Wallet Wizard integrates APIs to provide users with real-time currency exchange rates and enhance the accuracy of financial data.
User Interface Design: The project focuses on creating an intuitive and visually appealing user interface. Bootstrap is used for styling, ensuring responsiveness and a clean design.
Data Management: Wallet Wizard employs algorithms for modifying and updating user data dynamically. This includes adding and removing income sources and budgets.

What Was Done

User Onboarding: The application guides new users through the onboarding process, collecting essential information to set up their financial profile. All user info is stored in a well-thought object that is then stringified and stored in localStorage.

const exampleUserData = {
    "test4": {
        "basicInfo": {
            "name": "Dimitris",
            "lastName": "Giannoulis",
            "username": "test4"
        },
        "preferences": {
            "country": "United Kingdom",
            "currency": "GBP"
        },
        "income": [
            {
                "desc": "FA",
                "amount": "2000",
                "freq": "5"
            },
            {
                "desc": "Freelance Web Dev",
                "amount": "200",
                "freq": "3"
            }
        ],
        "budgets": [
            {
                "desc": "Expenses",
                "amount": "1000",
                "freq": "5",
                "over": "no",
                "currentAmount": 230.52
            },
            {
                "desc": "Groceries",
                "amount": "40",
                "freq": "3",
                "over": "no",
                "currentAmount": 43.34
            },
            {
                "desc": "Transport",
                "amount": "160",
                "freq": "5",
                "over": "yes",
                "currentAmount": 172.55
            },
            {
                "desc": "Other",
                "amount": "200",
                "freq": "5",
                "over": "no",
                "currentAmount": 160.22
            },
            {
                "desc": "Savings",
                "amount": "200",
                "freq": "5",
                "over": "no",
                "currentAmount": 30
            }
        ]
    },
    // Add more users as needed
};

Dynamic Sections: Wallet Wizard features dynamic sections for income and budgets, allowing users to add or remove sources and categories as needed.
Currency Exchange: Users can exchange their currency, and the application provides real-time exchange rates for different currency options.

Problems Addressed

New User Onboarding: The project addresses the challenge of guiding new users through the onboarding process, providing a welcoming experience.
Dynamic UI Updates: Wallet Wizard ensures that the user interface dynamically updates to reflect changes in income, expenses, and budgets.
Currency Exchange Rates: The application fetches real-time currency exchange rates, ensuring accurate financial calculations.

Insights Gained

Developing Wallet Wizard provided valuable insights and skills:

API Interaction: Enhancing skills in making API requests and handling responses, particularly for currency exchange rates.
User Interface Design: Deepening knowledge of creating visually appealing and responsive user interfaces using Bootstrap.
Data Management Algorithms: Implementing algorithms for dynamically updating and modifying user data based on user interactions.
LocalStorage Usage: Leveraging localStorage for persistently storing user data and ensuring a seamless user experience across sessions.

Credits

This project was developed by Ahmed Abshir (@syntaxError-23), Dimitris Giannoulis (@jimmygian), and Eleni Giannopoulos (@EleniMG). The GitHub repository is available at Wallet Wizard Repository.