GadsVisor: Web App Development in React and Node.js

GAdsVisor is an online advertising optimization web application that gives practical advice on GoogleAds campaigns written in React and Node.js. This tool aims to be any online marketing professional’s best friend who manages multiple GoogleAds accounts on a daily basis.

Client:Netmarketing
Year:2021
Technologies:Node.js, React, TypeScript, AWS Aurora PostgreSQL, Amazon Web Services

About the project

GAdsVisor is an online advertising optimization web application that gives practical advice on GoogleAds campaigns. In addition, it also has the possibility of executing the suggested modifications directly from the platform without having to be simultaneously logged in to GoogleAds. This tool aims to be any online marketing professional’s best friend who manages multiple GoogleAds accounts on a daily basis.

The target for the first milestone was to build a stable base for the application with the above two core functions for a predefined ad type, with room for many more exciting features to come.

Challenges

Dreaming big and starting a greenfield project unique in its own category usually has its ups and downs. On one hand, both the client and the developer team have the opportunity to build something from scratch, with no baggage of past mistakes to carry. There are no technical dependencies or existing business processes to respect; there is simply a nice clean sheet. Of course it also comes with the pressure of responsibility when deciding on the core and infrastructure of the system, as it should be stable enough not just to carry the current features, but many upcoming features as well, which are rather loosely defined at this point. This process usually comes with a higher degree of risk and could be time consuming.

The Client, Netmarketing’s CEO, has a long-standing relationship with Matt, CEO of Coding Sans, which simplified the hiring process and also guaranteed that the project would be in competent hands. Coding Sans provided an external UI/UX designer completed by internal UI/UX consultancy, a front- and backend developer team of 5 along with a project manager and a QA team to meet the challenges on every step of the way.

Scope and solution

It should be no surprise that GoogleAds is the biggest online advertising platform, used by literally millions of advertisers worldwide. However, even though it has its built-in optimization feature developed by the tech giant, many professionals in the field of online marketing thought that it might need a bit of fine tuning. Netmarketing being one of them decided to act on that and create an individual application with API connection to GoogleAds and GoogleAnalytics. The seamless connection with the above two platforms is essential in favor of successfully developing the application; nevertheless, the key to the success of the project was Netmarketing having the 10+ years of experience in online marketing, and of course the ability of translating it to a clear set of rules to create the advice by.

Research and development processes

Our cooperation started with an extensive research and planning period of 2 months, and as a result, we agreed on the scope of the first milestone, created the general specification and fixed the tech stack. An external UI/UX designer was hired to create the user flow and design the interface based on the research. They were using Figma, which also allowed all parties to check the real-time status of the process and comment when needed, ensuring a proper flow of communication and leaving as little room for misunderstanding as possible.

The process of creating the business analogy for the advice generation started a bit slower than expected. We were trying with charts and flowcharts for days, our goal was finding a clear structure for all types of advice to fit in. Once we had that, the business analogy for all advice was ready in 2 sessions of brainstorming together with the client. This structure completed our general specification and made this particular part of the development a walk in the park.

The development was organized according to the Scrum methodology having two-week sprints, each with a planning, two backlog groomings, two refinements, daily stand-ups and occasional retrospective meetings when reaching internal milestones. The developers mainly worked in pairs, which resulted in higher quality of code and fewer mistakes and bugs. Pair programming also allowed them to learn from each other and develop their coding skills. From time to time, they asked for consultancy with our CTO who always came handy around critical decisions. 

We used Jira for task management, the development tasks were defined as stories and were estimated by story points using the well-proven Fibonacci numbers. The user stories were created by the tech lead with the assistance of the project manager based on the general specification, and refined at the refinement ceremonies by the whole team. 

The development of the app started in late March 2021. We built GAdsVisor as a serverless application, hosted on Vercel for development and on AWS for production. The reason we chose serverless is because it is super scaleable and it is capable of serving an enormous number of visitors at the same time without any technical issues, but has low costs while building up a user base. We used Node.js Fastify with Apollo GraphQL for backend, PostgreSQL as the database and Next.js framework with TypeScript for the frontend components.

The development phase was completed by an extensive testing period. Unit testing was a requirement from the developers on the fly, but our QA team was responsible for further automated and manual testing with special regards to API connections and advice generation. 

Main features

The users of the application are online marketing professionals handling multiple GoogleAds accounts at once, so it was essential to grant the option to add multiple accounts to GAdsVisor simultaneously. GoogleAds admins have the opportunity to set the authorized users on each level within the accounts, which had to be implemented in GAdsVisor to keep the two systems consistent.

One of the user interface’s big hits is the summary table with customizable rows and columns. All the relevant KPIs and metrics are not just collected in it, but also marked when  exceeding each one’s predefined limit.

In order to create advice there always has to be a piece of data to examine and a reference for comparison. The examined data is given, as the KPIs and metrics of each observed item are received via API connections. As for the reference data, the user can either provide them manually or use the automatically generated ones if enough data is available to generate them. The received, generated and manually provided data is all collected and compared periodically, and the advice for modification is shown to the user for acceptance or rejection.

Results and feedback

As a result of approximately 10 months of research, planning, development and testing we built a stable core for a unique online advertising optimization app. As for the final product the client decided on keeping it internally for further business testing. By the end of this testing period, they will expectedly get back to us with requests on fine tuning some of the advice based on a handful of marketing professional’s experience, after which we start planning the second milestone.

_A step closer to your product

Work With Us

arrow

Request a free consultation with our project managers, and we help you figure out the next steps for your project.

_The pillars of our work

How We Do It

Code Quality

Our code is tested, linted, and follows the industry best practices. It’s also self-describing so you will know exactly what is happening under the hood.

Free sprint

You won’t get to know us until you work with us. To minimize your risk in the process, we provide the first sprint of coding for free, so you can check out how we actually work to decide whether it meets your requirements.

Full transparency

We provide full code transparency with version tracking software (GitLab or GitHub) and use a direct communication platform (Slack) to communicate achievements, setbacks, and changing requirements on the fly.