7/21/2021

Growth Plan

A fullstack web app which makes the lives of consultants and their clients easier


The assignment

Pro Growth Consulting is a Finish consulting agency which helps growth-oriented companies to succeed, to build new business and to create new jobs in Finland. One of the services they offer is the creation of a Growth Plan. Here, together with key executives, the direction of the company for the forseable future will be determined. During the workshop, we look at which products and customers the company can best focus on and what the next steps are to achieve growth.

Pro Growth wanted to modernise their Growh PLan service by utilizing a web app where consultants can work with their clients to answer the core questions about their company, their product and their customers. The web app will then server as a basis for concrete decision about the stratgey needed to realize the desire growth

To make this possible the web app needed to meet a number of requirements: easy to use, seperate safe environments for the clients, consultants and the admin, collaboration opportunities for clients and consultants and a modern fast front-end.

Server architecture

As basis for the Growth PLan web app a Flask server has been chosen. Flask is a modern, lightweigth and flexible Python web framework which makes it a good choise for a web app. The server is responsible for serving the HTML during the first visit, the processing and saving the data that is entered by the clients and the consultants in a PostgreSQL database, the login and authorization of the users and the general functions such as sending emails and Google Docs style of comments between the clients and the consultants,

Besides the authorization of the normal login of the web app users, it is also possible to grant access to a Growth Plan to a third party via a special URL. The server generates the unique URL, checks if it is valid when someone navigates to it and keeps track if the owner of the Growth Plan has switched access on or off.

The server is also responsible for automating certain functionalities such as sending emails when certain conditions are met, such as an account expiring, and the periodically cleaning of the database via Cron.

Frontend

The front-end of the Growth Plan web app is built in Vue.js. This a progresive modern JavaScript framework which makes it possible to build reactive websites. Vue.js is flexible and makes it possible to build lightweight websites with all necessary functionalities. This makes the front-end easy to use and performant for the end user.

The front-end is made up of a number of different parts: The public facing pages such as the home page and the login page, the dashboard where the Growth Plan and account information can be found and the Growth Plan itself. The content of all the parts can be changed by the admin at any time without the need of a developer.

Public pages

Alt text

Dashboard

Alt text

Growth Plan

Alt text

Deployment

After the back and front-end were built, the web app had to be deployed so that it could be used. For the deployment Heroku was chosen. This is a Platform as a Service (Paas) where the management of the server, database and other backend services is done by Heroku. This makes it possible to setup advanced deploy pipelines where each change or update can be extensively tested, both automatically and manually, so that the production version will always work as expected.

Results

  • A reliable server with serveral automated parts
  • A modern dynamic front-end with a modern design
  • The possibility to edit the front-end content without the needed for a developer
  • A reliable depolyment pipeline with automated tests
  • Positive feedback from multiple clients and consultants