Conversio Hub

Conversio Hub is by far the largest project I’ve ever worked on. The codebase exceeds 100,000 lines of code, with most of the Next.js frontend built by me.

The project began at the end of my internship at Conversio, where I needed a project to collaborate on with the company for my final exam. At that point, I had already secured a job, which meant my boss saw potential in the project. Together with my colleagues, we got to work.

Building something maintainable

After several months of hard work, we launched the first version of the product, just in time for me to present it at my exam. Throughout the process, I learned countless new things, particularly about building a scalable and maintainable codebase.

Initially, I structured the folders like any other Next.js project I had worked on up to that point. I created root-level folders for components, utilities, constants, etc. 

This worked fine at the start. I grouped files into subfolders by feature and was generally happy with the structure.

However, as the project grew, it became increasingly apparent that this structure would become unmanageable if left unchanged. I researched better approaches and found an article introducing the “modules” structure. I adopted it right away.

This structural change was transformative for the future development of the project. Breaking the application into smaller modules—essentially small, self-contained applications within the larger app—made the codebase significantly easier to maintain and onboard new developers to.

Handling integrations

One of the most important features of the application is enabling users to connect their marketing platforms, such as Google Analytics, Google Ads, and Meta Ads.

To ensure the best user experience, we chose to use OAuth wherever possible. However, there was a challenge: most Next.js libraries supporting OAuth also included authentication features, assuming you want to use the provider for user sign-ups. In our case, we wanted users to create accounts with their Google accounts but also integrate multiple data connections through OAuth flows, granting access with specific scopes required by each platform.

Initially, I implemented a hacky solution, combining custom authentication with Auth.js to handle OAuth flows. However, as the project expanded, we needed support for additional platforms, including Snapchat, which Auth.js did not support.

This pushed me to understand OAuth 2.0 fully. Once I successfully implemented the OAuth flow for Snapchat, I realized the need for a tailored solution. I created an OAuth library specifically for our use case, called Next Integrate, which allows infinite integrations with various providers.

Conversio Hub 2.0

Eight months after the initial launch, we are rolling out Conversio Hub 2.0. The project has undergone a significant redesign, both visually and structurally. We’ve added many exciting features, including a dashboard where users can combine all their data into one easy-to-read interface.

On Friday, January 17th, we merged more than 46,500 new lines of code into the main branch—a surreal milestone.

I’m incredibly proud of this project and grateful for how much it has pushed me forward as a developer. I’m excited to continue working on Conversio Hub and see where we can take it in the future.