Skip to content

Documentation

Jump to bottom
MD Rashid Hussain edited this page Aug 20, 2024 · 1 revision

Authentication

Server: Our backend server
Provider : Provider's server (google, github etc)

  1. Client makes a call to the server to start the auth flow
  2. Server Makes a call to the provider's backend
  3. User selects the account to be used for OAUTH (from the provider's domain)
  4. After selection, the provider generates (IdToken, AccessToken and RefreshToken) among things mentioned in the scope
  5. With these data, the provider makes a call to the server's callback url
  6. The server does its things with the data (like validation etc.), saves the RefreshToken in its database and return JWT to the Client
  7. On Getting the response from the server, the user is authenticated

Frontend OAUTH Explicit Flow

  1. Client opens a new window, with the URL of the server (to initiate the process)
  2. The client keeps a reference of the original window and adds an event Listener for any message events
  3. The domain is changed to the provider's and all things are on the more secure back channel
  4. The user selects an account and the server redirects to the client's expected callback url
  5. The newly opened window's last url contains the JWT token and other details
  6. The client extracts the data from the token and makes a postMessage to the original window
  7. The newly opened window is now closed
  8. On getting the data, the eventListener runs and sets the JWT token in the browser's localStorage
  9. The client then makes a call to the backend to get the user info
  10. On getting the user info, the client logs the user in by setting the app's local state

Dashboards

User Story

  • Dashboard is a container for widgets
  • Widget can be charts or kpis
  • Dashboards are shown on the home screen as different tabs [shows only active dashboards]
  • Charts and KPIs are different
    • Charts show a certain graph (pie, bar, area etc.)
    • KPIs show a single number (current state) and maybe increase or decrease from previous
  • First the user creates an empty dashboard
  • Then user creates widgets in it
  • On the dashboard design screen, user can drag and drop widgets to rearrange

Q. How to create a Chart/KPI ?

  • On the dashboard design page, click on the add item button
  • Modal opens, select type (Chart or KPI)
  • then fill the options for datalabels for widget
  • Created

Developer Story

KPIs

  • Kpi needs model, and aggregation_type
  • aggregation_type have the following options
    • sum
    • count
    • max
    • min
    • mean
    • median
    • mode

Export

The platform exposes two kinds of exports (as of now)

  • CSV
  • Excel

Forms

  • Create forms
  • Delete forms
  • Edit form details (everything except form body)
  • Preview forms
  • Export list of forms (as CSV or Excel)
  • Fill Forms (with or without login)
  • Export Form responses (as CSV or Excel)
  • Analytics of form responses

Create Forms

  • The left sidebar contains the components that can be added to the form

  • The middle area is the form editor area

  • The right sidebar shows properties of the selected element in the form editor or the overall form settings

  • The form overall settings include

    1. Form Title
    2. Form Description
    3. Cancel Text
    4. Submit Text
    5. Whether to allow anonymous responses
    6. Whether to allow multiple responses
    7. Whether to allow users to edit responses
    8. Whether to send email notifications on form submission

  • Form input components include

    1. Input (Text, Number, Email, Phone, Date, Time, URL etc.)
    2. Toggle Input (Yes/No)
    3. Text Area Input
    4. Rich Text Input
    5. Phone number Input
    6. Single Select Input (select one from the given options)
    7. Radio Input (select one from the given options)

  • Other components which can be used to describe form or add extra information

    1. Headings (h1, h2, h3, h4, h5, h6)
    2. Paragraph
    3. Code Block
    4. Image
    5. Link

  • The right sidebar contains the properties (props) of the selected element in the form editor

  • If no component is selected, the right sidebar contains the form overall settings

  • After updating any parameter in the right sidebar, the changes can be saved by clicking on the save button in the bottom section of the right sidebar

  • The form designer in the editor area has two views

    1. Designer mode (to create/design the form)
    2. Preview mode (to see how the form will look like)

  • Each component can be

    1. added to the form by clicking on them
    2. re-arranged by dragging and dropping in the editor area
    3. deleted by double clicking on the delete icon on the component
    4. selected by double clicking on it
    5. edited by changing the attributes in the right sidebar

  • By clicking on the lowest container (the component with the submit & reset buttons), the form overall settings can be edited

  • Forms are soft deleted, which means that they are not deleted from the database. The deleted field is just marked as true for that given record

Preview forms

  • Forms in preview mode cannot be submitted or reset

Fill Forms (with or without login)

  • The following markers are checked
  • If form is active
  • If the form can be filled by the user
    • If anonymous, the form can be filled by anyone
    • else if the user is logged in, let her fill the form, else deny

Analytics of form responses Form analytics are made for the following fields

  • Toggle Input
  • Single Select Input
  • Radio Input

Notifications

The Push model:

  • The server pushes the notifications to the client via some connection like WebSockets, Long Polling etc.
  • It suffers from certain problems like thundering herd where the server is overwhelmed by a hotspot notification and has to send this to a lot of users all at once.
  • This doesn't scale well

The pull model

  • The server creates a notification object (maybe saved in a database) and the client makes a call to get any new notifications.
  • The client can implement a short polling strategy to get the notifications in a near-real time.
  • In case of hotspot notification, the server is not overloaded because the client ask for it and the server can remain stateless in this regard.

We are using the pull model

  1. The client short polls the server at a regular interval to get it's notifications
  2. The server returns the notifications as a paginated list
Clone this wiki locally