LogoLogo
PlatformUse CasesCommunityBlog
1.2
1.2
  • 🏠Home
  • 🍩PLATFORM
    • Architecture
    • Modules
      • Program & Beneficiary Management System
        • Program Management
        • Program Disbursement Cycles
        • Beneficiary Management
        • ID Verification
        • Beneficiary Registry
        • Eligibility
          • Proxy Means Test
        • Deduplication
        • Enrolment
        • Entitlement
        • Disbursement
          • In-kind Transfer
          • Digital Cash Transfer
          • Voucher
        • Self Service Portal
        • Document Management
        • Multi-tenancy
        • Notifications
        • Accounting
        • Administration
          • Multi-tenancy
          • RBAC
          • i18n
      • Social Registry
      • Registration Tool Kit
        • ODK Collection App
      • SPAR
      • G2P Cash Transfer Bridge
        • File-based Payment Backend
      • 4Sure Verifier
    • Monitoring and Reporting
    • Logging
    • Privacy and Security
      • Key Manager
      • Key Manager Architecture
    • Interoperability
    • Integrations
      • OpenG2P eSignet Integration
      • OpenG2P M-Pesa Integration
      • OpenG2P Mojaloop Integration
    • Technology Stack
    • Reference
      • ↔️API
    • Releases
      • 1.1.0
        • Release Notes
    • License
      • OpenG2P Support Policy
    • FAQ
  • ⛎USE CASES
    • Use Cases
      • Immediate Assistance On Demand
      • Registration using Self Service Portal
      • Registration in Low Connectivity Areas
      • Service Provider Reimbursement
  • 🗄️DEPLOYMENT
    • Deployment Architecture
    • Infrastructure Setup
      • Hardware Requirements
      • Wireguard Server Setup
      • Rancher Setup
      • NFS Server Setup
      • OpenG2P K8s Cluster Setup
      • Loadbalancer Setup
    • External Components Setup
      • PostgreSQL Server Deployment
      • Keycloak Deployment
      • Minio Deployment
      • ODK Central Deployment
      • Kafka Deployment
      • Logging & OpenSearch Deployment
      • Keymanager Deployment
      • eSignet Deployment
    • OpenG2P Modules Deployment
      • PBMS Deployment
        • Post Install Configuration
      • Social Registry Deployment
      • GCTB Deployment
      • SPAR Deployment
        • SPAR Post Installation Configuration
      • Reporting Deployment
    • Deployment Guides
      • Giving Access to Users
      • Packaging OpenG2P Docker
      • SSL Certificates using Letsencrypt
      • Install WireGuard Client on Desktop/Laptop
      • Install WireGuard Client on Android Device
      • Make Environment Publicly Accessible using AWS LB Configuration
  • 👨‍💻DEVELOPER ZONE
    • Getting Started
      • Installing OpenG2P On Linux
    • Repositories
      • openg2p-mts
        • MTS Connector
        • OpenG2P Registry MTS Connector
      • openg2p-documents
      • openg2p-formio
        • G2P Formio
      • openg2p-registry
        • G2P Registry: Rest API Extension Demo
        • G2P Registry: Additional Info REST API
        • G2P Registry: Bank Details Rest API
        • G2P Registry: Additional Info
        • G2P Registry:Bank Details
        • G2P Registry:Membership
        • G2P Registry: Group
        • G2P Registry: Individual
        • G2P Registry: Base
        • G2P Registry: Rest API
      • openg2p-program
        • OpenG2P Program Payments: In Files
        • OpenG2P Program: Documents
        • OpenG2P Program Payment (Payment Hub EE)
        • G2P Programs: REST API
        • G2P Program : Program Registrant Info Rest API
        • OpenG2P Entitlement: Differential
        • G2P Program Payment Manager: Payment Interoperability Layer
        • G2P Program Approval
        • OpenG2P Entitlement Voucher
        • OpenG2P Program Assessment
        • OpenG2P Program Reimbursement
        • OpenG2P Program Registrant Info
        • OpenG2P Program Payment Cash
        • OpenG2P Program Payment Simple Mpesa Payment Manager
        • OpenG2P Programs Cycleless
        • OpenG2P Programs Autoenrol
        • OpenG2P Entitlement In-kind
        • G2P SelfServicePortal
        • OpenG2P Program Payment: G2P Connect Payment Manager
        • G2P Notifications: Wiserv SMS Service Provider
        • G2P: Proxy Means Test
      • openg2p-testing
      • openg2p-fastapi-template
      • openg2p-fastapi-common
        • OpenG2P FastAPI Common
        • OpenG2P FastAPI Auth
        • OpenG2P Common: G2P Connect ID Mapper
      • social-payments-account-registry
      • g2p-cash-transfer-bridge
      • openg2p-deployment
      • openg2p-documentation
      • openg2p-helm
      • openg2p-theme
      • openg2p-portal-api
      • openg2p-mosip
      • openg2p-notifications
      • openg2p-packaging
      • openg2p-importers
        • G2P ODK Importer
      • openg2p-documents
      • openg2p-reporting
      • openg2p-self-service-portal
      • openg2p-portal
      • odoo-json-field
      • spar-ui
      • openg2p-auth
      • openg2p-voucher-scanner-app
      • openg2p-security
      • openg2p-mts
      • server-auth
      • openg2p-data
      • openg2p-esignet
      • spar-load-test
      • 4sure
    • Testing
      • Test Workflow
      • Automation Framework
  • 👩‍💻COMMUNITY
    • Contributing
    • Code of Conduct
  • 📔USER GUIDES
    • Platform Guides
      • Registration
        • Self Register Online
        • ODK
          • 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 Form on ODK Collect
          • Delete a Form
          • Register Offline
        • ODK Importer
          • Customize the ODK Importer Configuration based on the ODK Form Fields
      • Authentication
        • Integrate with MOSIP e-Signet
      • Deduplication
        • Deduplicate Registrants
      • Eligibility and Program Enrollment
        • Enrol Registrants into Program
        • Program
          • Create Manager Type
            • Create Eligibility Manager Types
              • Create Default Eligibility Manager
              • Create ID Document Eligibility Manager
              • Create Phone Number Eligibility Manager
            • Create Deduplication Manager Types
              • Create ID Deduplication Manager
              • Create Phone Number Deduplication
            • Create Notification Manager Types
              • Create SMS Notification Manager
              • Create Email Notification Manager
              • Create Fast2SMS Notification Manager
            • Create Entitlement Manager Type
              • Create Default Entitlement Manager
              • Create Voucher Entitlement Manager
            • 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
          • Create Program
          • Map Self-Service Portal Form
          • Create Eligibility Manager under Program
          • Create Deduplication Manager under Program
          • Create Notification Manager under Program
          • Configure Program Manager under Program
          • Create Entitlement Voucher Template
        • Configuration
          • Configure Proxy Means Test
          • Configure ID Types
          • Configure Entitlement Manager under Program
          • Configure Payment Manager in Program
        • Approval
          • Create and Approve Program Cycle
          • Multi-Stage Approval
        • MTS Connector
          • Create MTS Connector
            • Create ODK MTS Connector
            • Create OpenG2P Registry MTS Connector
        • Settings
          • Create User and Assign Role
        • Website
          • Create Self-Service Portal Form
      • Notification
        • Send Notifications to Individual Registrants
        • Prepare and Send Payment
      • Entitlement
        • Install SmartScanner App
      • Cash Transfer
        • Reimbursement
          • Submit Reimbursement Using the Service Provider Portal
          • Reimburse the service provider
      • Accounting and Reporting
      • SPAR
        • Self Update ID with Financial Address information
        • Admin Guide to Link ID with Financial Address information
      • 4Sure
        • Verify Digital Credentials using 4Sure
        • Verify and Populate the form in ODK Collect using 4Sure
    • Documentation Guides
      • Documentation Guidelines
      • OpenG2P Module Doc Template
  • BLOG
    • Articles
      • OpenG2P and SDG Goals
      • OpenG2P - A Building Block for DPI
    • Case Studies
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
  1. DEVELOPER ZONE
  2. Repositories
  3. openg2p-program

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.

PreviousOpenG2P Entitlement In-kindNextOpenG2P Program Payment: G2P Connect Payment Manager

Last updated 1 year ago

Your Next.js app is accessible at .

Your FastAPI service is accessible at .

👨‍💻
http://localhost:3000
http://localhost:8000
GitHub - OpenG2P/openg2p-portal: OpenG2P beneficiary self service portalGitHub
Logo