Nomba Expense - manage business expenses with ease

Nomba Expense is a comprehensive business financial management solution designed to streamline how organizations handle bill requests, approvals, and disbursements. Built to operate directly from a user's Nomba wallet, the application tackles the chaos of manual expense tracking by digitizing the entire lifecycle of a payment request; from initiation to final disbursement.

The goal was to build a robust, scalable frontend architecture that could handle complex approval logic, provide real-time financial insights, and integrate seamlessly with external accounting software.

MakerStudio Inc. hired me to bring this vision to life as part of a specialized, high-impact team of four: a Team Lead (Full Stack), a Backend Engineer, and two Frontend Engineers (including myself).

We operated with a high degree of autonomy and shared ownership. While we tackled the core development equally, we divided our focus during the optimization phase to leverage our individual strengths:

🎨 My Focus - Design Thinking & UX Polish: I championed the user experience, utilizing my design thinking background to refine interactions and eliminate "jank." I smoothed out UI transitions and polished key workflows to ensure the app didn't just work, but felt delightful to use.

⚡ Performance & Architecture: My frontend partner focused on deep performance optimizations and code cleanups, ensuring our shared codebase remained performant under heavy loads.

To meet the requirements of a high-performance fintech application, we selected a modern, type-safe stack focused on scalability and user experience.

⚡ Core Framework: Next.js 13.4 (React 18) – Chosen for its server-side rendering capabilities and the new App Router.

📘 Language: TypeScript – Essential for maintaining code quality across complex data structures like transaction objects.

💅 Styling: Stitches & Radix UI – Allowed us to build accessible primitives styled with a zero-runtime CSS-in-JS solution.

🎭 Interactions: Framer Motion & Lottie – I utilized these libraries to create fluid micro-interactions and engaging empty states, making the financial data feel less sterile.

📝 Form Management: React Hook Form & Yup – Handled complex validation logic for multi-step onboarding flows.

One of the most technically challenging aspects was the Workflow Engine. Businesses need custom rules for spending; for example, a request over ₦500,000 might require specific approval.

I implemented a flexible workflow builder that allows users to create logic-based approval chains. This involved handling deeply nested state objects to define rules, conditions, and assigned approvers.

Data is only useful if it's understandable. I built a dedicated Reports Module utilizing ApexCharts to aggregate transaction data into visual insights. Users can filter data by date ranges and view breakdowns by budget categories or tags.

To reduce churn, I developed an interactive Setup Guide. This feature tracks the user's progress through critical actions - like "Create Integration" or "Add Team Member" - visualizing completion with a radial progress indicator

I built the frontend interface for connecting third-party accounting platforms like Xero, QuickBooks, and Sage. This allows users to sync expense data automatically, removing the need for manual entry.

Leveraging my background in design thinking, I focused heavily on the "feel" of the application. I conducted reviews of key interactions to ensure they weren't just functional, but fluid. This involved:

Refining Transitions: Using Framer Motion to smooth out layout shifts when opening modals or switching dashboard tabs.

Engaging States: Implementing Lottie animations for loading states and empty screens (like the "Empty Requests" view) to keep users engaged even when there is no data to show.

By leveraging Radix UI, I ensured that all interactive components - modals, dropdowns, and switchers- were fully accessible (WCAG compliant) and keyboard navigable, ensuring the platform is usable by everyone in a diverse corporate environment.

Nomba Expense stands as a robust solution in the Nigerian fintech space. Working with MakerStudio Inc allowed me to not only tackle complex architectural challenges but also apply a design-centric lens to fintech development, resulting in a product that is as delightful to use as it is powerful.