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

GitHub - OpenG2P/openg2p-beneficiary-portal: OpenG2P beneficiary self service portalGitHub

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

Your Next.js app is accessible at http://localhost:3000.

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

Your FastAPI service is accessible at http://localhost:8000.

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.