21-7-2021

Growth Plan

Een fullstack web app die het leven van consultants en hun klanten makkelijker maakt


De opdracht

Pro Growth Consulting is een Fins consulting bureau dat groei georiënteerde bedrijven helpt succesvoller te worden, nieuwe business op te bouwen en nieuwe banen te creeëren in Finland. Een van de services die zij aanbieden is het opstellen van een Growth Plan. Hierin wordt samen met key executives de richting van het bedrijf voor de komende tijd bepaalt. tijdens de workshop wordt er gekeken op welke producten en klanten het bedrijf het best kan focussen en wat de volgende stappen zijn om groei te realiseren.

Pro Growth wilde graag hun Growth Plan service moderniseren door middel van het inzetten van een web app waar de consultants samen met hun cliënten kern vragen over hun bedrijf, hun producten en hun klanten konden beantwoorden. De web app dient vervolgens als de basis om concrete beslissingen te maken over de strategie benodigd om de gewenste groei te behalen.

Om dit mogelijk te maken moest de web app aan een aantal eisen voldoen: makkelijk in gebruik, gescheiden veilige omgeveningen voor de cliënten, consultants en de administrator, samenwerkeningsmogelijkheden voor cliënten en consultants en een modern en snelle front-end.

Server architectuur

Als basis voor de Growth Plan web app is een Flask server gekozen. Flask is een modern, lichtgewicht en flexibel Python web framework wat het een goede keuze maakt voor een web app. De server is verantwoordelijk voor het serveren van de HTML tijdens het eerste bezoek, het verwerken en opslaan van de gegevens die door die cliënten en consultants wordt ingevoerd in een PostgreSQL database, de login en authorizatie van de gebruikers en algemene functionaliteiten zoals het versturen van emails en Google Docs stijl comments tussen de cliënten en consultants.

Naast het authorizeren van de normale login van de gebruikers van de web app, is het ook mogelijk om toegang tot het Growth Plan te geven aan derde partijen via een speciale URL. De server genereert de unieke URL, controleert of de URL geldig is wanneer deze gebruikt wordt en houdt bij of de eigenaar van het Growth Plan de toegang heeft aan- of uitgeschakeld.

Verder is de server ook verantwoordelijk voor het automatiseren van verschillende functionaliteiten zoals het versturen van emails wanneer er aan bepaalde voorwaarden wordt voldaan, zoals het verlopen van een account, en het periodiek opschonen van de database via Cron.

Frontend

De front-end van de Growth Plan web app is gebouwd in Vue.js. Dit is progresief modern JavaScript framework wat het mogelijk maakt om reactieve websites te bouwen. Vue.js is flexibel en maakt het mogelijk om lichtgewicht websits te bouwen met alleen de functionaliteiten die nodig zijn. Dit zorgt dat de front-end bruikbaar en snel is voor de eindgebruiker.

De front-end bestaat uit een aantal verschillende onderdelen: De openbare pagina's zoals de thuispagina en de login pagina, het dashboard waar Growth Plan en account informatie te vinden is en het Growth Plan zelf. De inhoud van alle onderdelen kan door de administrator op elke moment aangepast worden zonder tussenkomst van een developer.

Openbare pagina's

growth plan home

Dashboard

growth plan dashboard

Growth Plan

growth plan dashboard

Deployment

Nadat de back- en front-end gebouwd waren moest de web app gedeployed worden zodat deze in gebruik genomen kon worden. Hier is gekozen voor Heroku. Dit is een Platform as a Service (PaaS) waarbij het managen van de server, database en andere backend services door Heroku wordt gedaan. Dit maakt het mogelijk een geavanceerde deploy pipeline op te zetten waarbij elke verandering of update eerst uitgebreid automatisch getest kan worden, zowel automatisch als met de hand, zodat de productie versie altijd werkt zoals verwacht.

Resultaat

  • Een betrouwbare server met verschillende geautomatiseerde onderdelen
  • Een moderne dynamische front-end met een modern design
  • De mogelijkheid om de front-end aan te passen zonder tussenkomst van een developer
  • Een betrouwbare deployment pipeline met geautomatiseerde tests
  • Positieve feedback van meedere tevreden cliënten