SkillMark
The skills network for the trades. A portfolio-first professional network where skilled tradespeople (electricians, plumbers, HVAC techs, welders, and more) build a portable career profile from real job photos — not resumes — and companies find and connect with them.
🔗 Live demo: joinskillmark.com
Table of Contents
Overview
Most professional networks are built for white-collar, resume-legible careers. SkillMark is built for the trades, where the proof of skill is the work itself. Tradespeople document real jobs with photos, build a permanent portfolio that travels with them across employers, and get discovered by companies hiring for proven ability.
Built solo as a full-stack product: 28 routes, 50 server actions, and 16 row-level-security–protected Postgres tables across ~11K lines of TypeScript, deployed on Vercel with live users.
Tech Stack
- Framework: Next.js (App Router, React Server Components, Server Actions)
- Language: TypeScript
- Backend / DB: Supabase — Postgres, Auth, Storage, Row-Level Security
- Styling: Tailwind CSS + custom CSS for the marketing landing
- Payments: Stripe (subscription billing, env-guarded)
- Hosting: Vercel
Features
- Auth — email/password signup with confirmation, login, password reset, and self-serve account deletion (cascading data removal).
- Two account types — individual tradespeople and company/business accounts, each with a tailored onboarding flow.
- Profiles — avatar/banner, headline, bio, trade, work history, certifications, and a project portfolio, with public profile views and QR codes for sharing in person.
- Projects — create/edit/delete with cover/before/after photos; in-browser image compression before upload.
- Dashboard feed — a ranked activity feed of recent projects with a custom scoring algorithm (connections, recency, engagement), likes, and comments.
- Search — live filtering by trade, experience level, location, union status, and availability.
- Messaging — real-time direct messages with unread badges and user blocking (enforced at the database level).
- Connections & collaboration — connect with others and collaborate on shared projects.
- Premium tier — Stripe-billed subscription with search/feed boosts and "who viewed your profile" analytics.
- Referrals — earn free premium months for inviting active members.
- Guest browsing — profiles, projects, search, and the feed are public; an account is only required to take actions.
Architecture
app/
page.tsx Marketing landing page (custom landing.css)
dashboard/ Ranked activity feed (server component + client feed)
[username]/ Public profile pages
projects/ Project create / edit / detail + photo uploads
search/ Live people/company search
messages/ Real-time messaging
settings/ Profile + account management
onboarding/ Worker and company onboarding flows
actions/ Server Actions (auth, profile, projects, messaging, billing, …)
api/ Route handlers (username check, Stripe webhook, …)
components/ Reusable UI (nav, inputs, modals, QR/share buttons, …)
lib/ Types, Supabase clients, image compression, premium helpers
supabase/schema.sql Full database schema — tables, RLS policies, functions, triggers
proxy.ts Edge middleware: session refresh + route protection
docs/ Security audit and product/strategy planning
Security
Security was treated as a first-class concern — a full audit (documented in docs/SECURITY_AUDIT.md) drove the hardening:
- Row-Level Security on every table; all sensitive writes go through owner-checked
SECURITY DEFINER functions.
- The frontend only ever uses Supabase's public anon key; the service-role key is used solely server-side in the Stripe webhook.
- Server-side authorization checks on every mutation, column-whitelisted profile updates, IP-based rate limiting, and sanitized query inputs.
- Dependency CVEs patched to a clean
npm audit.
Local Development
Prerequisites: Node.js 18+, a Supabase project, (optionally) a Stripe account.
git clone https://github.com/lukehenning9-star/skillmark-app.git
cd skillmark-app
npm install
Create .env.local:
NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
NEXT_PUBLIC_SITE_URL=http://localhost:3000
# Optional (premium billing): STRIPE_SECRET_KEY, STRIPE_WEBHOOK_SECRET,
# NEXT_PUBLIC_STRIPE_PREMIUM_PRICE_ID, SUPABASE_SERVICE_ROLE_KEY
Set up the database by running supabase/schema.sql in the Supabase SQL Editor, then:
npm run dev
The app runs at http://localhost:3000.
Project Docs
© 2026 SkillMark. All rights reserved.
