CodeHost

A minimalist code hosting and digital product marketplace built with Next.js, Prisma, MySQL, and Socket.IO.

Real-time collaboration, role-based project access, public project discovery, paid product sales, and integrated payment workflows in one platform.

What It Does CodeHost combines a code hosting workflow with marketplace capabilities. Teams can publish projects, collaborate in real time, manage access, explore public work, and sell digital products from the same app.

Why It Stands Out Instead of splitting collaboration, discovery, and monetization across multiple tools, this project brings them together in one focused product with a distinctive monochrome interface and a clean App Router structure.

Overview

Real-Time Collaboration Socket.IO powers live collaboration, notifications, and interactive workflows beyond standard CRUD pages.	Project Hosting Create projects, manage members, store files, track branches and commits, and expose public-facing project pages.	Commerce Layer Sell products and paid code assets with built-in order flows, Stripe checkout, and PayPal support.
Role-Based Access Owner, editor, viewer, and admin flows are represented in the data model and API structure.	Modern Frontend Next.js 14 App Router, TypeScript, Tailwind CSS, Radix UI, and Zustand provide a maintainable frontend stack.	Production-Oriented Structure Separate realtime server, Prisma ORM, environment-based configuration, and deployment files are already in place.

Core Capabilities

• User registration, login, JWT-based authentication, and session handling
• Project creation, membership management, invitations, comments, stars, and public exploration
• File tree, version history, branches, and commit-oriented data structures
• Marketplace pages for products, orders, carts, and creator monetization
• Stripe and PayPal payment flows for product purchases and balance top-ups
• Real-time server for collaboration and notification scenarios
• Admin API surface for announcements, comments, orders, and moderation workflows

Architecture

flowchart LR
    A[Browser Client] --> B[Next.js App Router]
    B --> C[API Routes]
    C --> D[Prisma ORM]
    D --> E[(MySQL)]
    A --> F[Socket.IO Server]
    F --> E
    C --> G[Stripe / PayPal]

Loading

Tech Stack

Layer	Stack
Frontend	Next.js 14, React 18, TypeScript, Tailwind CSS, Radix UI
State	Zustand
Realtime	Express, Socket.IO, Socket.IO Client
Database	MySQL, Prisma ORM
Payments	Stripe, PayPal
Tooling	ESLint, Prettier, TSX, Concurrently

Project Structure

.
├─ prisma/                 # Prisma schema and seed script
├─ server/                 # Separate realtime Socket.IO server
├─ src/
│  ├─ app/                 # Next.js App Router pages and API routes
│  ├─ components/          # Reusable UI and feature components
│  ├─ lib/                 # Auth, Prisma, payment, and helper modules
│  ├─ stores/              # Zustand stores
│  └─ types/               # Type declarations
├─ public/                 # Static assets and uploads
├─ docker-compose.yml      # Container-based local deployment option
└─ package.json            # Scripts and dependency manifest

Local Development

Requirements

• Node.js 18 or later
• MySQL 8 or later
• npm or pnpm

1. Install dependencies

npm install

If you prefer pnpm, replace the npm commands below with their pnpm equivalents.

2. Create the environment file

PowerShell

Copy-Item .env.example .env

macOS / Linux

cp .env.example .env

3. Update environment variables

Use the values in .env.example as the baseline. At minimum, configure:

Variable	Required	Purpose
DATABASE_URL	Yes	MySQL connection string
JWT_SECRET	Yes	JWT signing secret
NEXTAUTH_URL	Yes	Public app URL in local/dev
NEXTAUTH_SECRET	Yes	NextAuth secret
NEXT_PUBLIC_APP_URL	Yes	Frontend base URL
NEXT_PUBLIC_WS_URL	Yes	WebSocket server URL
WS_PORT	Yes	Realtime server port
FILE_STORAGE_PATH	Recommended	Local file storage path

Optional payment variables if you want the payment flows enabled:

Variable	Purpose
STRIPE_SECRET_KEY	Stripe server-side API key
STRIPE_WEBHOOK_SECRET	Stripe webhook validation secret
PAYPAL_CLIENT_ID	PayPal server-side client ID
PAYPAL_CLIENT_SECRET	PayPal server-side client secret
PAYPAL_MODE	live or sandbox
NEXT_PUBLIC_PAYPAL_CLIENT_ID	PayPal client ID exposed to the browser
NEXT_PUBLIC_PAYPAL_MODE	live or sandbox for the frontend SDK

4. Prepare the database

Create a MySQL database first, then run:

npx prisma generate
npx prisma db push
npm run prisma:seed

Seeded demo accounts:

• admin@codehost.com / password123
• alice@example.com / password123
• bob@example.com / password123
• charlie@example.com / password123

5. Start the application

npm run dev

This starts:

• Next.js app at http://localhost:3000
• Realtime server at http://localhost:3001

Available Scripts

Command	Description
npm run dev	Start Next.js and the realtime server together
npm run build	Build the Next.js app and compile the server
npm run start	Start the production app and compiled server
npm run type-check	Run TypeScript type checking
npm run lint	Run lint checks
npm run prisma:generate	Generate Prisma client
npm run prisma:migrate	Run Prisma dev migrations
npm run prisma:studio	Open Prisma Studio
npm run prisma:seed	Seed demo data

Deployment Notes

• The repository already includes Docker and PM2 related files for deployment workflows.
• The realtime server uses WS_PORT and allows the frontend origin from NEXT_PUBLIC_APP_URL.
• Before production deployment, replace all development secrets and payment sandbox credentials.

GitHub Publishing Checklist

• Set a clean repository name such as codehost or code-hosting-platform
• Verify .env, database dumps, build output, and backup files are excluded from Git
• Add repository topics such as nextjs, prisma, mysql, socketio, marketplace, code-hosting
• Add screenshots or a short demo GIF later for even stronger first impression

License

This repository currently contains a GPL-3.0 license file.

If you want strong copyleft protection, keep GPL-3.0. If you want broader reuse and easier commercial adoption, switch to MIT before publishing.