CASE STUDY

Banking App

Role:

Frontend lead & UI/UX designer (2-person team)

Tech Stack:

JavaScript, React, CSS, Git, GitHub

Project Overview:

A React-powered banking dashboard built during Avion School’s cohort. It lets users log in, add or remove accounts, deposit, withdraw, and transfer money, alongside a partner-built budget tracker.

Goals:

Demonstrate full-feature banking UI with robust state management, clean code structure, and collaborative Git workflows.

Development Process:

I led the UI/UX design and built core banking features in React with plain CSS. Authentication and data handling were simulated using mock data. We used GitHub for code review and merge conflict resolution.

Challenges:

Since I was working with a partner, we needed to avoid file merge conflicts and maintain consistent UI/UX throughout the project.

Solution:

I led the planning of our GitHub commit strategy by organizing the React files into separate folders for each of us. This allowed us to push only the files or folders we modified, minimizing merge conflicts. We only encountered conflicts when my partner used Material-UI while I didn’t, so I installed Material-UI on my system to ensure compatibility. Additionally, I led the UI/UX design, keeping it as simple and clear as possible so my partner could follow it easily. We also had a few CSS ID naming conflicts, which I resolved by renaming my CSS IDs.

Outcome:

Delivered a polished, fully functional banking interface and budget tracker, showcasing both solo and collaborative frontend skills in a real-world style project.

Contributions:

Led the frontend architecture and visual design, implemented login, user management, account CRUD, deposit/withdraw/transfer flows, and oversaw GitHub workflow, reviewing PRs and resolving merge conflicts while my partner built the budget-tracker module.

Learnings:

Enhanced my skills in React component design, CSS layout techniques, Git collaboration, and user-centered form validation.

Completed:

April 2025