Serpotrack
Webapplicatie ontwikkeling
In deze casestudy neem ik je mee door de ontwikkeling van Serpotrack en de daarbij horende uitdagingen, oplossingen, en het positieve resultaat.
Serpotrack is een hulpmiddel voor online marketeers & SEO-ers om websiteposities in de Google-zoekresultaten (SERP) te monitoren.
Type
- Webapplicatie
- SaaS
Rol
- Eigenaar
- Software-architect
- Softwareontwikkelaar
- Onderhoud
- CI/CD
Tijdlijn
- 2022 - Heden
Opdrachtgever
- Eigen project
Uitdagingen en doelen
Dit project is begonnen uit eigen initiatief. Voor mijn eigen professionele en hobby projecten, doe ik vaak zelf de SEO (in enkele gevallen maak ik wel gebruik van professionele online marketeers).
Eén onderdeel van SEO is het monitoren van mijn website-posities in de Google-zoekresultaten. Zo kan ik zien welke pagina's goed ranken en welke beter kunnen — hoe hoger je positie in de zoekresultaten, des te beter. Dit is een zeer gebruikelijke methode in de SEO-wereld.
Er zijn dan ook talloze SERP rank trackers in omloop. Echter, voor hobbymatig of kleinschalig gebruik, zijn dit soort tools relatief duur. Vandaar dat ik dit project ben begonnen. Zo kon ik een betaalbare tool bouwen met de features die ik nodig had. In eerste instantie was het voor eigen gebruik gebouwd, maar inmiddels kan iedereen zich aanmelden.
Architectuur
Op basis van mijn initiële requirements heb ik de architectuur ontwikkeld. Hoewel het project begon met de minimale requirements om zo snel mogelijk live te gaan, heb ik het ontwikkeld met de gedachte dat het nog wordt uitgebreid.
In het onderstaande diagram zie je op vrij abstract niveau hoe het geheel in elkaar steekt. Je ziet welke componenten er zijn, intern en extern, en hoe deze samenwerken.
Technieken
Zoals je kunt zien in bovenstaande architectuurdiagram, is er één backend API. Deze is met Java Spring Framework gebouwd. De database is een PostgreSQL database.
De publieke website is met Next.js gebouwd. Dit vanwege de ingebouwde SEO-features, aangezien het van belang is dat deze site organisch gevonden wordt via zoekmachines.
De gebruikers- en admin-omgeving zijn React-applicaties. Bij al deze drie frontend applicaties heb ik Typescript en Tailwind CSS gebruikt.
Java
Typescript
Spring Framework
Next.js
React
Tailwind CSS
PostgreSQL
Maven
JUnit
Cucumber.js
ES6 (Javascript)
NPM
Ubuntu
Caddy 2
PM2
AuthSMTP
MollieOntwikkelproces
Hoewel dit project begon als een persoonlijk project, heb ik het van de meet af aan als ieder ander professionele project van mij aangepakt. Met behulp van projectmanagementtools, zoals Jira, heb ik iteratief met Scrum aan het project gewerkt.
Ik heb continu kleine deelproducten opgeleverd en requirements aangepast waar nodig. In een aantal gevallen heb ik feedback van professionele online marketeers gevraagd.
Implementatie
Hoewel ik begon met minimale requirements voor een snelle livegang, heb ik goed onderhoudbare en uitbreidbare code geschreven.
Aan codekwaliteit hecht ik altijd veel waarde, ongeacht het type project.
Testen
Naast codekwaliteit, is testbaarheid belangrijk. Alle code wordt geautomatiseerd getest.
De backend code wordt met behulp van unit- en integratietesten getest.
De frontend applicaties worden getest met end-to-end testen. Hiervoor gebruik ik Cucumber en Selenium.
Continuous development & integration
Sinds de eerste livegang in 2022 is er veel doorontwikkeld. Er zijn nieuwe features bij gekomen, de applicatie is ge-rebrand en openbaar gemaakt.
Screenshots
Het monitoren van SERP posities voor een project van een gebruiker.
Het monitoren van SERP posities voor een project van een gebruiker.