KonektBarangay

01 — my role

Project Manager & Full-stack Developer · Team project

• Led planning and delivery as Project Manager
• Built the app on Next.js and TypeScript, with Supabase for sign-in, the database, file storage and realtime updates
• Wrote the row-level security rules and database triggers that keep admin roles and approvals staff-only
• Built the three-step document request flow, resident ID verification and the admin tools

02 — key features

• Resident ID verification

  Residents upload a photo of a valid ID after signing in. Staff review it from the admin side and approve or reject it with a reason the resident can see, and document requests unlock once the resident is verified.

• Guided document requests

  Nine document types, from Barangay Clearance to First-Time Job Seeker, plus an "Other" option, in a three-step flow that ends with a summary the resident reviews before submitting.

• Appointment calendar

  A month calendar with hourly slots inside office hours (Monday to Friday, 8 AM to 5 PM). Fully booked and unavailable days are marked.

• Admin tools

  Staff verify residents, filter and search requests, update blotter cases and manage announcements, with live updates and notifications.

03 — key decisions

1. Enforce access in the database with row-level security

   The rules hold even if someone calls the API directly, not just when they use the app.

2. Save a request only after the resident confirms the summary

   Residents review the document, date and time before anything reaches staff.

3. Keep ID photos in a private bucket with short-lived signed links

   Staff can verify residents without the IDs ever being publicly reachable.

04 — design

konektbarangay.vercel.app5 screens

DesktopMobile

• 
• 
• 
• 

• A shared app shell gives residents and staff the same navigation on phone and desktop.
• The layout is built for phones first, since most residents are expected to use one.

05 — stack

• Next.jsApp Router pages and a proxy that guards resident and admin routes
• TypeScriptTyped pages, shared document and community models
• Supabase AuthRegistration, 6-digit email codes, password reset with codes, sessions
• PostgreSQLProfiles, requests, blotter reports, announcements and notifications with row-level security
• Supabase StoragePrivate bucket for resident ID photos, readable only by staff
• Supabase RealtimeLive admin queue, dashboard and notification badge
• Cloudflare TurnstileBot check on sign-up and login
• Framer MotionPage and component transitions
• VercelHosting with automatic deploys from GitHub

06 — links