Back to home

Project 02 of 06

SkillSwap

Peer-to-peer skill exchange platform

Laravel 13Next.js 16TypeScriptPostgreSQL 15Redis 7Tailwind CSS v4DockerCloudinaryZustandTanStack QueryPusherJSSanctum
automated tests
105
automated tests
assertions
241
assertions
request states
6
request states
Docker services
8
Docker services

Architecture

4 stages
skillswapsignal flow
Next.js UILaravel APIService LayerPostgreSQL & Redis
Readout

Peer-to-peer skill exchange platform

Overview

2 min read

SkillSwap is a full-stack marketplace where people trade skills instead of money, built on a Laravel 13 API with a Next.js 16 client and real-time messaging over Laravel Reverb WebSockets. The platform covers the complete lifecycle of a skill exchange: browsing and searching teachers by skill, sending a skill request with a proposed time, and moving that request through a six-state state machine, with seven server-side guards enforcing valid transitions and a scheduled job auto-expiring stale requests.

Once a request is accepted, participants get real-time one-to-one chat with image and file attachments via Cloudinary, cursor-paginated history with infinite scroll, read/unread tracking, and message deduplication across the HTTP POST and WebSocket echo paths. Completed exchanges feed into a review and reputation system: one review per participant per request, cached average ratings in Redis, and admin moderation for hidden reviews, with an audit log on every state change.

A real-time notification system covers every major event with a bell, an unread badge, per-type navigation targets, mark-all-read (deliberately excluding message_received), soft-delete dismiss, and server-side deduplication across three listeners. The admin portal adds a dashboard with six real-time metric cards, user suspension, and review moderation, all behind Sanctum authentication and role middleware.

The codebase enforces a strict three-layer architecture end-to-end: controllers route only, services own all business logic, and repositories handle all Eloquent queries, with no layer bleeding, backed by 105 automated tests and 241 assertions running CI-green via GitHub Actions. Visually, the platform uses a custom design system: a copper, verdigris, sage, and ink palette, Fraunces display serif paired with Inter body text and JetBrains Mono for numeric records, semantic Tailwind CSS v4 tokens, and a responsive mobile-first layout with a hamburger sidebar.

The whole stack runs locally via Docker Compose across eight services (PostgreSQL 15, Redis 7, Mailhog, the Laravel server, the Reverb WebSocket server, the Next.js client, a queue worker, and a scheduler) with no local dependencies required.

Highlights

8 items

  1. 01Full skill-exchange lifecycle: browse and search teachers by skill, send skill requests with a proposed time, and accept, reject, cancel, or complete via a 6-state state machine with 7 server-side guards and auto-expiry of stale requests through a scheduled job
  2. 02Real-time one-to-one chat via Laravel Reverb WebSockets: messages, image and file attachments via Cloudinary, cursor-paginated history with infinite scroll, read/unread tracking, implicit mark-read, and message dedup across HTTP POST and WebSocket echo
  3. 03Review and reputation system: 1 to 5 star ratings with comments, one review per participant per request, cached average ratings in Redis, hidden-review moderation by admin, and audit logs on every state change
  4. 04Notification system with a real-time bell, unread badge, per-type navigation targets, mark-all-read (excluding message_received by design), soft-delete dismiss, and server-side deduplication across three listeners
  5. 05Admin portal: dashboard with 6 real-time metric cards, user management with suspend and unsuspend, and review moderation with hide and unhide, all behind Sanctum and role middleware
  6. 06Strict three-layer architecture enforced end-to-end: controllers route only, services own all business logic, repositories handle all Eloquent queries, with no layer bleeding. 105 automated tests, 241 assertions, CI-green via GitHub Actions
  7. 07Custom design system: copper, verdigris, sage, and ink palette, Fraunces display serif with Inter body and JetBrains Mono for numeric records, semantic Tailwind CSS v4 tokens, and a responsive mobile-first layout with hamburger sidebar
  8. 08Docker Compose local stack with 8 services: PostgreSQL 15, Redis 7, Mailhog, Laravel server, Reverb WebSocket server, Next.js client, queue worker, and scheduler, with no local dependencies required