LogoLogo
CommunityBlogLicense
latest
latest
  • Overview
  • Social Registry
    • Features
      • Individuals and Households
        • 📔User Guides
          • 📔Create an Individual Registrant
          • 📔Create a Group and Add Individual Registrants to the Group
          • 📔Import CSV file to Social Registry
      • Offline Capabilities
        • ODK Importer
          • 📔User Guide
            • 📔Configure and Import ODK Form
            • 📔Import Specific ODK Forms using ODK Instance ID
        • Enumerator ID
      • Online Self Registration
      • Online Assisted Registration
        • 📔User Guides
          • 📔Create a New Household
          • 📔Create a New Individual in Registration Portal
          • 📔Create a New Portal User
          • 📔Configure Portal User to Limit Accessing Location
      • Deduplication
        • 📔User Guides
          • 📔Configure ID Deduplication, Deduplicate, and Save Duplicate Groups/Individuals
        • Deduplicator Service
      • Locking of Records
      • Dynamic Registry
      • Document Storage
      • Configurability
        • 📔User Guide
          • 📔Configure ID Types
          • 📔Configure Registrant Tags
          • 📔Configure Gender Types
          • 📔Configure Relationships
          • 📔Configure Group Types
          • 📔Configure Group Membership Kind
      • Role Based Access Control
        • 📔User Guide
          • 📔Create User
          • 📔Assign a Role to a User
      • Geo Targeting
      • Data Sharing
      • Multi-language Support
        • 📔User Guides
          • 📔Set Language Preference
      • Privacy and Security
      • Interoperability
      • Real-time Reporting
      • Monitoring and Reporting
      • ID Integration
        • ID Validation and Tokenisation
        • ID Authentication
          • 📔User Guides
            • 📔Configure eSignet Auth Provider for ID Authentication
            • 📔ID Authentication Process
            • 📔eSignet Client Creation
        • eSignet Integration
        • Fayda ID Integration
      • Verifiable Credentials Issuance
        • 📔User Guides
          • 📔Configure Inji to download Social Registry VCs
      • Automatic Computation of PMT
      • Record Revision History
      • SPAR Integration for Account Info
      • Unique Social ID
      • Audit Logs
      • Rapid Deployment Framework
      • Performance & Scale
      • Draft and Publish
    • Versions
    • Deployment
      • Domain names and Certificates
      • Install Odoo Modules
      • Packaging
        • 📘Docker Packaging Guide
        • 📘Helm Packaging Guide
    • Developer Zone
      • Technology Stack
      • API Reference
        • Search APIs
        • Individual APIs
        • Group APIs
      • Repositories
      • Background Tasks
      • Developer Install
        • 📘Developer Install of OpenG2P Package on Linux
      • Design Notes
        • Data Sharing
      • Odoo Modules
        • G2P Registry Datashare: RabbitMQ
        • ODK App User Mapping
      • Performance Testing
  • PBMS
    • Features
      • Program Management
        • Role of a Program Manager
        • Program Life Cycle
      • Program Disbursement Cycles
        • 📔User Guides
          • 📔Create Program Fund
          • 📔Create Cycle Manager for a Program
      • Beneficiary Management
        • Beneficiary Registry
          • 📔User Guides
            • 📔Create an Individual Registrant
            • 📔Create a Group and Add Individual Registrants to the Group
            • 📔Assign a Program to a Group
            • 📔Assign a Program to an Individual
        • Beneficiary Registry Configurations
          • 📔User Guides
            • 📔Configure ID Types
            • 📔Configure Registrant Tags
            • 📔Configure Gender Types
            • 📔Configure Relationships
            • 📔Configure Group Types
            • 📔Configure Group Membership Kind
        • Registration
          • 📔User Guides
            • 📔Import CSV File to Registry Module
      • ID Verification
      • Eligibility
        • Proxy Means Test
        • 📔User Guides
          • 📔Create Eligibility Manager Types
            • 📔Configure Default Eligibility Manager
            • 📔Create ID Document Eligibility Manager
            • 📔Create Phone Number Eligibility Manager
          • 📔Configure Proxy Means Test
          • 📔Verify Eligibility of Enrolled Registrants
      • Deduplication
        • 📔User Guides
          • 📔Deduplicate Registrants
          • 📔Create Deduplication Manager Types
            • 📔Configure Default Deduplication Manager
            • 📔Create ID Deduplication Manager
            • 📔Create Phone Number Deduplication
      • Enrolment
        • 📔User Guides
          • 📔Enroll Registrants into Program
          • 📔Auto-Enroll New Registrants into a Program
          • 📔Enroll Eligible Individual Registrants into a Program
      • Entitlement
        • 📔User Guides
          • 📔Multi-Stage Approval
          • 📔Create Entitlement Manager Type
            • 📔Create Default Entitlement Manager
            • 📔Create Voucher Entitlement Manager
            • 📔Configure Cash Entitlement Manager
          • 📔Create Entitlement Voucher Template
          • 📔Configure the Payments File with QR Code
          • 📔Configure Default Cycle Managers
          • 📔Export Beneficiaries Approved Entitlement
      • Disbursement
        • Payment Batches
        • In-Kind Transfer
          • 📔User Guides
            • 📔Create a Product in Inventory
            • 📔Configure In-Kind Entitlement Manager
            • 📔Create and Approve Program Cycle
            • 📔Verify Eligibility of Registrants in a Cycle
        • Digital Cash Transfer
        • e-Voucher
        • 📔User Guides
          • Prepare and Send Payment
      • Self Service Portal
        • 📔User Guides
          • 📔Create Form and Map with Program
          • 📔Configure Login Providers for Beneficiary Portal
          • 📔Self Register Online
      • Document Management
      • Multi-tenancy
      • Notifications
        • 📔User Guides
          • 📔Send Notifications to Individual Registrants
          • 📔Create Notification Manager Types
            • 📔Create SMS Notification Manager
            • 📔Create Email Notification Manager
            • 📔Create Fast2SMS Notification Manager
          • 📔Create Notification Manager under Program
      • Accounting
      • Administration
        • RBAC
          • 📔User Guides
            • 📔Create User and Assign Role
            • 📔Configure Keycloak Authentication Provider for User Log in
        • i18n
      • ODK Importer
        • 📔User Guides
          • 📔Configure and Import ODK Form
          • 📔Import Specific ODK Forms using ODK Instance ID
          • 📔Import Social Registry Data into PBMS
      • MTS Connector
        • 📔User Guides
          • 📔Create MTS Connector
            • 📔Create ODK MTS Connector
            • 📔Create OpenG2P Registry MTS Connector
      • Audit Logs
      • Service Provider Portal
        • 📔User Guides
          • 📔Submit Reimbursement Using the Service Provider Portal
          • 📔Reimburse the Service Provider
      • Interoperability
      • Privacy and Security
      • Periodic Biometric Authentication for Beneficiaries
      • Beneficiary Exit Process
      • Verifiable Credential Issuance
        • 📔User Guides
          • 📔Configure Inji to download Beneficiary VCs
      • Deduplication
      • Manual In-Kind Entitlement
      • Print Disbursement Summary
      • Monitoring & Reporting
        • Logging
      • Priority List
      • Offline Capabilities
      • Grievance Redress Mechanism
      • Claim and Attest
    • Versions
    • Developer Zone
      • Odoo Modules
        • G2P Enumerator
        • OpenG2P Registry MTS Connector
        • G2P Documents Store
        • MTS Connector
        • G2P Formio
        • G2P Registry: Rest API Extension Demo
        • G2P Registry: Additional Info REST API
        • G2P Registry: Bank Details Rest API
        • G2P Registry: Additional Info
        • G2P Registry: Membership
        • G2P Registry: Groups
        • G2P Registry: Individual
        • G2P Registry: Base
        • G2P Registry: Rest API
        • G2P Registry: Bank Details
        • OpenG2P Program Payment (Payment Hub EE)
        • OpenG2P Program Payments: In Files
        • G2P Program : Program Registrant Info Rest API
        • OpenG2P Entitlement: Differential
        • OpenG2P Program: Approval
        • OpenG2P Program: Assessment
        • G2P Program: Registrant Info
        • OpenG2P Program Payment: Simple Mpesa Payment Manager
        • OpenG2P Programs: Cycleless
        • OpenG2P Entitlement: In-Kind
        • G2P Notifications: Wiserv SMS Service Provider
        • G2P: Proxy Means Test
        • G2P Programs: REST API
        • G2P Program Payment (Payment Interoperability Layer)
        • OpenG2P Entitlement: Voucher
        • OpenG2P Programs: Reimbursement
        • OpenG2P Program Payment: Cash
        • OpenG2P Program: Documents
        • OpenG2P Program Payment: G2P Connect Payment Manager
        • OpenG2P Programs: Autoenrol
        • G2P ODK Importer
        • G2P Service Provider Beneficiary Management
        • OpenID Connect Authentication
        • G2P Auth: OIDC - Reg ID
        • G2P OpenID VCI: Base
        • G2P OpenID VCI: Programs
        • G2P OpenID VCI: Rest API
        • G2P Program Datashare: RabbitMQ
      • Developer Install on Linux
      • Repositories
        • openg2p-fastapi-common
          • OpenG2P FastAPI Common
          • OpenG2P FastAPI Auth
          • OpenG2P Common: G2P Connect ID Mapper
        • social-payments-account-registry
        • g2p-bridge
        • openg2p-packaging
        • openg2p-security
        • spar-load-test
        • 4sure
        • G2P SelfServicePortal
      • Technology Stack
    • Deployment
      • i18n
      • Installation of Odoo Modules
      • Domain names and Certificates
      • Helm Charts
  • SPAR
    • Features
      • SPAR Mapper
      • SPAR Self Service
      • Privacy & Security
      • Interoperability
      • Performance & Scale
      • Monitoring & Reporting
    • Deployment
      • Domain Names and Certificates
      • Helm Charts
    • 📔User Guides
      • 📔Link FA (Self Service)
      • 📔Link FA (Admin)
    • Development
      • Jira Board
      • Testing
        • Unit Testing
        • Functional Testing
        • Performance Testing
          • Mapper
            • Resolve API
            • Link API
            • Unlink API
            • Update API
      • Developer Install
        • SPAR Mapper API
        • SPAR Self Service API
        • SPAR Self Service UI
      • Repositories
      • API Reference
      • Tech Guides
    • Releases
      • 1.0.0
      • 1.1.0
  • G2P Bridge
    • Features
      • Extensibility - Connect to Sponsor Banks
      • Account Mapper Resolution
      • Reconciliation with Sponsor Bank
      • Scaling for High Volumes
      • Interoperability
      • Privacy & Security
      • Monitoring & Reporting
    • Deployment
      • Deployment of G2P Bridge
      • Deployment of Example Bank
      • Bank Connector Interface Guide
      • PBMS Configuration
    • Developer Zone
      • Design
        • IN APIs from PBMS
          • create_disbursement_envelope
          • cancel_disbursement_envelope
          • create_disbursements
          • cancel_disbursements
          • get_disbursement_envelope_status
          • get_disbursement_status
        • OUT APIs to Mapper
          • resolve
        • OUT APIs to Bank
          • check_funds_with_bank
          • block_funds_with_bank
          • disburse_funds_from_bank
        • IN APIs from Bank
          • upload_mt940
        • Helper Tables
          • benefit_program_configuration
        • Configuration parameters
        • Bank Connectors
        • Physical Organization
        • Example Bank
          • example-bank-models
          • example-bank-api
          • example-bank-celery
      • Testing
        • Unit Testing
        • Functional Testing
        • Performance Testing
      • Repositories
      • Developer Install
        • G2P Bridge
        • Example Bank
      • API Reference
    • Tech Guides
    • User Guides
    • Releases
      • 1.0.2
  • PBMS-Gen2
    • Developer Zone
      • Design
        • Concept
        • PBMS (Odoo)
  • Utilities and Tools
    • ODK
      • 📔User Guides
        • 📔Create a Project for a Program
        • 📔Create a Form
        • 📔Upload a Form
        • 📔Upload revised Form
        • 📔Test a Form
        • 📔Publish a Form
        • 📔Provide Form Access to Field Agent
        • 📔Download a Form on ODK Collect
        • 📔Delete a Form
        • 📔Register Offline
    • 4Sure Verifier App
      • Installation Guide for 4Sure Application
      • 📔User Guides
        • 📔Verify Digital Credentials using 4Sure Application
        • 📔Verify and Populate the form in ODK Collect using 4Sure Application
      • 4Sure Test Summary
    • Smartscanner
      • 📔User Guides
    • Registration Tool Kit
    • Unified Conversation Agent (UCA)
      • Modal Context Protocol(MCP)
      • Model Context Protocol (MCP) Implementation in UCA
  • Testing
    • Test Workflow
    • Automation Framework
  • Monitoring and Reporting
    • Apache Superset
    • Reporting Framework
      • 📔User Guides
        • 📔Connector Creation Guide
        • 📔Dashboards Creation Guide
        • 📔Installation & Troubleshooting
      • Kafka Connect Transform Reference
    • System Logging
    • System Health
  • Privacy and Security
    • Key Manager
  • Data Share
    • OpenG2P - IUDX
  • Interoperability
  • Deployment
    • Base Infrastructure
      • Wireguard Bastion
        • Install WireGuard Client on Android Device
        • Wireguard Access to Users
        • Install WireGuard Client on Desktop
      • NFS Server
      • Rancher Cluster
      • OpenG2P Cluster
        • Kubernetes
          • Firewall
          • Istio
          • Adding Nodes to Cluster
          • Deleting Nodes from Cluster
        • Prometheus & Grafana
        • Fluentd & OpenSearch
          • DEPRECATED - OpenSearch
        • Landing Page For OpenG2P
      • Load Balancer
        • Nginx
        • AWS
    • Resource Requirements
    • Helm Charts
    • Upgrades
    • Production
    • OpenG2P In a Box
    • Packaging
    • Versioning
    • Additional Guides
      • Automatic Build and Upload of Private Dockers
      • Generate SSL Certificates using Letsencrypt
      • Packaging Odoo based Docker
      • AWS
        • Create ACM Certificate on AWS
        • Create Security Group on AWS
        • Domain mapping on AWS Route53
        • Make Environment Publicly Accessible using AWS LB Configuration
      • Private Access Channel
      • Odoo Post Install Configuration
      • Pulling Docker from Private Repository on Docker Hub
      • Keycloak Client Creation
      • Troubleshooting: "fsnotify watcher" warning
      • Uninstalling Applications from Rancher UI
      • Access a Database from Outside the Cluster
      • Configure External Database to Connect OpenG2P Environment
      • Configure IPSec VPN Gateway to Connect to External Systems using Strongswan
      • Troubleshooting
        • PostgreSQL Database not Starting due to Replication Checkpoint Error
        • No Space Left on the Device Warning
      • Restart Deployment or StatefulSets to Redistribute Pods across Nodes
      • Rerun Jobs in Kubernetes Cluster
      • Finding URLs in the System
      • Transitioning PostgreSQL From Docker on K8s to Standalone PostgreSQL
      • Restore a PVC from an NFS Folder and Attach it to a Pod
      • View System Logs on the OpenSearch Dashboard
      • Set up Slack alerts for a Kubernetes cluster
      • Importing Dashboards on the Superset UI for OpenG2P Applications
      • Scaling Down an Environment to Optimize Resource Usage
      • Kubernetes Master Nodes
      • Enabling Keycloak User Self-Registration
      • Automating Cache Cleanup on K8s Cluster Nodes with Cron Job
    • Persistent Storage
      • Resizing Persistent Volume Claim in Kubernetes Cluster
  • 📒Guides
    • 📔User Guides
      • PBMS
        • 📔Create Program
        • 📔Configure Payment Manager in Program
        • 📔Create Eligibility Manager under Program
        • 📔Create Program Manager for a Program
        • 📔Create Manager Type
          • 📔Create Payment Manager Types
            • 📔Create Payment Hub EE Payment Manager
            • 📔Create Payment Interoperability Layer Payment Manager
            • 📔Create Default Payment Manager
            • 📔Create Cash Payment Manager
            • 📔Create File Payment Manager
        • 📔Configure Entitlement Manager under Program
        • 📔Archive, Delete, End, and Re-activate a Program
        • 📔Configure Default Program Manager
        • 📔Create Deduplication Manager under Program
    • Documentation Guides
      • Documentation Guidelines
        • Embed a Miro diagram
      • OpenG2P Module Doc Template
  • Use Cases
    • Farmer Registry
      • Reference Design: Farmer Registry
  • Releases
    • 1.1.0
      • Release Notes
  • License
    • OpenG2P Support Policy
  • Community
    • Contributing
    • Code of Conduct
  • Blogs
    • OpenG2P and SDG Goals
Powered by GitBook
LogoLogo

Copyright © 2024 OpenG2P. This work is licensed under Creative Commons Attribution International LicenseCC-BY-4.0 unless otherwise noted.

On this page
  • Technology stack
  • Functionality
  • Design notes
  • Source code
  • Environment setup: Next.js and FastAPI Integration

Was this helpful?

  1. PBMS
  2. Developer Zone
  3. Repositories

G2P SelfServicePortal

Technology stack

  • Utilizes Next.js as the primary framework for the front-end.

  • Tailwind CSS is employed for styling and responsive design.

  • tsed-formio for using formio forms alongside tailwind

Functionality

Overview: The self-service portal is a reference implementation, developed with Next.js and enhanced with Tailwind, offers users the capability to log in using their MOSIP ID. It enables them to browse and access available programs, including forms for specific programs. Users can conveniently submit these forms. Additionally, the self-service portal provides access to a wide range of programs across various domains and offers an efficient search feature for locating specific programs

Supported Functionality:

  • Access and submit forms of programs availble

  • Since its reference implementation , each components can be tailored to any different design the country needs

  • Integration with other OpenG2P API's for data processing

Design notes

User Authentication

Program Accessibility:

  • Provides a user-friendly interface for users to explore available programs.

  • Ensures seamless navigation between different program categories.

Form Handling:

  • Offers program-specific forms for users to submit.

  • Validates and securely stores form data.

Program Search:

  • Enables easy program discovery through a robust search feature.

  • Optimizes search functionality for quick and precise results

User Experience (UX):

  • Focuses on creating an intuitive and visually appealing user interface.

  • Prioritizes responsive design to ensure a seamless experience on different devices.

Error Handling:

  • Includes error handling mechanisms to address user input errors and system issues.

  • Provides clear and informative error messages to assist users

Future Enhancements:

  • Identifies potential areas for future enhancements, such as integration with other systems or additional features.

Source code

Environment setup: Next.js and FastAPI Integration

Prerequisites:

  • Node.js and npm installed.

  • Python 3.x installed.

  • A code editor for development (e.g., Visual Studio Code).

Step 1: Clone the Repository

  • Open your terminal.

  • Clone the project repository from the provided link:

git clone https://github.com/OpenG2P/openg2p-portal.git

Step 2: Setting up the Next.js Application

  • Navigate to the project directory:

cd openg2p-portal
  • Install project dependencies:

npm install
  • Start the Next.js development server:

npm run dev

Step 3: Setting up the FastAPI Service

  • Navigate to the directory for the FastAPI service:

cd fastapi-service
  • Run the FastAPI service using Uvicorn:

uvicorn main:app --reload

Step 4: Integrate Next.js with FastAPI

  • In your Next.js app is using client-side code to make HTTP requests to your FastAPI service's endpoints (e.g., http://localhost:8000).

  • By Utilizing libraries like Axios or Fetch for making HTTP requests from your Next.js app.

Previous4sureNextTechnology Stack

Last updated 8 months ago

Was this helpful?

Your Next.js app is accessible at .

Your FastAPI service is accessible at .

http://localhost:3000
http://localhost:8000
https://github.com/OpenG2P/openg2p-portal.git