From Static Mockup to Full-Stack Supabase App — Then I Shipped the Portfolio Too

It's Sunday, March 29th. Five days ago I sat down with a 10-day sprint plan and a cup of coffee. I just deployed my portfolio site. Everything is live. Three projects, three GitHub repos, and a dark editorial portfolio at byronpantoja.com connecting them all.

The 10-day sprint took 5 days.

Let me walk through what happened on Days 4 and 5 — because the dashboard is where the sprint went off-script in the best possible way.

Day 4 (March 28): The Dashboard That Grew Up

The original plan for the dashboard was humble: metric cards, a Recharts line chart, a sortable data table, all with hardcoded mock data. A static mockup that shows I can build application-level UI. Estimated time: 2 days.

What actually shipped was a full-stack application.

Live site: mockup-dashboard-baseline.vercel.app Source: github.com/byronPantoja/mockup-dashboard

Somewhere during the build, I realized the dashboard was my chance to demonstrate something the other two projects couldn't — full-stack architecture. The salon is frontend-only. The Shopify store integrates with an external API but doesn't own its backend. A dashboard with real auth and a real database proves I can build the complete stack.

So I added Supabase.

The Architecture That Emerged

The dashboard has three layers:

Public demo — anyone can visit the root URL and see the operations dashboard with seed data. Metric cards, revenue chart, leads table, task sidebar. This is fast because it never hits the database — the seed data is served through Supabase's Row Level Security policies.

Contact form — visitors can click "Contact Me" and submit their info. This writes a real row to a Postgres table in Supabase. The form validates inputs and shows success/error states.

Admin panel — behind authentication. Log in at /login with Supabase Auth, and you land on /admin — a completely different view showing real contact form submissions with status cycling (New → Reviewed → Contacted → Archived), expandable message rows, sortable columns, and inline delete.

The key architectural decision was separating seed data from real data at the database level. The leads table has an is_seed boolean. Three RLS policies enforce access:

• Anonymous users see only seed data (is_seed = true)
• Anonymous users can insert contact form submissions (is_seed = false)
• Authenticated users get full CRUD access

This means the public demo always loads fast with predictable data, the contact form writes to a real database, and the admin panel shows only real submissions. Even if someone bypassed the frontend, Postgres itself would reject unauthorized access.

The Custom Design System

I didn't reach for shadcn/ui or any component library. I built a "Luminous Professional" design system from scratch — borderless, tonal surfaces with ambient shadows. No borders anywhere. Hierarchy comes from surface color depth, not lines. Every color, shadow, and spacing value is a CSS custom property consumed through Tailwind.

Looking at it now, this might be the strongest visual design in the portfolio. The borderless approach gives it a calm, premium feel that most dashboards don't have.

The Admin Leads Table

This is the most complex component I've ever built. Interactive data table with:

• Status badges that cycle through four states on click, persisting to Supabase
• Pulsing blue dots for unread leads
• Expandable rows showing the full message and role
• Sortable columns (name, date)
• Status filter buttons
• Inline delete with optimistic UI updates

Every interaction writes to the real database. This isn't a mockup of a table. It's a working CRM interface.

Day 5 (March 29): The Portfolio Site

With three projects deployed, I needed a portfolio tying them together. I studied springsummer.dk — a Copenhagen design agency — and built a dark, monochromatic, editorial single-page portfolio:

• Near-black background (#0C0C0C) with warm off-white text
• DM Serif Display headlines mixing regular and italic weights
• Asymmetric project layout with screenshots of all three deployed sites
• Subtle noise overlay and vertical grid lines for texture
• A pulsing "Available for work" indicator

The portfolio doesn't try to be flashy. It loads fast, shows the work clearly, and makes it easy for an employer to click through to the live sites and GitHub repos.

The Final Scorecard

| Day | Date | What Shipped | |-----|------|-------------| | 1 | Mar 25 | Sprint planned, repos created, salon started | | 2 | Mar 26 | Serenity Studio — multi-page salon site with booking calendar | | 3 | Mar 27 | That's G — headless Shopify storefront with live API data | | 4 | Mar 28 | BaseLine — full-stack dashboard with Supabase + auth + RLS | | 5 | Mar 29 | byronpantoja.com — editorial portfolio site. Blog posts. Done. |

Five days. Four deployed sites. Three GitHub repos with aligned READMEs documenting the AI workflow. Every site responsive, every link working, every interaction polished.

What I Actually Learned

AI doesn't replace architecture decisions. It replaces the hours between making a decision and seeing it on screen. The RLS policy design took several iterations to get right. The decision to separate seed data from real data was mine. Claude helped me implement it fast — but the judgment call was human.

Scope discipline is the meta-skill. Killing the Mindbody API integration on Day 2 saved the sprint. Adding Supabase to the dashboard on Day 4 was the right scope expansion because it proved a skill the other projects didn't cover. Knowing when to cut and when to expand is the difference between shipping and spiraling.

The portfolio IS the proof of AI-assisted speed. When I write to employers, I don't bury the AI workflow — I lead with it. "I built three production-quality NextJS sites in 5 days using AI-assisted development" is a value proposition. It says: hire me and I'll ship faster than you expect.

Building with a real backend changes the conversation. The salon and store are impressive frontend work. The dashboard with Supabase auth, Postgres, and RLS is a full-stack application. That's what moves you from "can build landing pages" to "can build systems." Supabase makes this accessible — I set up the entire backend in an afternoon.

What's Next

The portfolio sprint is complete. Now the real work begins:

1. Update my OnlineJobs.ph profile with byronpantoja.com and my NextJS skills
2. Start applying for remote NextJS development work on OLJ
3. Continue building — I'm already thinking about the next project. Maybe a real SaaS tool. Maybe a mobile app. The AI workflow doesn't stop at portfolios.

Five days ago I had zero deployed NextJS projects. Today I have a salon site, a headless Shopify store, a full-stack dashboard, and a portfolio connecting them all. Every day I spend building now stacks on top of what's already live.

The sprint is over. The career pivot is just starting.

---

This is Part 4 of a 4-part series on building a web developer portfolio with AI-assisted development. Start from the beginning: The Plan (Day 1) · Salon (Day 2) · Shopify Store (Day 3) · Dashboard + Portfolio (this post).