Back to projects
Full Stack SaaS Marketplace

SkillBridge

A production-ready tutor marketplace platform that connects students with tutors through secure booking, Stripe-powered online payments, availability scheduling, reviews, role-based dashboards, and a comprehensive admin panel. Built with Next.js 16, React 19, Express 5, Prisma, PostgreSQL, and TypeScript using scalable architecture and modern best practices.

Next.js 16React 19TypeScriptTailwind CSS v4TanStack Query v5Node.js 22Express.js 5Prisma ORMPostgreSQLStripe CheckoutStripe WebhooksJWT AuthenticationHttpOnly CookiesZodREST APIVercelESLintReact Server Components

Overview

SkillBridge is a production-ready tutor marketplace platform that enables students to discover tutors, schedule learning sessions, complete secure Stripe-powered online payments, and manage bookings from a modern dashboard. Tutors can maintain professional profiles, define weekly availability, receive bookings, and manage sessions, while administrators oversee users, categories, bookings, and platform operations. The application combines SEO-friendly public pages with highly interactive dashboards while maintaining complete end-to-end type safety, secure authentication, and scalable full-stack architecture suitable for real-world SaaS deployment.

Problem

Many tutoring platforms suffer from fragmented booking systems, inconsistent user experiences, poor scheduling workflows, insecure authentication, and limited scalability. Most platforms also lack integrated payment processing, making booking confirmation and payment verification difficult. The project aimed to solve these challenges by creating a unified marketplace that allows students to find tutors, securely pay online, schedule sessions, and manage bookings while giving tutors and administrators powerful management tools.

Solution

Developed a modern full-stack marketplace using a modular feature-based architecture with strict TypeScript and shared validation between frontend and backend. Implemented: Secure JWT authentication using HttpOnly cookies Student, Tutor, and Admin role-based dashboards Tutor discovery with advanced filtering Weekly recurring availability scheduling Conflict-free booking management Stripe Checkout payment integration Stripe Webhook payment verification Booking confirmation after successful payment Tutor review and rating system Shared Zod validation schemas Typed REST API React Server Components TanStack Query caching Production-ready deployment architecture

Architecture

The project follows a modern full-stack architecture built with Next.js 16 App Router and React 19 on the frontend, leveraging React Server Components, Client Components, Tailwind CSS v4, and TanStack Query v5 to deliver a fast, scalable, and responsive user experience. The frontend is organized using a feature-based folder architecture and includes protected layouts, role guards, a shared API client, and an API proxy for secure HttpOnly cookie forwarding between the client and server. On the backend, the application is powered by Express.js 5 with TypeScript, following a feature-first modular architecture and a clean Controller → Service → Prisma pattern. It incorporates authentication and authorization middleware, global error handling, centralized environment configuration, and a standardized API response format for consistency and maintainability. Payment processing is implemented using Stripe Checkout Sessions, featuring a secure payment workflow, Stripe Webhook verification, server-side payment validation, automatic booking confirmation after successful payment, and payment status synchronization to ensure reliable transaction handling. Security is enforced through HttpOnly JWT cookies, bcrypt password hashing, Role-Based Access Control (RBAC), Zod-based request validation, protected API routes, and secure production cookie configuration, providing a robust and production-ready foundation for the application.

Database Design

The application uses PostgreSQL as its primary database with Prisma ORM for type-safe database access, schema management, and migrations. The database is built around a normalized relational schema consisting of core entities such as User, TutorProfile, Category, TutorCategory, Availability, Booking, and Review. It supports role-based user management, many-to-many relationships between tutors and categories, weekly recurring availability scheduling, and conflict-free booking constraints to prevent overlapping appointments. The design also includes review and rating aggregation, strong referential integrity through foreign key relationships, and optimized relational queries for efficient data retrieval. Database evolution is managed using Prisma Migrations, ensuring consistent, version-controlled schema updates across development and production environments.

API Design

The backend exposes a RESTful API organized into business-focused modules to ensure scalability, maintainability, and clear separation of concerns. Core modules include Authentication, Users, Tutors, Categories, Bookings, Reviews, Administration, and Health Monitoring, each encapsulating its own routes, controllers, services, and validation logic. The payment system provides dedicated APIs for creating Stripe Checkout Sessions, verifying payment status, processing Stripe Webhook events, updating booking payment status, and performing server-side payment verification to ensure secure and reliable transactions. The API follows a versioned REST architecture with shared TypeScript types, shared Zod validation schemas, cookie-based authentication, a standardized response envelope, centralized error handling, and role-based authorization, resulting in a consistent, secure, and developer-friendly interface for both frontend and external integrations.

Results

  • Production-ready full-stack SaaS marketplace
  • Modern scalable feature-based architecture
  • Complete student
  • tutor
  • and admin dashboards
  • Secure JWT authentication with HttpOnly cookies
  • Stripe Checkout payment integration
  • Stripe Webhook payment verification
  • Automated payment confirmation workflow
  • Conflict-free booking system
  • SEO-friendly server-rendered pages
  • Reusable component library
  • Strict end-to-end TypeScript implementation
  • Shared frontend/backend validation
  • Reusable typed API client
  • Scalable PostgreSQL database
  • Responsive modern UI
  • Production-ready Vercel deployment

Lessons Learned

  • Designing scalable SaaS architecture
  • Building modular feature-first applications
  • Implementing secure JWT authentication
  • Working with HttpOnly cookies
  • Designing role-based authorization systems
  • Building reusable REST APIs
  • Sharing validation using Zod
  • Integrating Stripe Checkout
  • Handling Stripe Webhooks securely
  • Designing payment-driven booking workflows
  • Managing asynchronous payment events
  • Building relational databases with Prisma
  • Optimizing React Server Components
  • Using TanStack Query for client caching
  • Deploying production applications on Vercel
  • Building maintainable TypeScript applications
  • Following enterprise-level project structure
  • Designing systems for long-term scalability and maintainability