LogoLogo
1.1
1.1
  • 🏠Overview
  • 🏢Architecture
  • 📋Registration
    • Registration Interfaces
      • ODK Collect App
      • Self Service Portal
      • API Interface
      • Manual Entry
      • Bulk Export From CSV
    • ID Verification
    • Registry
  • 🅿️Program Management
    • Eligibility Assessment
    • Proxy Means Test
    • Enrolment
    • Deduplication
    • Program Cycles
    • Entitlement
    • Notifications
  • 💵Payments
    • Payment Modes
    • Payment Manager
    • Payment Batches
    • ID Account Mapper
    • Payment Rails
    • Reimbursements
      • Service Provider Portal
  • 🔐Privacy & Security
  • 📊Monitoring and Reporting
  • 🔧System Administration
    • Developer Mode
    • Role-Based Access Control
    • Internationalization (i18n)
    • Document Store
    • Apps
  • ⛓️Workflows
    • Cash grant scenario
    • Immediate Individual Assistance On-Demand
    • Service Provider Reimbursement
  • 🔗Integrations
    • M-PESA Integration
    • Mojaloop Integration
    • MOSIP Integration
      • ODK MTS Connector
      • Registry MTS Connector
      • Integration with e-Signet
  • 📦Releases
    • 1.1.0
      • Release Notes
  • ↔️REST API
  • ⚒️Testing
  • 👥Community
    • Contributing
    • Code of Conduct
  • 📗License
  • Guides
    • 📔How-To Guides
      • Install WireGuard Client on Desktop/Laptop
      • Install WireGuard Client on Android Device
      • Create User and Assign Role
      • Create a Custom Group
      • Create Program
      • Create Self-Service Portal Form
      • Map Self-Service Portal Form
      • Self Register Online
      • Integrate with MOSIP e-Signet
      • Create ODK Form
      • Provide Form Access to Field Agent
      • Download Form on ODK Collect
      • Register Offline
      • Create MTS Connector
        • Create ODK MTS Connector
        • Create OpenG2P Registry MTS Connector
      • Create Eligibility Manager Types
        • Create Default Eligibility Manager
        • Create ID Document Eligibility Manager
        • Create Phone Number Eligibility Manager
      • Create Eligibility Manager under Program
      • Configure Proxy Means Test
      • Enrol Registrants into Program
      • Configure ID Types
      • Create Deduplication Manager under Program
      • Create Deduplication Manager Types
        • Create ID Deduplication Manager
        • Create Phone Number Deduplication
      • Deduplicate Registrants
      • Create Notification Manager Types
        • Create SMS Notification Manager
        • Create Email Notification Manager
        • Create Fast2SMS Notification Manager
      • Create Notification Manager under Program
      • Send Notifications to Individual Registrants
      • Configure Program Manager under Program
      • Create and Approve Program Cycle
      • Multi-Stage Approval
      • Create Entitlement Voucher Template
      • Create Entitlement Manager Type
        • Create Default Entitlement Manager
        • Create Voucher Entitlement Manager
      • Configure Entitlement Manager under Program
      • 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 Payment Manager in Program
      • Prepare and Send Payment
      • Install SmartScanner App
      • Submit Reimbursement Using the Service Provider Portal
      • Reimburse the service provider
    • 📙Documentation Guides
      • Creating Diagrams
      • OpenG2P Module Doc Template
      • Writing Guidelines For How-To Guides
    • 👩‍💻Developer Zone
      • Getting Started
      • Installing OpenG2P On Linux
      • Technology Stack
      • Modules
        • G2P Entitlement In-kind
        • G2P SelfServicePortal
        • OpenG2P Program Payment: G2P Connect Payment Manager
        • G2P Notifications: Wiserv SMS Service Provider
        • G2P Registry: Rest API
        • G2P Formio
        • G2P Registry: Base
        • G2P Registry: Individual
        • G2P: Proxy Means Test
    • 📘Deployment Guide
      • Deployment on Kubernetes
        • K8s Cluster Requirements
        • K8s Cluster Setup
        • Rancher Server Setup
        • NFS Server Setup
        • SSL Certificates using Letsencrypt
      • Post Install Configuration
      • Access to Deployed Setup
      • Packaging OpenG2P Docker
Powered by GitBook
LogoLogo

Copyright © OpenG2P. This work is licensed under Creative Common Attribution (CC-BY-4.0) International license unless otherwise noted.

On this page
  • Technology Stack
  • Functionality
  • Design notes
  • Source code
  • Environment Setup: Next.js and FastAPI Integration
  1. Guides
  2. Developer Zone
  3. Modules

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 tation, 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.

PreviousG2P 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