Sample Surveys Application (Kotlin + Spring + RSocket + Vue.js Demo)
Tags: github, kotlin, reactive, vue
Published: 2021-07-06 11:30:49

Recently I started building a repo with boilerplate code to facilitate creation of my future full-stack pet projects. Despite it's work in progress and always will be, as I'll continue to implement new features and tweak existing ones, I wanted to share it with the community.

Check out the GitHub repo I'm covering in this post:

{% github anton-goncharov/kotlin-vue-surveys-demo no-readme %}

## Summary

It's a sample "surveys" application with the actors of two roles: coordinators and respondents. Coordinators are allowed to create & edit polls, then review response statistics. Respondents have read-only view with the only option to submit survey responses.

![surveys-list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79bhx6kxb26m79p38g8l.png) 

![editing-survey2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xzgzsski4ugmjqdbzfep.png)

One of the key features is that the statistics data is refreshed in real time on a survey stats page 📊. It works by using Rsocket and Reactive Streams.

![surveys](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kyia80rltd5usxqpga0b.gif)
 

## Concepts

This demo application showcases the following list of concepts:

#### Kotlin and Spring backend API development

I've started using Kotlin on new backend projects 2 years ago, and it's my first repository to have boilerplate code for full-stack apps with Kotlin. Here I'm using Kotlin in pretty much the same Spring setup as I would use Java.

#### Rapid CRUD bootstrapping using Spring Data REST

It's arguable whether Spring Data REST is a good fit for a production-ready project. On the other hand, it allows a rapid start having full-blown API implementation with sorting, paging and filtering for given entities 💁.

Any given controller can be extended with additional handlers or reimplemented from scratch as a separate custom REST endpoint.

#### Database migrations with Liquibase

Hibernate JPA auto schema creation was used during the development. After the first version of the schema had been finalized, I generated the Liquibase changelog from JPA entities and disabled ddl-auto by Hibernate.

To populate schema with some initial data (predefined users), there's sql script on classpath.

#### Security

JWT-based authentication with role-based access is showcased with tokens issued by the backend. ❗️ Such a setup must not be used in production, this functionality is only to demonstrate the flow. In a real solution, use IAM solution like Keycloak or 3rd party SaaS.

#### Reactive flow for live data streaming

After reading the official guide on Spring Webflux + RSocket I got an idea to implement some real-time streaming functionality to try Reactive Streams in a demo application setup.

The survey statistics page is implemented using rsocket.js, it reads the survey response stream data from a Kotlin Flow that is populated with data from R2DBC H2 reactive-ready driver. The charts are updated on a survey stats page in real time.

#### Building with Gradle

As a sidenote, I've never used Gradle before, always preferring Maven as a classic tool that makes more sense to me 😃. This was an interesting challenge to create something new with Gradle, especially writing the build script with Kotlin DSL since there're not many ready-to-use examples.

## Tech Stack 

#### 🔸 Backend
- Kotlin 1.4
- Spring Boot 2.4.3 (JPA Data REST / Hibernate + Security + WebFlux)
- H2 Database with Liquibase database migrations
- Gradle
- JUnit 5

#### 🔹 Frontend
- Vue.js 2 (with Vuex, Vue-router, Vue-image-upload)
- Bootstrap 4
- RSocket
- Apexcharts

## Launching 

🚀 To get it up and running follow the instructions from [the GitHub repo](https://github.com/anton-goncharov/kotlin-vue-surveys-demo#launch).
 
___

Please reach me out if you have any questions or feedback. But keep in mind it's a boilerplate code withstanding permanent work in progress 🛠. Cheers!