Skip to content

aklivity/streampay-demo

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

53 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

StreamPay App Demo

This StreamPay app demo consists of 4 main components such as:

  • Redpanda.
  • Redpanda Console.
  • Event processing service written using Spring Boot.
  • Zilla API Gateway that hosts both app web interface and APIs.
  • StreamPay app UI

Requirements

Redpanda

Redpanda serves both as event streaming source and database table to store information about users, transactions, and stats. Following topics are created:

  • commands - This topics get populated by Zilla API Gateway and responsible for processing commands such as PayCommand, RequestCommand.
  • replies - HTTP response for processed command should be posted to this topic for correlated response.
  • transactions - Stores information about about each transaction between users.
  • activities - Event sourcing topic that logs all the activities in the system between users.
  • balances - Tracks latest balance of a user comping from transactions table.
  • payment-requests - Store payments requested by the user.
  • users - Stores information about users(logcompacted topic).

Redpanda Console

Redpanda Console is a developer-friendly UI for managing your Kafka/Redpanda workloads. Console gives you a simple, interactive approach for gaining visibility into your topics, masking data, managing consumer groups, and exploring real-time data with time-travel debugging. You can access it at http://localhost:8080.

Event Processing Service

This service responsible for processing commands such as PayCommand, RequestCommand and producing messages to the appropriate topics. It also has statistic topologies that builds activities, statistics out of topics such as transactions, and payment-requests

Build the service

All components are launched from docker stack defined in stack.yaml, however, streampay-stream and streampay-simulation services which have reference to image: "streampay-stream:develop-SNAPSHOT" and image: "streampay-simulation:develop-SNAPSHOT should be built locally. Please run the below command to build the images.

cd service
./mvnw clean install
cd ..

The above command generates streampay-service:develop-SNAPSHOT and streampay-simulation:develop-SNAPSHOT images.

StreamPay UI

This app is build using Vue.js and Quasar frameworks and contains user authentication component as well which uses Auth0 platform.

Build

cd app
npm i -g @quasar/cli
npm install
quasar build
cd ..

The above command generates dist folder with all the necessary files to be hosted by Zilla API Gateway.

Zilla API Gateway

Zilla API Gateway hosts both app UI and APIs. Following endpoints are configured in stack/conf/zilla.yaml

Protocol Method Endpoint Topic
SSE GET /activities activities
SSE GET /payment-requests payment-requests
SSE GET /current-balance balances
SSE GET /total-transactions total-transactions
SSE GET /average-transactions average-transactions
SSE GET /balance-histories balance-histories
HTTP POST /pay commands
HTTP POST /request commands
HTTP PUT /current-user users
HTTP GET /users users

Launch the stack

Run following command to launch the stack:

cd stack
docker stack deploy -c stack.yml example --resolve-image never
#Output
Creating network example_net0
Creating service example_zilla
Creating service example_redpanda
Creating service example_init-redpanda
Creating service example_streampay-service

Test

Navigate to https://localhost:9090 in the browser.

screenshot

Click on login and use one of the option to authenticate. Happy testing!