Skip to content

Repository files navigation

🚒 ShipStream

Deploy any GitHub repository in seconds β€” A production-grade, microservices-based deployment platform with real-time build processing and instant static site hosting.

TypeScript React Node.js Docker


🎯 What is ShipStream?

ShipStream is a full-stack deployment platform that enables developers to deploy GitHub repositories instantly β€” similar to Vercel/Netlify, but built from scratch with modern microservices architecture. Users authenticate via GitHub OAuth, paste a repository URL, and get a live deployment with automated builds and subdomain-based hosting.

✨ Key Highlights

  • πŸ—οΈ Microservices Architecture β€” 4 independent services working in harmony
  • πŸ” Enterprise Security β€” GitHub OAuth, JWT authentication, rate limiting, CORS protection
  • ☁️ Cloud-Native β€” Cloudflare R2 storage, Redis queue management, Docker/Render deployment
  • ⚑ Real-Time Processing β€” Asynchronous build queue with live status updates
  • 🎨 Modern Frontend β€” React + TypeScript + Vite + TailwindCSS with dark mode
  • πŸ“¦ Production-Ready β€” Health monitoring, error handling, comprehensive logging

πŸ› οΈ Tech Stack

Frontend

React 18 β€’ TypeScript β€’ Vite β€’ TailwindCSS β€’ Radix UI β€’ Axios β€’ React Router v6

Backend

Node.js β€’ Express.js β€’ TypeScript β€’ GitHub OAuth β€’ JWT β€’ Redis β€’ Cloudflare R2

DevOps

Docker β€’ Docker Compose β€’ Render.com β€’ Environment Validation β€’ Health Checks

πŸ—οΈ Architecture

graph TD
    A[Frontend<br/>React SPA] -->|Auth Request| B[Auth Service<br/>Port 5501]
    B -->|OAuth Flow| C[GitHub OAuth]
    A -->|Deploy Request| D[Upload Service<br/>Port 5500]
    D -->|Upload Files| E[Cloudflare R2<br/>Storage]
    D -->|Add to Queue| F[Redis Queue]
    F -->|Process| G[Deploy Service<br/>Port 5502]
    G -->|Download Files| E
    G -->|Upload Build| E
    H[Request Handler<br/>Port 3000] -->|Serve Files| E
    I[Users] -->|Access Deployed Site| H
    
    style A fill:#61dafb,stroke:#333,stroke-width:2px,color:#000
    style B fill:#ffd700,stroke:#333,stroke-width:2px,color:#000
    style D fill:#ffd700,stroke:#333,stroke-width:2px,color:#000
    style G fill:#ffd700,stroke:#333,stroke-width:2px,color:#000
    style H fill:#ffd700,stroke:#333,stroke-width:2px,color:#000
    style C fill:#f0f0f0,stroke:#333,stroke-width:2px,color:#000
    style E fill:#f0f0f0,stroke:#333,stroke-width:2px,color:#000
    style F fill:#dc382d,stroke:#333,stroke-width:2px,color:#fff
    style I fill:#4a90e2,stroke:#333,stroke-width:2px,color:#fff
Loading

4 Microservices:

  1. Auth Service β€” GitHub OAuth authentication & JWT token management
  2. Upload Service β€” Repository cloning, file upload, deployment tracking
  3. Deploy Service β€” Build queue processing & project compilation
  4. Request Handler β€” Static site serving with subdomain routing

πŸš€ Quick Start

Prerequisites

  • Node.js 18+ | GitHub OAuth App | Cloudflare R2 | Upstash Redis

Installation

# Clone the repository
git clone <your-repo-url>
cd shipstream

# Setup environment
cp server/.env.example server/.env
# Add your credentials (GitHub OAuth, R2, Redis)

# Validate configuration
node scripts/validate-env.js

# Start all services
./scripts/start-all.sh    # Linux/Mac
scripts\start-all.bat     # Windows

# Start frontend
cd client && npm install && npm run dev

Services will be available at:

  • Frontend: http://localhost:5173
  • Auth: http://localhost:5501
  • Upload: http://localhost:5500
  • Deploy: http://localhost:5502
  • Request Handler: http://localhost:3000

πŸ“¦ Deployment

Option 1: Render.com (One-Click)

# Push to GitHub, then import to Render
# render.yaml auto-configures all 4 services

Option 2: Docker Compose

docker-compose up -d  # Starts all services

See DEPLOYMENT.md for comprehensive deployment guide.


πŸ”‘ Core Features

πŸ” Authentication & Authorization

  • GitHub OAuth 2.0 integration
  • JWT-based session management
  • Secure token refresh mechanism
  • User-specific deployment isolation

πŸ“€ Deployment Pipeline

  • GitHub repository cloning with branch support
  • Automatic file upload to cloud storage
  • Asynchronous build queue processing
  • Real-time status updates (uploading β†’ building β†’ deployed)

🌐 Static Site Hosting

  • Subdomain-based routing (deployment-id.yourdomain.com)
  • Automatic MIME type detection
  • SPA routing support
  • Custom 404 pages

πŸ”’ Security Features

  • Rate limiting (5 req/15min on auth endpoints)
  • Helmet.js security headers
  • CORS protection with origin whitelisting
  • Input validation & sanitization
  • Encrypted secrets management

πŸ“‚ Project Structure

shipstream/
β”œβ”€β”€ client/                  # React frontend (Vite + TypeScript)
β”‚   β”œβ”€β”€ src/
β”‚   β”‚   β”œβ”€β”€ components/      # UI components + pages
β”‚   β”‚   β”œβ”€β”€ contexts/        # Auth state management
β”‚   β”‚   β”œβ”€β”€ services/        # API layer
β”‚   β”‚   └── hooks/           # Custom React hooks
β”‚   └── package.json
β”‚
β”œβ”€β”€ server/
β”‚   β”œβ”€β”€ auth-service/        # GitHub OAuth + JWT
β”‚   β”œβ”€β”€ upload-service/      # Deployment management
β”‚   β”œβ”€β”€ deploy-service/      # Build processing
β”‚   β”œβ”€β”€ request-handler/     # Static file serving
β”‚   └── shared/              # Common utilities
β”‚
β”œβ”€β”€ scripts/
β”‚   β”œβ”€β”€ validate-env.js      # Environment validation
β”‚   └── start-all.sh         # Service orchestration
β”‚
β”œβ”€β”€ docker-compose.yml       # Container orchestration
β”œβ”€β”€ render.yaml              # Cloud deployment config
└── DEPLOYMENT.md            # Production guide

πŸ§ͺ Testing

# Run tests for all services
cd server/auth-service && npm test
cd server/upload-service && npm test
cd server/deploy-service && npm test

🎨 UI/UX

  • Responsive Design β€” Mobile-first approach with TailwindCSS
  • Dark Mode β€” Automatic theme switching
  • Real-Time Updates β€” Live deployment status tracking
  • Pirate Theme β€” Playful nautical metaphors ("Set Sail", "Anchored")
  • Accessibility β€” Radix UI primitives for WCAG compliance

πŸ“Š Technical Highlights for Recruiters

βœ… Full-Stack Proficiency β€” React frontend, Node.js microservices, DevOps setup
βœ… System Design β€” Microservices, queue management, distributed architecture
βœ… Cloud Technologies β€” Cloudflare R2, Redis, Docker, Render.com
βœ… Security Best Practices β€” OAuth, JWT, rate limiting, input validation
βœ… Modern Development β€” TypeScript, async/await, ES6+, REST APIs
βœ… Production-Ready β€” Health checks, error handling, logging, monitoring
βœ… Documentation β€” Comprehensive guides, inline comments, API documentation
βœ… DevOps β€” Docker, environment validation, automated deployment scripts


πŸ”— Resources


🌟 What Makes This Project Stand Out?

  1. Real-World Application β€” Solves actual deployment challenges, not a tutorial project
  2. Scalable Architecture β€” Designed for growth with horizontal scaling capability
  3. Enterprise Patterns β€” Microservices, queue processing, cloud storage
  4. Security-First β€” Multiple layers of protection (OAuth, JWT, rate limiting)
  5. DevOps Integration β€” CI/CD ready with Docker and cloud deployment configs
  6. Production Quality β€” Comprehensive error handling and monitoring

πŸ“ˆ Future Enhancements

  • Custom domain support (DNS integration)
  • Build caching for faster deployments
  • Deployment rollback functionality
  • Team collaboration features
  • Analytics dashboard
  • WebSocket for real-time updates

πŸ‘¨β€πŸ’» Author

Krishna Sharma
Full-Stack Developer specializing in scalable microservices and modern web applications

LinkedIn Portfolio Email


πŸ“„ License

MIT License β€” See LICENSE for details


⭐ Star this repo if you find it helpful!

Built with ❀️ using TypeScript, React, Node.js, and modern cloud technologies

About

A modern platform for deploying static websites with GitHub OAuth authentication, built with a microservices architecture.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages