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:
Step 2: Setting up the Next.js Application
Navigate to the project directory:
Install project dependencies:
Start the Next.js development server:
Step 3: Setting up the FastAPI Service
Navigate to the directory for the FastAPI service:
Run the FastAPI service using Uvicorn:
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.
Last updated
Was this helpful?
