Skip to content
JNP
Back to home

11 projects

All projects

Everything I've built so far: my own applications, my thesis, and group and individual coursework.

  • workbud-ph.vercel.app
    WorkBud sign-in screen: a headline reading “Every hour and every peso, in one place” beside the sign-in form.

    2026

    WorkBud

    OJT Hours and Expense Tracker

    A mobile-first, installable web app for tracking on-the-job-training hours and what a placement costs. You log each day's time in, time out, break and expenses, and it keeps a running hour total, an itemised view of spending, and an export to hand to a coordinator.

    • React 19
    • Vite
    • Tailwind CSS 4
    • React Router
    • Node.js
    • Express 5
    • Supabase (Postgres, Auth, Storage)
    • Row Level Security
    • vite-plugin-pwa
    • Vercel
  • libspace-flax.vercel.app
    LibSpace sign-in screen with the sign-in form centred over a green-tinted photograph of the Holy Angel University library.

    2026

    LibSpace

    Library Discussion Room Reservation System

    A room-reservation app for the Holy Angel University library. Students check real-time availability of the discussion rooms and request one remotely; front-desk staff approve requests, check groups in and manage rooms and opening hours.

    • React 19
    • Vite
    • Tailwind CSS 4
    • Supabase (Postgres, Auth, Realtime, Storage)
    • Row Level Security
    • Vercel
  • tulong-guro.vercel.app
    TulongGuro landing page with the headline “Grading that gives you your evenings back.”

    Thesis project2026

    TulongGuro

    AI-Assisted Grading and Classroom Management System

    A thesis project for the Computer Science program at Holy Angel University. TulongGuro is a learning management system for teachers in which a vision-language model reads student work, including photos of handwritten essays, against the teacher's rubric and drafts a score and feedback. The teacher reviews, edits and approves every result before a student sees it.

    • React 19
    • Vite
    • Tailwind CSS 4
    • React Router
    • Node.js
    • Express 5
    • Prisma
    • PostgreSQL (Supabase)
    • Supabase Storage
    • Google Gemini (Generative AI SDK)
    • PWA
    • Vercel & Render
  • consult-track.vercel.app
    ConsultTrack sign-in screen with the sign-in form centred over a photograph of the Holy Angel University campus.

    2026

    ConsultTrack

    Capstone Consultation Management System

    A consultation system for a university capstone program, built for Holy Angel University. A thesis group books time from the hours their adviser has published; the adviser approves, offers another time, or declines with a reason. After the session, minutes, attendance and action items are recorded.

    • React 18
    • Vite
    • Tailwind CSS 4
    • Node.js
    • Express
    • PostgreSQL (parameterized SQL via pg)
    • Supabase Auth (email OTP)
    • Vercel
  • drezzit sign-in page with the tagline “Snap your style. Fit your avatar.”, a Continue with Google button, and a cartoon avatar in a yellow dress standing in a pixel-art bedroom

    Individual project2026

    drezzit

    Digital Wardrobe and Avatar Try-On

    An individual project: a digital wardrobe you fill by photographing your real clothes. Each photo is cut out and recognised in the browser, redrawn as a cartoon garment that fits a customisable 2D avatar, and saved to your closet so you can mix outfits in a pixel-art room.

    • React 19
    • Vite
    • Tailwind CSS 4
    • Framer Motion
    • Supabase (Auth, Postgres, Storage)
    • Row Level Security
    • Transformers.js (CLIP)
    • @imgly/background-removal
    • Web Workers
    • PWA
  • Grade Portal sign-in page with the school's logo and name blurred out, the heading “Grade 6 Grade Portal”, and a card with “I am a student” and “I am a teacher” buttons

    Individual project2026

    Grade Portal

    Report-Card Portal for an Elementary School

    An individual project: a mobile-friendly portal where elementary students see their released term grades together on one report-card page. Teachers enter, publish and correct grades for their assigned subjects, and one administrator manages accounts, sections and assignments.

    • Next.js 16
    • TypeScript
    • Tailwind CSS 4
    • shadcn/ui
    • Supabase (Postgres, Auth)
    • Row Level Security
    • Zod
    • Vitest
    • Playwright
  • A finished clipping project in the app's dark interface: a vertical 9:16 clip with an AI score of 78, its generated YouTube title, description, hashtags and hook, a Download button, and the project's source and settings

    Individual projectRuns locally2026

    AI Video Clipper

    Short-Form Video Clipper and Generator

    An individual, personal-use tool that turns a long video into vertical clips for YouTube Shorts, TikTok and Reels. It transcribes the video, picks the best moments with an AI model, crops them to 9:16, burns in captions and normalises the audio. It can also make shorts from scratch in four formats.

    • Next.js 16
    • TypeScript
    • Tailwind CSS 4
    • Supabase (Postgres)
    • Python
    • FFmpeg
    • yt-dlp
    • PySceneDetect
    • Groq (Whisper, LLM)
    • edge-tts
    • Pillow
    • pytest
  • CarePanion logo in orange with the tagline “A Voice-Driven Reminder App for Wellness and Daily Care”

    Group projectNot yet deployed2025

    Carepanion

    Voice-Driven Reminder App for Wellness and Daily Care

    A group project: a Flutter mobile app for wellness and daily-care reminders. One person sets tasks and reminders for someone they look after, and the app reads reminders aloud and raises alarms on the other person's phone. It has not been deployed yet.

    • Flutter
    • Dart
    • Supabase
    • flutter_tts (text-to-speech)
    • Local notifications
    • Kotlin (Android alarms)
  • Six worksite photos with the model's detections drawn on them: hardhats boxed and labelled with confidence scores, and one person flagged NO-Safety Vest.

    Group project2026

    INTELSY PPE Detection

    YOLOv8 Personal Protective Equipment Detection System

    A group final project for INTELSY by the MIGHT Team. A YOLOv8 object-detection model fine-tuned on a labelled worksite dataset finds hardhats, safety vests, masks, gloves and goggles in images and webcam video, as well as the people and missing equipment, and turns each result into a short plain-language summary.

    • Python
    • YOLOv8 (Ultralytics)
    • PyTorch
    • OpenCV
    • Roboflow
    • Jupyter
    • Google Colab
    • pandas & scikit-learn
  • Monster Control Center login screen on a dark blue background, with a red-and-white ball logo, a Player Login card with username and password fields, and a Create Player Account link

    Group project2026

    Monster Control Center

    Location-Based Monster-Catching App on AWS

    A group final project for Cloud Computing (6CloudCom): a Flutter app where players sign in, register monsters at GPS spawn points, and catch the ones within range of where they stand. It runs on Android and the web against a PHP backend on AWS, and can start and stop the backend's EC2 server from inside the app.

    • Flutter
    • Dart
    • flutter_map (OpenStreetMap)
    • Geolocator
    • PHP
    • AWS EC2
    • AWS Lambda & API Gateway
    • Tailscale VPN