ALL PROJECTS

Everything I've built, with the thinking behind it.

Switch between desktop and mobile previews, open the screenshots, or read the case study to see the problem, my approach, and what I learned.

01Coffee Shop Ordering & POS2026Ongoing

Lore

An ordering, payment and point-of-sale app for Lore Coffee Station in Jaro, Iloilo. Customers customize drinks, order ahead and pay online, while the cashier rings up walk-ins, confirms payments and moves orders through a live kitchen display.

  • Orders update live for both the customer and the counter
  • QR Ph, card, bank transfer and cash, with the shop's real processing fees
  • Register with Senior/PWD discount, open tabs and printable receipts
  • React
  • TypeScript
  • Vite
  • Tailwind CSS
  • Express
  • Socket.IO
  • SQLite
  • Zustand

02E-Services Platform2026

KonektBarangay

A barangay e-services platform where verified residents request documents, book a claim schedule, file blotter reports and follow barangay news, while staff verify residents, review requests and publish announcements from an admin dashboard.

  • Email codes and ID verification before residents can request documents
  • Blotter reports and News & Events alongside document requests
  • Database rules that block role escalation and self-approval
  • Next.js
  • TypeScript
  • Supabase Auth
  • PostgreSQL
  • Supabase Storage
  • Supabase Realtime
  • Cloudflare Turnstile
  • Framer Motion
  • Vercel

03Student Planner2026

Awesome ToDo's

A web-based planner for students that keeps tasks, deadlines, class schedules and grades in one place, with a focus timer and Study Buddy, an AI assistant that knows your tasks and classes.

  • Tasks, calendar, timetable and grade tracker in one app
  • Study Buddy AI chat and "Break down with AI" for big tasks
  • Separate phone and desktop layouts, installable as an app
  • React
  • Vite
  • Node.js + Express
  • MongoDB Atlas
  • JWT
  • Gemini API
  • Nodemailer
  • Render

04Blood Donation Platform2026

DooGo

A blood donation app that connects people who need blood with compatible, verified donors nearby. Seekers request blood and track every response, donors control their availability, and the app follows real donation rules on compatibility, waiting periods and units.

  • Real donation rules: blood type compatibility, 12/16-week waiting periods, one unit per donor
  • Verified donors only, backed by an uploaded medical record
  • Live city view of donors available and blood requests open
  • Next.js
  • TypeScript
  • Firebase Auth
  • Cloud Firestore
  • Firestore Security Rules
  • CSS Modules
  • Phosphor Icons

05Consultation Booking System2026

Teech

A student–faculty consultation booking system. Faculty publish the dates, times and rooms they're free, students request a slot, and faculty confirm or decline, with booking rules enforced by the database itself.

  • Double booking blocked at the database level
  • Separate mobile and desktop layouts on the same URLs
  • Streaks, points and collectible badges that reward showing up
  • Next.js
  • TypeScript
  • Supabase Auth
  • PostgreSQL
  • Supabase Realtime
  • Supabase Storage
  • pg_cron
  • Gemini API
  • CSS Modules
  • Vercel

06Portfolio Website2026

Personal Portfolio

This site: a responsive portfolio that presents my projects, skills, certificates and contact details, with light and dark themes and an AI chatbot that answers questions about my work.

  • AI chatbot with the API key kept on the server
  • Light and dark themes with no flash on load
  • SEO metadata, sitemap and structured data
  • Next.js
  • React
  • CSS
  • Gemini API
  • Vercel

07Portfolio Website2026

Professional Portfolio

A second, recruiter-focused version of my portfolio with a minimal monochrome bento layout that shows my projects, experience, tech stack and certificates at a glance.

  • Minimal bento-card layout built for quick scanning
  • Experience timeline and tech stack with official brand logos
  • Case study pages with desktop and mobile previews
  • Next.js
  • React
  • CSS
  • Simple Icons
  • Gemini API
  • Vercel