Giter Site home page Giter Site logo

adorsys-gis / e2e-banking-app Goto Github PK

View Code? Open in Web Editor NEW
4.0 3.0 21.0 1.44 MB

Banking app for people

Home Page: https://adorsys-gis.github.io/e2e-banking-app/

License: Mozilla Public License 2.0

Dockerfile 0.58% Java 13.65% JavaScript 62.79% HTML 0.24% CSS 1.09% TypeScript 19.51% Rust 2.14%
actions docker docker-compose java postgresql react rust rust-rocket spring-boot typescript

e2e-banking-app's Introduction

Build, deploy and docker build frontend Build Translator Build Backend

E2E Banking App

Welcome to the e2e-banking-app project! This repository contains the code for the end-to-end banking application.

Prerequisites

Before getting started, make sure you have the following tools installed:

  • nvm (Node Version Manager): To manage Node.js versions.
  • Node.js: Javascript runtime environment.
    • npm: Package manager for Node.js.
    • sdkman: Software Development Kit Manager.
  • Java: Programming Language and runtime environment.
  • Maven: Build automation and dependency management tool.
  • cargo: Package manager for Rust.

Installation

Follow the steps below to set up the local environment:

  1. Install nvm:

  2. Install Node.js and npm using nvm:

    nvm install node
  3. Install sdkman:

    • Visit the sdkman website: https://sdkman.io/
    • Follow the installation instructions for your operating system.
  4. Install Java and Maven using sdkman:

    sdk install java
    sdk install maven
  5. Install cargo:

Getting Started

To run the e2e-banking-app project locally, follow these steps:

  1. Clone the repository:

    git clone https://github.com/ADORSYS-GIS/e2e-banking-app.git
  2. Change to the project directory:

    cd e2e-banking-app
  3. Install project dependencies and Start application:

    a. For power-pay-front-end:

    • Change to the project directory:
      cd power-pay-frontend
    • Install dependencies:
      npm install
    • Build the project:
      npm run build
    • Start application:
      npm start

    b. For power-pay-backend:

    • Change to the project directory:
      cd power-pay-backend
    • Install dependencies:
      mvn install
    • Build the project:
      mvn clean package
    • Start application:
      java -jar target/power-pay-backend-0.0.1-SNAPSHOT.jar

    c. For power-pay-translator:

    • Change to the project directory:
      cd power-pay-translator
    • Build the project:
      cargo build
    • Start application:
      cargo run

e2e-banking-app's People

Contributors

arielpetit avatar assahbismarkabah avatar awambeng avatar blindspot22 avatar bryandino673 avatar chendiblessing avatar christiantyemele avatar elwizzy12 avatar forkimenjeckayang avatar kouamschekina avatar koufan-de-king avatar mbunwe-victor avatar motouom avatar nancymuyeh avatar ndefokou avatar ngha-boris avatar nkwatambe avatar ogenbertrand avatar stephane-segning avatar tekum-emmanuella avatar valantinesuh avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

e2e-banking-app's Issues

Research PWA Requirements

  • User Story: #50
  • Description: Make some researches about PWA, how it works, how it can help our system for real. More resources in the user story
  • Next ticket: #52

User Story 10: As an Individual, I would like to be able to register for the Power Pay App using my smart phone

Description:

Sequence Diagram

sequenceDiagram
actor smartphoneuser
participant PPapp
participant PPservice
smartphoneuser ->> PPapp: Enter: name, number, pin
PPapp ->> PPservice: send info
PPservice ->> PPservice: checks the info
PPservice -->> PPapp: success message requesting otp code
PPapp -->> smartphoneuser:  display()
smartphoneuser ->> PPapp: enter otp code
PPapp ->> PPservice:    send otp code
PPservice ->> PPservice: stores record
PPservice -->> PPapp: success message(now a user)
PPapp -->> smartphoneuser: display 
Loading

Wireframe

Image

  • Ticket 1: Implement Registration UI
    Description: Develop the frontend components and screens for the user registration process in the Power Pay mobile app.

  • Ticket 2: Create Registration API Endpoints
    Description: Develop the backend API endpoints required for user registration in the Power Pay system.

  • Ticket 3: Implement Registration Logic
    Description: Develop the core logic for user registration in the Power Pay backend.

  • Ticket 4: Test Registration Functionality
    Description: Conduct testing and quality assurance for the user registration feature to ensure it functions correctly and securely.

  • Ticket 5: Update Documentation
    Description: Update the Power Pay app documentation to include information and instructions for the user registration process.

Setup Mapstruct into the backend

  • Description: To have more secure objects on the backend, we need to have to map some objects into others, so that we do not expose our objects. So we want to install mapstruct.
  • Implementation:
    • Add mapstruct dependency into the pom.xml.
    • Write a test file and ensure it works.

User story 14: As PawerPay Kiosk, I would like to check my balance

Description

Sequence Diagram

sequenceDiagram

participant kiosk as kiosk
participant ppa as power pay app
participant pps as power pay service
kiosk->>ppa : Check Balance ()
ppa->>pps : send request ()
pps-->>ppa : Requests for PIN(sends procedure ID)
ppa-->>kiosk : Display enter PIN
kiosk->>ppa : Send PIN (PIN)
ppa->>pps : send (PIN, procedure ID)
pps->>pps : validate PIN and check balance
pps-->>ppa : return balance info
ppa-->>kiosk : Display balance
Loading

Wireframe

Tickets and Explanations

  • Implement the check balance interface: The kiosk user should be able send the request in order to check his balance. This function will return the kiosk user's phone number in the backend.
  • Implement the validateDisplayBalanceWithPin(id,PIN) function (REST API): Confirm a user's pin for a procedure. It will call the function that will check the balance if the pin is correct.
  • Implement the checkBalance(PhoneN) function (REST API): check the balance of the Account having the phone number provided and display the balance.

Methodology:
To implement these, we'll need to include a procedure object with a status.

---
title: Class Diagramm
---
classDiagram
    Procedure -- Status
    Procedure -- Type
    Procedure <|-- Transaction
    Procedure <|-- CheckBalance
    Procedure <|-- UserRegistration
    
    class Status {
        <<enumeration>>
        DONE
        WAITING
        ERROR
    }
    class Type {
        <<enumeration>>
        Transaction
        CheckBalance
    }
    class Procedure {
        <<Abstract>>
        +String id
        -Status status = WAITING
        +String phoneNumber
        +void markAsDone()
        +void markAsError()
        +bool isDone()
        +bool isError()
        +bool isWaiting()
        +Type getType()
    }
    class Transaction {
        +String receiverPhoneNumber
        +Double amount
        +String currency = "XAF"
    }
    class CheckBalance {
    }
    class UserRegistration {
        +String opt
        +String userName
    }
    class User {
        +String pin (hashed)
        +String phoneNumber
        +String userName
    }
Loading

Implement the service for validating "sending money"

  • User story: #19
  • Description:
    • Write a service function (a logic) to validate sending money from one account to another one. This means reading the created transaction object by ID and validating the PIN
    • Return a OK
    • Write unit tests for this

Implement the service for sending Money

  • User story: #19
  • Description:
    • Write a service function (a logic) to send the money from one account to another one. This means creating the transaction object (as in #1)
    • Return the transaction
    • Write unit tests for this

Implement validate registration with pin

  • User Story: #7
  • Description: A user would receive a OTP and send it with his pin, so that we should hash it and save it in the database. It'll use the SMS API Gateway for communicating with our P.P. Service.
  • Blocker: #12

Implement `/health` Endpoint for Health Check in Rust Server

Description:

This task involves adding a /health endpoint to our Rust-based server, which is crucial for monitoring the application's health and availability. The endpoint will respond with a simple JSON object that indicates the server's current status. This is a fundamental feature for deployment environments and ensures that our application can be easily monitored by external systems or services.

Objectives:

  • /health Endpoint Creation: Develop an endpoint that returns a standard response indicating the server is operational.
  • Response Format: The endpoint should return a JSON response with a status field indicating success.

Acceptance Criteria:

  1. The Rust server has a /health endpoint accessible via HTTP GET request.
  2. Accessing the /health endpoint returns a JSON response with a structure like: {"status": "ok"}.
  3. The endpoint responds with an appropriate HTTP status code 200 (OK) when the server is running normally.
  4. The implementation follows Rust and Rocket coding standards and best practices for API development.
  5. Documentation is updated to include information about the new endpoint, including its purpose and response format.

Resources:

Implementation Steps:

  1. Endpoint Definition: Define a new route in the Rocket application for the /health endpoint. This should be a GET request that requires no parameters.
  2. Handler Function: Implement a handler function for the /health endpoint. This function should construct and return a JSON response indicating that the server's status is "ok".
  3. Testing: Write unit and integration tests to verify that the /health endpoint behaves as expected under various conditions, including server start-up and running states.
  4. Documentation: Update the project documentation to include details about the /health endpoint, explaining its purpose, the expected response format, and any relevant information for developers or system administrators.

Milestones:

  1. Endpoint Development
  2. Testing and Verification
  3. Documentation Update

Blocker:

User Story 13: As A powerPay User I will Like To check My balance using My SmartPhone

1.Description

2.Sequence Diagram

sequenceDiagram
participant u as User
participant s as Smart phone
participant ppa as PowerPay App
participant pps as PowerPay Service
u->>s:Communication
s->>ppa: Ask for balance check(PIN)
ppa->>pps:send(request and PIN)
pps->>pps:check for pin and account
pps-->>ppa:incorrect PIN(response)
ppa-->>s:incorrect PIN(reponse)
s-->>u:Dsplay(response)
pps-->>ppa:ok(balance)
ppa-->>s:ok(balance)
s-->>u:Dsplay(balance)

Loading

3.WireFrame

Image

4.Ticket
Implement user pin input in the Frontend (PWA): A user should give his PIN to validate the check balance process
Implement OK screen in the Frontend (PWA): A user should see a his balance and can close the screen with the ok button.

  • Implement the checkBalance(PN) function (REST API): Use PIN and Number to query balance for the corresponding account in the database.
  • corresponding error code to the user. This function returns an error message by validating the users account if not present in the database

Setup server in the Rust app

Description:

This task focuses on enhancing our Rust project by integrating a base server using the Rocket framework and adding support for serialization and deserialization with Serde, serde_json, and serde_derive. The goal is to lay a solid foundation for our application's backend, allowing for efficient data handling and a robust server setup.

Objectives:

  • Add Dependencies: Include Rocket, serde, serde_json, and serde_derive in the project's Cargo.toml.
  • Configure Rocket: Set up a basic Rocket server to handle incoming HTTP requests.
  • Implement Serde: Utilize Serde for serializing and deserializing data structures, ensuring seamless data exchange between the server and clients.
  • Basic Endpoint Creation: Create a simple API endpoint to demonstrate the use of Rocket and Serde together.
  • Update Dockerfile: The port of the server should be exposed on the Dockerfile.

Acceptance Criteria:

  1. The Cargo.toml file is updated with the latest versions of Rocket, serde, serde_json, and serde_derive.
  2. A Rocket server is initialized and runs successfully, listening for incoming HTTP requests on a specified port.
  3. At least one API endpoint is created, using Serde to serialize and deserialize request and response data.
  4. The project compiles without errors, and the endpoint is accessible and correctly handles JSON data as per Serde configurations.
  5. Documentation is provided on how to start the server and interact with the created endpoint.

Resources:

Steps:

  1. Update Cargo.toml: Add the necessary dependencies for Rocket, serde, serde_json, and serde_derive.
  2. Configure Rocket Server: Initialize a Rocket instance and configure it to listen on a default port. Ensure proper error handling and logging are in place.
  3. Implement Serialization/Deserialization: Utilize Serde in conjunction with serde_json and serde_derive to serialize and deserialize data structures for API requests and responses.
  4. Create a Test Endpoint: Develop a basic API endpoint (e.g., /hello) to test the integration of Rocket and Serde. This endpoint should accept a JSON payload, deserialize it, and respond with a serialized JSON.
  5. Testing & Documentation: Test the server and endpoint functionality. Document the setup process, how to start the server, and how to interact with the test endpoint.

Milestones:

  1. Dependency Integration and Server Setup
  2. Serialization/Deserialization Implementation
  3. Endpoint Development and Testing
  4. Documentation

User Story 3: As a PowerPay user, i would like to withdraw money using my Choronko - Use-case v3

Description

Sequence Diagram

sequenceDiagram
	actor chUser
	participant choronko
	actor posuser
	participant PP app
	participant  PP service
	chUser ->> choronko:(pos number and amount) 
	choronko ->> PP service:(Send) 
	PP service ->> PP service: (account balance)
	PP service -->> choronko: (Confirmationmsg for topup)
	choronko -->> chUser: (Display())
	chUser ->> choronko:(Enter code and otp)
	choronko ->> PP service:(send code and otp) 
	PP service ->> PP service: (execute withdrawal)
	PP service -->> PP app: (successfull)
	PP app -->> posuser: Display
	PP service -->> choronko: (successfull)
	choronko -->>chUser: Dicplay
Loading

Wireframe

  • Implement a front-end format of sending money to another user via sms
  • implement a function to receive user message containing amount and number to whom the user is sending to and extract the data from the messsage sent by the user to the service.
  • implement validation mechanism where the database verrifies if user has specified amount to send. Handle error messages and return corresponding error message. This function returns a the recipient's name (data) and the amount of the transaction, plus the transaction (data).
  • Implement the validateTransactionWithPin(transactionId, pin) function (REST API): Confirm a user's pin for a procedure.

User Story: Investigate and Implement PWA Features in React App

Description:

As part of our efforts to improve user experience and engagement, we are looking to investigate and implement Progressive Web App (PWA) features within our React application. This includes setting up offline capabilities, and ensuring the app is installable on users' home screens across different platforms. The goal is to enhance app performance, reliability, and accessibility, aligning with PWA best practices.

Objectives:

  • Research PWA Requirements: Understand the technical requirements and best practices for PWAs, including service workers, web app manifests, and HTTPS.
  • Evaluate Current App Compatibility: Assess our current React app's architecture and identify changes needed to support PWA features.
  • Implement Service Worker: Set up a service worker to enable offline capabilities, caching strategies, and background data updates.
  • Configure Web App Manifest: Create and configure a web app manifest to ensure the app is discoverable and installable, with appropriate icons, names, and start URLs.
  • Testing across Platforms: Ensure PWA features work seamlessly across different browsers and devices, including mobile and desktop.
  • Documentation: Document the setup process, configurations, and any important considerations for future reference and team knowledge sharing.

Acceptance Criteria:

  1. The React app has a correctly configured service worker that enables offline use and content caching.
  2. A web app manifest is in place, allowing the app to be installed on users' home screens with proper icons and splash screens.
  3. The app passes the Lighthouse PWA checklist with a score of 90+ in the PWA category.
  4. Implementation details and configurations are well-documented.

Resources:

Milestones:

  1. Service Worker and Manifest
  2. Testing & Optimization
  3. Documentation & Knowledge Sharing

User story-11: As a potential user using choronko will like to register with the PowerPay system

Description: As a potential user using choronko will like to register with the PowerPay system

Sequence Diagram

sequenceDiagram
participant u as User
participant c as Choronko
participant sg as sms gateway
participant pps as PowerPay service
u->>c:input(number and username)
c->>sg:forwarding sms(number and username)
sg->>pps: send sms(number and username)
pps->>pps: check number 
pps-->>sg: sms(OTP and request for PIN)
sg-->>c:forwarding sms(OTP and request for PIN)
c-->>u:sms(OTP and request for PIN)
u->>sg:sms(OTP and PIN)
sg->>pps:forwarding sms(OTP and request for PIN)
pps->>pps:check OPT and PIN
pps-->>sg:ok(success message)
sg-->>c:ok(success message)
c-->>u:display sms(success message)
Loading

Wireframe

Image

Tickets

  • Validate user input: Extract user data(username and number) and store in the database.
  • Implement Request response mechanism: For each request to a destination there should be an expected response from that destination.
  • Implement error handling and validation: Provide corresponding messages to events.
  • Implement validateUserRegistration(pin, id):
    • Validate PIN and OTP: validate the PIN and the OTP and store the PIN in the corresponding location with user data in the database.
  • Implement register(phoneNumber):
    • Implement sms reponse to user input: Send sms to user number containing OPT and a request for a PIN.

Implementation:

  • The User Story #1 contains the complete class diagram
  • Use a SMS API Gateway, discussed in #5

Implement basic Class Diagram

  • User Story: #1
  • Description: Refer to U.S. for describing and implementing the Class Diagram using the MVC pattern in the Spring Boot Backend.
    • Write only models classes
    • To do that, you should create a new package next to the main class folder and place the content inside of it

Setup css design system

  • Description: Add tools to create a design system
  • Implementation:
    • Add and configure sass to the frontend project
      • Document the usage of sass in the docs using .md file
    • Add and configure tailwindcss to the frontend project
      • Document the usage of tailwindcss in the docs using .md file

Implement Service Worker

  • User story: #50
  • Description: Setup PWA in the frontend app (react) and ensure it works under required conditions
    • Setup manifest
    • Setup worker
    • Test the deployed version
  • Blocker: #52

Deploy the frontend app using Github pages

  • Description: Add a workflow file, to make sure, that the frontend is going to be built ONLY on the main branch, so that the react app is deployed on the github pages
  • Implementation
      1. Create a new workflow file
      1. Build the project
      1. Deploy it to the gh page (using an action)
  • Make any changes necessary

Create a high level description of the Translation Service backend

  • Write a document which contains how the Translation Backend (that one between the API gateway and our PPService) works, how it's interacting with other components
  • Include everything we'll need as technology for the Translation backend
  • Write it all in a .md file, in the docs folder

Implement register with phoneNumber

  • User story: #7
  • Description: A choronko phone user should be capable of registering in our system using a message Gateway. The message gateway shall communicate with the P.P. Service using REST.
  • Blocker: #11

Wireframes

User Stories (check balance) 12, 13, and 14
Image

User Stories (send money)1,2,4,5,6,7
Image

User Stories (withdraw money) 3, 8 & 9
Image

User Stories(Register) 10, 11
Image

Implement the checkBalance

  • User Story: #1
  • Description: Provided a phone number, a CheckBalance should be created and used to follow the procedure. This method just creates that object and returns the ID alongside data to the user
    • Write a REST API
    • Write a service
    • Write tests
  • Blocker: #3

Implement health Endpoint for Health Check in PowerPay Server

  • Description: Using a backend, we want to know if the app is running or not. Having a /health endpoint is common. In Spring Boot, we have something called actuator that implement these features.
  • Implementation:
    • Add the actuator dependency in the backend project
    • Expose all metrics to the actuator
    • Test the APIs to ensure it's working
    • Write unit testing for the said endpoint

Implement a hooks for persisting data on the frontend

  • Description: I want to have a react hook I can use to persist data, of whatever type, on the frontend side. This would give me the possibility to save user data, but also transaction ID, and procedure ID

  • Implementation should be as follows:

    const [value, setValue] = useStorage('key')
    console.log('key', value)

    meaning that each time the useStorage hook is called with a key, we return an array of two values, the first being the value, and the second being the setter. And if we call the setter, then we also write into the storage

Implement the REST API for sending Money

  • User story: #19
  • Description:
    • Write a REST API to send the money from one account to another one. This means calling the service implemented in #20
    • Return the serialized object
    • Write integration tests for this

User story 2: As a PowerPay user i will like to send Money To Another PowerPay User Using A choronko

1.Description

2.Sequence Diagram

sequenceDiagram
participant sender as sender
participant sc as sender choronko
participant rep as recipeint 
participant rc as recipeint's choronko
participant pps as powerpay service
sender->>sc:enters information
sc->>pps:SMS(recipient Number & Amount )
pps->>pps:check Num&Balance
pps-->>sc:SMS(recipeint Name, amount, OTP)
sc-->>sender:display()
sender->>sc:Enter Pin
sc->>pps:SMS(pin,OTP)
pps->>pps:verify and execute transfer
pps-->>sc:SMS(successful message)
sc-->>sender:display()
pps-->>rc:SMS(successful transfer)
rc-->>rep:display()
Loading

3.WireFrame

Image

4.Ticket

  • Implement the sendMoney(recPN, amount) function (REST API): Send money to another user and save the transaction into the database. Handle error cases corresponding error code to the user. This function returns a the recipient's name (data) and the amount of the transaction, plus the transaction (data).
  • Implement the validateTransactionWithPin(transactionId, pin) function (REST API): Confirm a user's pin for a procedure.

User story: As a PP User, I'd like to send money to another PP User using the Smartphone - Use-case v1

  1. Description

  2. Sequence Diagram
    Image

  3. Wireframe
    Image

Tickets

  • Implement Recipient's data input in the Frontend (PWA): A user should give the recipient's data and the amount to be sent.
  • Implement user pin input in the Frontend (PWA): A user should give his PIN to validate the transaction
  • Implement OK screen in the Frontend (PWA): A user should see a confirmation page for the succeeded transaction
  • Implement the sendMoney(recPN, amount) function (REST API): Send money to another user and save the transaction into the database. Handle error cases, and return a corresponding error code to the user. This function returns a the recipient's name (data) and the amount of the transaction, plus the transaction (data).
  • Implement the validateTransactionWithPin(transactionId, pin) function (REST API): Confirm a user's pin for a procedure.

User story 12: As Choronko using a PowerPay User, I would like to check my balance

Description

Sequence Diagram

sequenceDiagram

participant cu as choronko user
participant choronko as choronko
cu->>choronko : check balance ()
choronko->>pps : send request
pps->>pps : check account
pps-->>choronko : Request for PIN(send procedure ID)
choronko-->>cu : Display enter PIN message
cu->>choronko : Send PIN 
choronko->>pps : send PIN(PIN, procedure ID)
pps->>pps : validate PIN
pps-->>choronko : balance details
choronko-->>cu : Display balance details
Loading

Wireframe

Image

Tickets and Explanations

  • Refer to U.S: #1
  • Implement a translation service to convert messages from the Choronko phone to the P.P.Service.
    • Implement a Spring cloud function app to receive webhooks from the SMS Gateway
    • Call the P.P. Service with required data
    • Return a result to the user
    • The following diagram show a basic flow
flowchart LR
    ChoronkoPhone --> APIGateway
    APIGateway --> |"New SMS (with content)"|TranslationService
    TranslationService --> |"Nomal Message"|PPService
    PPService --> |Response|TranslationService
    TranslationService --> |"Parse SMS"|APIGateway
    APIGateway --> |"final message"|ChoronkoPhone
Loading

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.