My_MoMo

MoMo_app

This is a dashboard that displays mobile money (MoMo) transactions in a clean interactive interface. The app parses transaction data from an XML file using a Python-Flask backend, and visualizes the data with a modern React frontend.

Features

• Parses and loads MoMo transaction data from XML
• Displays individual transactions
• Categorizes spending (e.g., Incoming Money, Bank Deposits, Airtime Bill payments etc…)
• Data visualization using Chart.js
• Built with Flask, React, and SQLite

OVERVIEW

• User login

• Dashboard with :

1. Transaction table with all transactions made
2. visual representation of the transaction using a Pie Chart

• Custom Filters
  1. show transaction by their category and search option
  2. e.g: screenshot below shows incoming money from “Alex Doe” plus how much you spent on that particular transaction

How to Run

0. Requirements

Node.js, Python 3, Flask, and React

1. Clone the repository

use git clone https://github.com/username/My_MoMo

2. start the backend

run the following commands:

1. cd momo_parser/app
2. pip install flask flask-cors
3. python app.py

3. start the frontend

after running app.py from momo_parser open a new terminal and run commands:

1. cd momo-app
2. npm install
3. npm start
4. fill in credentials eg email: nkurunziza1@gmail.com password: myMOMOapp111

stack used

• Frontend: JSX (React), React router, CSS3, Axios, Chart.js
• Backend: Flask (Python), Flask-CORS, SQLite

Future improvements

1. Proper user authentication (JWT)
2. Frontend design with responsiveness for mobile
3. Connecting it to a real SMS portal

Deployments

(This project was deploy on github pages and Vercel, however do to technical issues, it’s not being hosted properly. working to resolve this issue soon and will update the links once the problem is resolved)

• GitHub Pages: https://ateten.github.io/My_MoMo/

• Vercel: https://my-mo-mo.vercel.app/

VIDEO SUBMISSION

on youtube: https://youtu.be/WaPYV8AMVKY