Architecture
This document will explain the architecture of the Elixir System. There will be few areas we are discussing here and those areas are listed below.
.png)
.png)
- Send invitation to the User email
- Users will sign up for the system using the link available in the email.
- Login Action - User click on the login button
- Login Request of user - Login request of user will be sent to Asgardeo by Asgardeo SDK
- Users will be logged in to the system if there is an active session. If not, the user will be directed to the sign in page given by the 4. Asgardeo and prompt for password and username.
- User will proceed to login.
- Request Access token for the user.
- Receive access token for the user from the Asgardeo.
- Exchange token with the Choreo STS.
- Receive the Choreo API access token.
- With API Access token attached, call the API
- Get the response from the API call.
- The Elixir System comprised the following components:
- Donor Portal - React web application
- Admin Portal - React web application
- API layer hosted in Choreo - APIs are written in Ballerina lang
- User Store and Authentication provided in Asgardeo with two applications
- Azure DB Instance
This is a React application created using the create-react-app tool which will bundle a bunch of libraries when creating a default react app. All the technical specs are listed below.
Development Language:
- typescript: 4.7.3
Base Level libraries are as listed below:
- create-react-app: 5.0.1 (https://create-react-app.dev/docs/getting-started)
- react: 18.2.0
- react-dom: 18.2.0
- react-router-dom: 5.3.3
- react-scripts: 5.0.1
Testing Libraries:
- @testing-library/react: 13.3.0
- @testing-library/jest-dom: 5.16.4
- @testing-library/user-event: 13.5.0
- jest: 27.5.2
Authentication SDKs:
- @asgardeo/auth-react: 1.1.11
- @asgardeo/token-exchange-plugin: 0.1.3
- @asgardeo/auth-spa: 0.4.4
Third-party component libraries:
- moment: 2.29.4
- react-icons: 4.4.0
Development time tools:
- prettier: 2.7.1
This is a React application created using the create-react-app tool which will bundle a bunch of libraries when creating a default react app. All the technical specs are listed below.
Development Language:
- typescript: 4.7.3
Base Level libraries are as listed below:
- create-react-app: 5.0.1 (https://create-react-app.dev/docs/getting-started)
- react: 18.2.0
- react-dom: 18.2.0
- react-router-dom: 5.3.3
- react-scripts: 5.0.1
Testing Libraries:
- @testing-library/react: 13.3.0
- @testing-library/jest-dom: 5.16.4
- @testing-library/user-event: 13.5.0
- jest: 27.5.2
Authentication SDKs:
- @asgardeo/auth-react: 1.1.11
- @asgardeo/token-exchange-plugin: 0.1.3
Third-party component libraries:
- moment: 2.29.4
- react-icons: 4.4.0
- recharts: 2.1.10
- react-table: 7.8.0
- react-simple-toasts: 2.2.3
- react-toastify: 9.0.5
Utility Libraries for UI:
- clsx: 1.1.1
Development time tools:
- prettier: 2.7.1
All the APIs for Admin portal and Donor portal are created and hosted on WSO2 Choreo platform. All the APIs are written using Ballerina language.
- Ballerina 2201.1.0 (Swan Lake Update 1)
All the users are registered on Asgardeo and uses Asgardeo as the IDP for both of the web applications. Also API Access will be Authorized using Asgardeo.
- Azure MySQL : v8
Web applications are deployed on Vercel under medicinesfor-lk organization (https://vercel.com/medicinesfor-lk). There are two deployments for the two Web applications (Donor portal and Admin Portal). And there will be two environments for each web application. One is the Development environment and the Production environment.
All the configs related to the IDP secrets are pushed when building using environment variables.