Skip to content

Latest commit

 

History

History
246 lines (197 loc) · 7.95 KB

File metadata and controls

246 lines (197 loc) · 7.95 KB

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.

Next.js TypeScript Prisma MySQL Socket.IO License


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:

5. Start the application

npm run dev

This starts:

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.