Personal Engineering Project / Full-Stack Web
EarnTracker
A full-stack earnings-management application built with Next.js and C# Web API.
Full-Stack Developer · Personal project
Live deployment
EarnTracker is a full-stack financial tracking application I developed using Next.js for the frontend and C# Web API for the backend.
The application is designed to help freelancers and independent earners bring their income, fees, payment information, and financial goals into one organized experience.
Through this project, I have worked on building data-driven interfaces, integrating frontend workflows with backend services, and handling financial information in a clear and structured way.
- Next.js
- C#
- C# Web API
At a glance
Engineering focus
Full-Stack Architecture
Next.js frontend and C# Web API backend.
Financial Data
Income, fees, and net-earnings presentation for independent work.
Payment Integration
Development and testing workflows described by the public application.
Data Visualization
Dashboard information and financial-goal progress presentation.
01 / Context
Project overview
I developed EarnTracker around a practical problem: people earning money from multiple sources can find it difficult to maintain a clear picture of how much they actually earn.
The application is designed to bring income information, associated fees, and financial goals into a more organized interface.
I built the user-facing application with Next.js and used C# Web API for backend functionality. Working on EarnTracker gave me the opportunity to develop a full-stack application that combines financial data, interactive dashboards, API communication, and user-focused design.
Project objectives
My objective was to build a maintainable financial tracking application that makes earnings information easier to understand. I focused on several goals:
- Create an intuitive interface for viewing income and earnings.
- Organize financial information from multiple income sources.
- Present the relationship between incoming payments, fees, and net earnings.
- Provide an understandable view of financial goals and progress.
- Integrate the Next.js frontend with a C# Web API.
- Support safe development and testing of payment-related workflows.
- Keep financial data presentation clear, structured, and responsive.
- Design maintainable components that could support further improvements.
02 / Ownership
My Role and Contributions
As the developer of EarnTracker, I worked on both its frontend and backend components.
- Built the frontend using Next.js.
- Developed backend functionality using C# Web API.
- Connected application interfaces with backend endpoints.
- Worked on income-related dashboard interfaces.
- Worked with financial data representation and application workflows.
- Worked on financial-goal features.
- Worked on payment-related development workflows.
- Handled frontend states and backend responses.
- Debugged application behaviour and integration issues.
- Improved interface organization and usability.
03 / Technical approach
Architecture and technical approach
I structured EarnTracker around a Next.js frontend and a C# Web API backend. The frontend provides the interactive experience for viewing income information, financial summaries, and application workflows.
The backend supports application services and processing of relevant financial information. I used API communication to connect the frontend with server-side functionality, organizing the application around these responsibilities.
I also worked on payment-related development workflows, where separating test operations from real financial activity was an important consideration. The available project material did not verify a database, ORM, authentication library, or payment-processing architecture, so I do not make claims about those implementation details.
Next.js Frontend
Application views, forms, dashboard components, and user interactions.
C# Web API
Backend services, request handling, and application logic.
Financial Data
Income, fees, summaries, and goals as presented by the product.
Payment Testing
Publicly described demo and provider test flows; integrations were not independently exercised.
04 / Trade-offs
Implementation decisions
One of my key decisions was to separate the frontend experience from the backend services. This helped me organize the application's financial data handling independently from how information is displayed to users.
I focused on presenting financial information in a way that is understandable without requiring users to interpret unnecessarily complicated data.
Another important consideration involved payment-related development. I worked with development and demonstration workflows rather than treating test payments as real financial activity. This helped me think critically about application structure, user trust, and predictable financial-data behaviour.
05 / Problem solving
Engineering challenges and solutions
Organizing Financial Information
Challenge
Financial information can become difficult to interpret when income, fees, and payment sources are spread across different records.
My approach
I approached this by organizing the application's data presentation around clearer summaries and relevant financial details. This helped me improve how information is structured and communicated within the interface.
Frontend and Backend Integration
Challenge
Connecting a Next.js application with a C# Web API required coordination between frontend data requirements and backend responses.
My approach
I worked on maintaining clear communication between these layers and handling the information needed by the application's user-facing features. This strengthened my experience integrating different technology stacks into a single application.
Payment Workflows and Data Consistency
Challenge
Developing payment-related functionality introduced considerations around transaction information, response handling, and the difference between simulated and real financial activity.
My approach
I worked on payment-related development and testing workflows with a distinction between demonstration activity and real-money operations. This reinforced the importance of reliable application states and careful validation when working with financial data.
06 / Quality
Testing and validation
My testing approach has focused on validating application workflows, checking frontend-to-backend communication, and reviewing the way financial information is displayed.
I have also worked on payment-related functionality using development and demonstration environments. The live page describes PayPal and Paystack test-payment options, but I did not independently test those integrations, authenticated workflows, or backend API behaviour during this review.
Verification note: The public landing page describes income and fee summaries, financial goals, and PayPal and Paystack test-payment workflows. These feature descriptions were not verified against application source or by completing authenticated flows.
07 / Impact
Engineering outcomes
EarnTracker demonstrates my experience developing a full-stack application around financial-management requirements.
Through the project, I worked on connecting a modern Next.js frontend to a C# backend while building interfaces intended to organize income-related information and financial goals. It has also provided practical experience with payment-related development, financial-data representation, and coordinating features across frontend and backend services.
- Next.js and C# full-stack development
- Earnings-oriented dashboard design
- API-driven application workflows
- Financial-data presentation
- Financial-goal feature development
- Payment integration development experience
Demonstration data: Figures shown in the public landing page’s demonstration dashboard are illustrative product data. They are not verified user earnings, financial results, or project impact metrics.
08 / Reflection
Lessons learned
Developing EarnTracker strengthened my understanding of the responsibility involved in building applications that handle financial information.
I learned the importance of presenting data clearly while ensuring that the underlying application logic is structured and maintainable. Working across Next.js and C# Web API reinforced my full-stack integration skills.
The payment-related work also helped me appreciate why financial applications need reliable response handling, careful testing, and clear separation between demonstration and real transactions. Overall, the project strengthened my ability to connect technical implementation decisions with usability and application reliability.
Live Application Preview
The live application loads only when requested. Its owner controls which features work in an embedded preview.