Presidential Programme For Professionals
Case Study

Presidential Programme For Professionals

#Next Js#Tailwind CSS#Supabase#Sanity

Presidential Programme For Professionals

Overview

Project : Presidential Programme For Professionals Digital Platform

Role : Full-Stack Developer / Systems Builder / Project Manager / Social Media Manager

Period : 13 November 2025 - till now

Scope:

  • Frontend design
  • Registration System
  • Admin Dashboard
  • Supabase backend
  • Blog System
  • Sanity Blog system dashboard
  • Analytics & Exports
  • Hosting, domain, SEO

Features List

  • Online registration using website form and data to supabase
  • Blog section with blog dashboard (sanity) as CMS
  • Google forms for to publish posts for being a writer

Users Registered 7 300+

Problem

The PP4P Team needed a system to showcase their new initiative, boost SEO to reach many people and to integrate online registration of people by saving up their details in a database for future use.

Solution

Build a responsive website application which displays their vision, description and online registration through supabase, and created a dashboard for admins to see people who have registered and export data as csv.

Tech Stack Used

  • Next Js with typescript
  • Supabase
  • Tailwind Css
  • Sanity
  • Google forms
  • Motion wireframes
  • Git / github for version control
  • Vercel for hosting

The Process

The project started on 13 November 2025 when I got a call from the National Chairman of PP4P saying they wanted a website which would act as a front for organization in displaying their movement, objectives, visions and online registration.

Since this was a fast MVP, they wanted a website as soon as possible. I used landingsite.ai and my UI / UX details to create a mockup design for the project, then later built it using Next Js and Tailwind Css for styling.

Screenshots are below.

Below is the first Next Js Home page preview of the PP4P Platform which included:

  • Link to
    • home page,
    • about page,
    • contact us page,
    • programs & activities
    • Join us page which changed to apply membership page

  • Hero section including a carousel
  • About Section
  • Vision and objectives
  • Join the network with explaining of all roles on on the programmes
  • Programs and activities
  • CTA with social media links
  • Footer

At this time the online registration and submitting of details was being integrated by google forms:

Created A google form that will take :

  1. Name
  2. Surname
  3. Gender
  4. Age Group
  5. National ID
  6. Email
  7. Phone Number
  8. Profession
  9. Select the membership tier that you intend to join
  10. Province
  11. District of Origin

All these details were then being saved in an excel database file with a table of the following column.

We used google forms as our backend upto 1628 people, after that we started facing problems with google forms that is when we switched to Supabase.

Project Gallery

Hero Home Page of PP4P

Observation

Hero Home Page of PP4P

Online Registration Form of PP4P

Observation

Online Registration Form of PP4P

PP4P Dashboard For Admin team to track online Registration

Observation

PP4P Dashboard For Admin team to track online Registration

PP4P Perfomance and insights

Observation

PP4P Perfomance and insights