Beta

Supkit

A developer-friendly starter template for Vue 3 with Supabase backend, featuring authentication, database CRUD, real-time subscriptions, and file storage out of the box. Includes Pinia state management, Vee-validate forms, and Vitest for testing. Designed for rapid prototyping with auto-importing APIs and HeroIcons integration.

February 4, 2022
View Live Project
nuxttailwindcssfirebase

Project Notice

This project was built some time ago and may contain outdated dependencies or features. Some functionality might no longer work as expected.

Supkit

Note: This project was built in 2022 and may be outdated. Some dependencies or features might no longer work as expected.

App Features

  • Supabase Auth
  • Supabase Database
  • Supabase Realtime Subscription
  • Supabase Storage
  • Profile Management
  • CRUD for Private Notes

Project Features

  • Vue 3 - Composition API, components auto importing, modules, etc.
  • Vite - Instant HMR
  • Tailwind CSS - Utility CSS Framework
  • Use icons from any icon sets in HeroIcons
  • The <script setup> syntax
  • State Management via Pinia
  • APIs auto importing - for Composition API, VueUse and custom composables.
  • Supabase - Open source Firebase alternative

Plugins

Vue Modules

  • VueUse - collection of useful composition APIs
  • Pinia - intuitive, type safe, light and flexible Store for Vue.
  • VueFinalModal - tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.
  • Vue-toaster - toast notification plugin for vue 3
  • Vee-validate - form validation for Vue
  • yup - object schema validation
  • Vitest - Vue 3 testing framework powered by Vite
  • supabase-js - Supabase JS Client

Other Projects

Perimtr
Perimtr

Perimtr is a mobile geofenced attendance and workforce platform for the HR offices of Philippine local government units. Built with Nuxt 4, PostgreSQL, and a Flutter mobile app, it lets office and field teams clock in from their phones while the server verifies each event against geofences, trusted networks, and integrity checks, then turns the record into schedules, leave and overtime under Civil Service Commission rules, CSC Form 48, and payroll exports.

nuxtvueflutterpostgres
View Live Site
TRACE
TRACE

TRACE is a quiet, local-first personal record of what you actually did, built around the idea "Don't optimize your life. Remember it." Built with Flutter, Riverpod, and Drift on SQLite, it lets you log what you built, read, explored, and lived by writing it the way you would say it, then turns that sentence into an entry you confirm in seconds. There are no streaks, badges, or scores, no account is needed, everything is stored on the device, and optional sync to Neon Postgres keeps your record across your own devices.

flutterdartsqliteneon
View Live Site
Libreng Sakay
Libreng Sakay

Libreng Sakay is a real-time public transit tracking and ridership platform for the free bus service of Bataan Province, Philippines. Built with Laravel, Inertia, Vue 3, and Laravel Reverb, it serves passengers, drivers, scanner operators, inspectors, dispatchers, and administrators with live bus positions, tap-to-board passenger counting, dispatch messaging, and ridership reporting, all over WebSockets. The platform is completed by two native Android apps written in Kotlin, the Libreng Sakay Driver app for running trips from the road and the Libreng Sakay Kiosk that counts riders as they tap their Bataeño Pass at the bus door.

laravelvuetailwindcsskotlin
View Live Site
PDS Express
PDS Express

PDS Express is a web app built with Next.js that helps users enter their personal information once and automatically generate a filled CSC Form 212 Personal Data Sheet PDF for government job applications, HR requirements, and other official submissions. Built with Next.js App Router, React, Tailwind CSS, PostgreSQL, Prisma ORM, and pdf-lib, it supports structured PDS sections such as personal information, family background, education, work experience, trainings, and references, while also offering a mobile-friendly experience with Progressive Web App support and planned features like authentication, payments, resume import, and AI-assisted autofill.

ainexttailwindcssneon
View Live Site

© 2025 Leigh Dinaya. All rights reserved.