CreativeWallet

CreativeWallet is the final stage of a multi-paradigm budgeting app, now built in PHP with a custom MVC framework.

Table of contents

• Overview
  • Stages
  • About
  • How it works
  • Additional features
• Architecture
  • Custom Framework
  • Database design
  • Screenshots
• My process
  • Built with
  • Useful resources

Overview

Stages

Stages of building a budget application:

1. PersonalBudget - Console app written in C++:

   • Structured paradigm: View project
   • Object-oriented paradigm: View project

2. CreativeWallet – Web app written in PHP:

   • Frontend only: View project
   • Frontend + Backend (structured paradigm): View project
   • Frontend + Backend (OOP with custom MVC framework): this repository

---

About

CreativeWallet is a web application and a modern (more complex) version of the original PersonalBudget app written in C++.
It allows users to keep track of expenses and incomes, with data stored in a MySQL database.

---

How it works

1. Create a user account and sign in.
2. Add incomes or expenses using today's date or a selected backdate.
3. View balances for:
   • the current month,
   • the previous month,
   • or any custom time period.

The app calculates:

• total incomes,
• total expenses,
• and the balance (incomes – expenses).

---

Additional features

• 📋 Tabular summaries of incomes and expenses by category.
• 📊 A pie chart showing expenses in a selected time period.
• 🛠️ Add/edit/delete categories and payment methods.
• 💸 Set monthly limits on expense categories.
• 🔐 Change password.
• 🧹 Delete your account along with all related transactions.

---

Architecture

Custom Framework

CreativeWallet is divided into two components: the application and a custom MVC framework.

• The application component includes project-specific code that is tightly coupled to this project.
• The framework component contains reusable tools designed to be portable and flexible.

This project uses the MVC (Model-View-Controller) design pattern to separate concerns and organize code effectively:

• Model – handles database logic.
• View – manages templates and UI rendering (HTML).
• Controller – contains the logic that connects user input with the model and view.

Tools included in the framework:

• Router - for mapping URLs to controllers.
• Validator - for input validation.
• Database - abstraction layer for DB access (PDO-based).
• Template Engine - for generating dynamic HTML.
• Container – for dependency injection and object management.

The App class inside the framework component is like a glue for the available tools and utilizes every tools.

---

Database design

📄 View DB project (PDF)

---

Screenshots

Home page

Sign up form

Sign in form

New income form

Frontend and backend form validation

New expense form with limit info

Balance sheet – view expenses and incomes by category for a selected time period

Balance sheet - income/expense list + pie chart

Transaction settings – category/payment method management

Transaction settings – expense limit activation

User account settings

Mobile view

My process

Built with

Frontend:

• Bootstrap
• HTML, CSS
• JavaScript, jQuery
• JavaScript chart library

Backend:

• OOP PHP
• Design patterns: MVC, Singleton, Factory, Dependency Injection
• Reflective programming (ReflectionClass)
• SQL queries
• Custom Exceptions
• Composer & Packagist
• Development environment - XAMPP (MySQL, Apache, phpMyAdmin)

---

Useful resources

• https://www.udemy.com/course/complete-modern-php-developer/
• https://www.php.net/manual/en/
• https://getcomposer.org/
• https://regex101.com/
• https://json-ld.org/
• https://mariadb.com/
• https://www.php-fig.org/psr/
• https://miroslawzelent.pl/kurs-php/
• https://miroslawzelent.pl/kurs-mysql/
• https://miroslawzelent.pl/kurs-bootstrap/
• https://getbootstrap.com
• https://www.php.net
• https://canvasjs.com/
• https://www.geeksforgeeks.org
• https://stackoverflow.com
• https://jquery.com/