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
• Tech Stack
• Features
• Architecture
• Security
• Local Development
• Project Docs

---

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

• docs/SECURITY_AUDIT.md — security review and remediation.
• docs/FUTURE_PLANS.md — product strategy and roadmap.
• docs/YEAR_ONE_PLAN.md — go-to-market playbook.

---

© 2026 SkillMark. All rights reserved.