Serpotrack

Web application development

In this case study I will take you through the development of Serpotrack and the associated challenges, solutions, and positive outcomes.

Serpotrack is a tool for online marketers & SEO specialists to monitor website positions in Google search results (SERP).

Type

Web application
SaaS

Role

Owner
Software architect
Software developer
Maintenance
CI/CD

Timeline

2022 - Current

Client

Own project

Challenges and goals

This project started on my own initiative. For my own professional and hobby projects, I often do the SEO myself (in some cases I do use professional online marketers).

One part of SEO is monitoring my website positions in Google search results. This allows me to see which pages are ranking well and which ones could be better — the higher your position in search results, the better. This is a very common practice in the SEO world.

There are also numerous SERP rank trackers in circulation. However, for hobby or small-scale use, these types of tools are relatively expensive. That is why I started this project. This way I could build an affordable tool with the features I needed. Initially it was built for my own use, but now everyone can register.

Serpotrack was initially developed for our own use.

Architecture

Based on my initial requirements I developed the architecture. Although the project started with the minimum requirements to go live as soon as possible, I developed it with the idea that it will be expanded.

In the diagram below you can see at a fairly abstract level how the whole thing fits together. You can see which components there are, internal and external, and how they work together.

Various (abstract) components within the Serpotrack system & external systems that are linked.

Techniques

As you can see in the architecture diagram above, there is one backend API. It is built with Java Spring Framework. The database is a PostgreSQL database.

The public website is built with Next.js. This is because of the built-in SEO features, as it is important that this site is found organically via search engines.

The user and admin environments are React applications. In all three of these frontend applications I used Typescript and Tailwind CSS.

Java

Typescript

Spring Framework

Next.js

React

Tailwind CSS

PostgreSQL

Maven

JUnit

Cucumber.js

ES6 (Javascript)

NPM

Ubuntu

Caddy 2

PM2

AuthSMTP

Mollie

Development process

Although this project started as a personal project, I approached it from the start like any other professional project of mine. Using project management tools, such as Jira, I worked on the project iteratively using Scrum.

I have continuously delivered small sub-products and adjusted requirements where necessary. In a number of cases I have asked for feedback from professional online marketers.

Plan

Analyze

Design

Implement