Marketplace Booking Platform
Marketplace Booking Platform
A multi-sided booking marketplace with search, listing management, reservations, and payments that can be adapted to other inventory-led domains.
Playbook Features
Project Overview
A comprehensive marketplace booking platform for discovering and reserving structured inventory. Built for a confidential client under NDA, this is a full-stack application that connects inventory providers with users looking to browse, compare, and book listed resources.
One of the strongest parts of this build is that the product logic is not tied to a single vertical. The same architecture can be replicated in another domain where users search structured inventory, compare results, book or request access, make payments, and manage listings through role-based workflows.
Executive Summary
This project shows how to build a reusable multi-sided marketplace foundation with booking, payments, provider workflows, and search-driven discovery. The commercial value is not limited to one vertical because the same architecture can be adapted to many inventory-led businesses.
Business Problem
Marketplace products are difficult because they combine supply management, demand capture, trust, availability, payments, and role-based operations in one system. Many teams can prototype the interface, but far fewer can create a stable full-stack flow that providers and customers can actually use.
What I Built
- A marketplace booking platform with provider, customer, and admin flows
- Search, filtering, listing management, booking, and payment infrastructure
- A role-based architecture that supports moderation and operational workflows
- A reusable system that can be repurposed for other booking and catalog domains
Why It Matters
This kind of build is valuable because it compresses multiple business systems into one product foundation: discovery, inventory management, transactional workflow, and operational control. That makes it a strong proof point for both marketplace execution and scalable product architecture.
Best Fit If You Need Something Similar
This case study supports Product Architecture & Scale and High-Performance API Design. It is a strong fit if you need a marketplace, booking system, or provider-managed platform.
Architecture
This is a modern monorepo with separate client and server applications, utilizing a microservices-inspired architecture with clear separation of concerns, role-based authentication, payment processing, and comprehensive booking management.
Technology Stack
Frontend (Client):
- Vue.js 3.4.21 with Composition API
- TypeScript 5.4.0 for type safety
- PrimeVue 3.51.0 - Enterprise UI component library
- Vite 5.2.8 - Fast development and build tool
- Pinia 2.1.7 - State management
- Vue Router 4.3.0 - Client-side routing
Backend (Server):
- Node.js with Express.js 4.18.2
- MongoDB with Mongoose 8.1.0 ODM
- JWT Authentication with refresh tokens
- Stripe 15.10.0 - Payment processing
- Multer - File upload handling
- Nodemailer - Email functionality
Development & Testing:
- Playwright - End-to-end testing
- Vitest - Unit testing
- ESLint + Prettier - Code quality
- Husky - Git hooks
- TypeScript - Type safety
Root Directory Structure
marketplace-platform/
βββ client/ # Frontend Vue.js application
β βββ src/ # Source code
β βββ public/ # Static assets
β βββ e2e/ # End-to-end tests
β βββ package.json # Frontend dependencies
β βββ vite.config.ts # Vite configuration
β βββ playwright.config.ts # E2E test configuration
β βββ tsconfig.*.json # TypeScript configurations
βββ server/ # Backend Node.js application
β βββ controllers/ # Business logic handlers
β βββ models/ # Database models
β βββ routes/ # API route definitions
β βββ middlewares/ # Custom middleware
β βββ database/ # Database configuration
β βββ helpers/ # Utility functions
β βββ validations/ # Input validation schemas
β βββ uploadedImages/ # File storage
β βββ build/ # Production build
β βββ server.js # Main server file
βββ .github/ # GitHub workflows
βββ .husky/ # Git hooks
βββ .vscode/ # VS Code settings
βββ package.json # Root package configuration
βββ pnpm-lock.yaml # Package lock file
βββ README.md # Project documentationDetailed Frontend Structure (client/)
Source Code Organization (client/src/)
src/
βββ App.vue # Main application component
βββ main.ts # Application entry point
βββ components/ # Reusable UI components
β βββ auth/ # Authentication components
β β βββ Login.vue
β β βββ Register.vue
β βββ booking/ # Booking-related components
β β βββ Banner.vue
β β βββ Info.vue
β β βββ Booking.vue
β βββ layout/ # Layout components
β β βββ Footer.vue
β β βββ Header.vue
β β βββ HeroBanner.vue
β βββ shared/ # Shared utility components
β β βββ Gallery.vue
β β βββ Loader.vue
β β βββ ListingCard.vue
β β βββ Search.vue
β β βββ ConfirmTemplate.vue
β βββ UploadImages.vue # Image upload component
β βββ PaymentFailed.vue # Payment failure handling
βββ views/ # Page-level components
β βββ HomeView.vue # Homepage
β βββ ListingsView.vue # Inventory listing
β βββ ListingDetailsView.vue # Individual listing details
β βββ RegisterListingView.vue # Listing registration
β βββ Payment.vue # Payment processing
β βββ AboutView.vue # About page
β βββ NotFoundView.vue # 404 page
β βββ Privacy.vue # Privacy policy
β βββ Terms.vue # Terms of service
β βββ listings/ # Listing management views
β βββ AddListingView.vue
β βββ EditListingView.vue
β βββ ListListingsView.vue
βββ router/ # Routing configuration
β βββ index.ts # Main router setup
β βββ routes.ts # Route definitions
βββ stores/ # Pinia state management
β βββ [8 store modules for:
β βββ - Authentication
β βββ - User management
β βββ - Listings management
β βββ - Booking system
β βββ - Payment processing
β βββ - Location services
β βββ - Image uploads
β βββ - Filtering & search]
βββ service/ # API service layer
β βββ [14 service modules for:
β βββ - API client configuration
β βββ - Authentication services
β βββ - User services
β βββ - Listing services
β βββ - Booking services
β βββ - Payment services
β βββ - Location services
β βββ - Image upload services
β βββ - Token management
β βββ - Error handling]
βββ models/ # TypeScript interfaces
β βββ User.interface.ts
β βββ Listing.interface.ts
β βββ Booking.interface.ts
β βββ Payment.interface.ts
βββ assets/ # Static assets
β βββ images/
β βββ styles/
β βββ icons/
βββ plugins/ # Vue plugins configurationDetailed Backend Structure (server/)
Core Server Components
server/
βββ server.js # Main server entry point
βββ models/ # Database models (9 models)
β βββ user.model.js # User schema and methods
β βββ listing.model.js # Inventory listing schema
β βββ booking.model.js # Booking management
β βββ payment.model.js # Payment records
β βββ role.model.js # User roles (admin, owner, user)
β βββ country.model.js # Country data
β βββ city.model.js # City data
β βββ refreshToken.model.js # JWT refresh tokens
β βββ index.js # Model exports
βββ controllers/ # Business logic (8 controllers)
β βββ auth.controller.js # Authentication logic
β βββ user.controller.js # User management
β βββ listing.controller.js # Listing CRUD operations
β βββ booking.controller.js # Booking management
β βββ payment.controller.js # Stripe payment processing
β βββ filter.controller.js # Search and filtering
β βββ country.city.controller.js # Location services
β βββ shared/
β βββ upload.images.controller.js # Image upload handling
βββ routes/ # API route definitions (7 route files)
β βββ auth.routes.js # Authentication endpoints
β βββ user.routes.js # User management endpoints
β βββ listing.routes.js # Listing management endpoints
β βββ booking.routes.js # Booking endpoints
β βββ payment.routes.js # Payment endpoints
β βββ filter.routes.js # Search and filter endpoints
β βββ country.city.routes.js # Location endpoints
βββ middlewares/ # Custom middleware (7 middleware)
β βββ [Authentication middleware
β βββ - Authorization checks
β βββ - Role-based access control
β βββ - Input validation
β βββ - Error handling
β βββ - File upload processing
β βββ - Rate limiting]
βββ database/ # Database configuration
β βββ db.config.js # MongoDB connection
β βββ [Additional DB utilities]
βββ helpers/ # Utility functions
β βββ util.js # Common utilities
β βββ [Email helpers
β βββ - File management
β βββ - Date utilities
β βββ - Validation helpers
β βββ - Response formatters]
βββ validations/ # Input validation schemas
β βββ [Validation rules for:
β βββ - User registration/login
β βββ - Listing creation/updates
β βββ - Booking submissions
β βββ - Payment processing]
βββ configs/ # Configuration files
β βββ [App configurations]
βββ uploadedImages/ # File storage (66 uploaded files)
βββ build/ # Production build outputKey Features & Functionality
Core Platform Features
- Inventory Discovery: Browse and search structured listings
- Detailed Listings: Comprehensive item information with image galleries
- Booking System: Full booking workflow with calendar integration
- Payment Processing: Secure payments via Stripe integration
- User Management: Role-based authentication (admin, owner, user)
- Catalog Filtering: Geography and availability-based filtering
User Roles & Permissions
- Regular Users: Browse listings, make bookings, manage their bookings
- Providers: Publish listings, manage bookings, update availability
- Administrators: Full platform management, user moderation
Booking & Payment Flow
- Inventory Discovery: Users browse available listings with filters
- Listing Details: View comprehensive information, images, availability
- Booking Request: Select dates, submit booking with details
- Payment Processing: Secure payment via Stripe
- Confirmation: Email notifications and booking management
- Communication: In-platform messaging between users and providers
Technical Features
- Image Upload: Multi-image upload with optimization
- Search & Filtering: Advanced filtering by location, price, amenities
- Responsive Design: Mobile-first approach with PrimeVue components
- Real-time Updates: Dynamic content updates
- Email Notifications: Automated booking confirmations and updates
Replication in Another Domain
This platform is a strong reusable base for other marketplace and booking products because the core building blocks are already separated cleanly:
- Searchable inventory model: adapt the same structure to equipment, workspaces, tours, professionals, rentals, appointments, or other bookable resources
- Role-based access: keep the same user, provider, and admin workflow with only domain-specific policy changes
- Booking and request flow: reuse the booking engine for reservations, consultations, demo slots, rentals, or service requests
- Payment infrastructure: preserve Stripe flows while adjusting pricing, deposits, or commission rules
- Listing management: reuse create, edit, verify, and media-upload workflows for any provider-managed catalog
- Filtering and discovery: adapt country, city, availability, and attribute filters to the new vertical
In practical terms, this means the functionality does not need to be rebuilt from zero for a different business category. The existing frontend patterns, backend route structure, auth model, payment handling, and admin verification flow can be ported into another domain with targeted changes to terminology, schemas, business rules, and search attributes.
Development Workflow
Available Scripts
# Root level commands
pnpm install # Install all dependencies (client + server)
pnpm start # Start both client and server concurrently
pnpm start:server # Start only the backend server
pnpm start:client # Start only the frontend client
pnpm format # Format code in both client and server
pnpm clean # Clean all node_modules and build files
pnpm build:prod # Production build
# Client-specific commands
cd client
pnpm dev # Development server
pnpm build # Production build
pnpm test:unit # Run unit tests
pnpm test:e2e # Run end-to-end tests
pnpm lint # ESLint code quality
pnpm format # Prettier code formatting
# Server-specific commands
cd server
pnpm dev # Development server with nodemon
pnpm lint # ESLint for backend
pnpm format # Prettier for backendEnvironment Setup
- Prerequisites: Node.js 18+, pnpm, MongoDB
- Installation:
pnpm install(installs both client and server) - Environment:
pnpm copy:env(copies server environment template) - Database: Set up MongoDB connection in server/.env
- Stripe: Configure Stripe keys for payment processing
- Development:
pnpm start(starts both client and server) - Access:
- Frontend:
http://localhost:5173/ - Backend:
http://localhost:3000/
- Frontend:
API Architecture
RESTful Endpoints
Authentication:
POST /api/auth/register # User registration
POST /api/auth/login # User login
POST /api/auth/refresh # Refresh JWT token
POST /api/auth/logout # User logout
User Management:
GET /api/users/profile # Get user profile
PUT /api/users/profile # Update user profile
GET /api/users/listings # Get user's listings
Listing Management:
GET /api/listings # List all listings (with filters)
GET /api/listings/:id # Get listing details
POST /api/listings # Create new listing (provider only)
PUT /api/listings/:id # Update listing (provider only)
DELETE /api/listings/:id # Delete listing (provider only)
POST /api/listings/images # Upload listing images
Booking Management:
GET /api/bookings # List user's bookings
POST /api/bookings # Create new booking
GET /api/bookings/:id # Get booking details
PUT /api/bookings/:id # Update booking status
Payment Processing:
POST /api/payments/create-session # Create Stripe session
POST /webhook # Stripe webhook handler
Location Services:
GET /api/countries # List countries
GET /api/cities # List cities by country
Filtering:
GET /api/filters/listings # Advanced listing filteringSecurity Features
Authentication & Authorization
- JWT-based authentication with refresh tokens
- Role-based access control (RBAC)
- Password hashing with bcrypt
- Route protection on both client and server
- Session management with secure token storage
Data Protection
- Input validation on all endpoints
- File upload security with type and size restrictions
- CORS configuration for cross-origin requests
- Environment variable protection
- MongoDB injection prevention
Payment Integration
Stripe Integration
- Stripe Checkout for secure payment processing
- Webhook handling for payment confirmations
- Payment status tracking and updates
- Refund capabilities for cancellations
- Multiple currency support
Testing Strategy
Frontend Testing
- Unit Tests: Vitest for component testing
- E2E Tests: Playwright for full user journey testing
- Component Testing: Vue Test Utils integration
- Type Safety: TypeScript for compile-time validation
Backend Testing
- API Testing: Available endpoints for testing
- Database Testing: Model validation
- Integration Testing: Full workflow testing
Deployment & DevOps
Development Tools
- Husky: Git hooks for code quality
- ESLint + Prettier: Code formatting and linting
- Commitlint: Conventional commit messages
- GitHub Actions: CI/CD pipeline (.github/ folder)
Production Considerations
- Static file serving from server build
- Image storage in uploadedImages directory
- Environment-based configuration
- Production optimizations for both client and server
Performance Optimizations
Frontend Optimizations
- Vite for fast development and optimized builds
- Code splitting with Vue Router
- Component lazy loading
- Image optimization and lazy loading
- PrimeVue for production-ready components
Backend Optimizations
- MongoDB indexing for fast queries
- Image compression for uploads
- API response caching strategies
- Database query optimization
Business Logic
Marketplace Features
- Commission-based model (configurable)
- Listing verification process
- Rating and review system (ready for implementation)
- Search algorithm with relevance scoring
- Availability management with calendar integration
User Experience
- Responsive design for all devices
- Intuitive booking flow
- Real-time availability updates
- Comprehensive search and filtering
- Image galleries with zoom capabilities
Project: Confidential Marketplace Booking Platform
Client: Withheld under NDA
Developers: Jiwan Ghosal, Naresh Battul
Architecture: Full-stack Vue.js + Node.js
Database: MongoDB with Mongoose
Payment: Stripe Integration