← Back to home|

Development Framework

View on GitHub
🚀

Development Framework

Complete Full-Stack Setup - Create production-ready applications with zero configuration

Next.js 15PostgreSQLGraphQLReact NativeAuto-Deploy

🎯 What You Get - Complete Stack

Every project created with this framework gets a complete, production-ready setup:

🌐 Web Projects (--type=web)

┌─────────────────────────────────────┐ │ Next.js App │ │ ┌─────────────┬─────────────────┐ │ │ │ Frontend │ API Routes │ │ │ │ (React) │ GraphQL │ │ │ │ TailwindCSS│ Health Check │ │ │ └─────────────┴─────────────────┘ │ └─────────────────────────────────────┘ │ ▼ ┌─────────────────┐ │ PostgreSQL │ │ + Drizzle │ └─────────────────┘
  • ✅ Next.js 15 with App Router, TypeScript, TailwindCSS
  • ✅ GraphQL Server (Apollo Server) at /api/graphql
  • ✅ PostgreSQL Database with Drizzle ORM
  • ✅ Health Check endpoint at /api/health
  • ✅ Database Schema with users & items tables

📱 Mobile Apps (--type=app)

┌─────────────────────────────────────┐ │ React Native App │ │ (Mobile Client) │ └─────────────────────────────────────┘ │ GraphQL ▼ ┌─────────────────────────────────────┐ │ Express.js API Server │ │ ┌─────────────────────────────┐ │ │ │ GraphQL + Health Check │ │ │ └─────────────────────────────┘ │ └─────────────────────────────────────┘ │ ▼ ┌─────────────────┐ │ PostgreSQL │ │ + Drizzle │ └─────────────────┘
  • ✅ React Native with Expo + TypeScript
  • ✅ Separate API Server (Express.js + GraphQL)
  • ✅ PostgreSQL Database with Drizzle ORM
  • ✅ GraphQL Server at /graphql endpoint
  • ✅ Health Check endpoint at /health

🛠 Framework Scripts

create-project.sh

Creates complete, production-ready applications with everything configured.

~/schybo/scripts/dev-framework/create-project.sh \
  --name=my-recipe-app \
  --type=app \
  --init-git
--name - Project name (required)
--type - app or web
--init-git - Auto-create GitHub repo
--github - GitHub username

Deployment

All apps deploy to Vercel via git push. Subdomains are configured in the Vercel dashboard and routed via Next.js middleware.

🎯 Production Features

🔍

Subdomain Routing

Middleware-based subdomain routing — each app gets its own *.schybo.com domain

🌐

Vercel Deployment

Push to git and deploy automatically with Vercel

📦

Secure Database Setup

Dedicated users, proper permissions, migrations, environment setup

🔄

CI/CD Pipeline

Automatic builds, preview deployments, and production deploys via Vercel

🔐

GitHub Integration

Auto-secrets, CI/CD workflows, deployment keys

🏥

Health Monitoring

Built-in health checks, centralized dashboard

📊

Performance Ready

pnpm, Next.js optimization, connection pooling

🔒

Security First

JWT secrets, SSL auto-renewal, headers configured

🌍

DNS & SSL Automation

Let's Encrypt certificates, HTTPS redirects

🎯 Complete Workflow Example

1

Create Project

~/schybo/scripts/dev-framework/create-project.sh \ --name=protein-tracker \ --type=web \ --description="Track and rank protein bars" \ --init-git

Result: Complete Next.js app with PostgreSQL, GraphQL, health checks, and GitHub repo.

2

Local Development

cd ~/protein-tracker pnpm dev # Start Next.js with GraphQL pnpm db:studio # Open database UI

Result: Full development environment running locally with database management.

3

Deploy to Production

# Connect to Vercel and push: vercel link git push origin main

Result: Live on Vercel with automatic SSL, preview deploys, and production builds.

💡 Architecture Benefits

🚀 Web Projects Perfect For:

  • • Landing pages, portfolios, blogs
  • • Admin dashboards, SaaS apps
  • • E-commerce, content sites
  • • Single deployment - frontend + API together
  • • GraphQL at /api/graphql

📱 Mobile Projects Perfect For:

  • • iOS/Android apps
  • • Cross-platform mobile solutions
  • • Separate API server - scalable architecture
  • • GraphQL at /graphql
  • • API-first design

📚 Complete Tech Stack

Frontend

  • • Next.js 15
  • • React
  • • TypeScript
  • • TailwindCSS
  • • Expo (Mobile)

Backend

  • • GraphQL
  • • Apollo Server
  • • Express.js
  • • Node.js
  • • Health Checks

Database

  • • PostgreSQL
  • • Drizzle ORM
  • • Migrations
  • • Type Safety
  • • Studio UI

DevOps

  • • Vercel
  • • GitHub Actions
  • • Cloudflare DNS
  • • Auto-Deploy

📚 Package Manager Consistency

Everything uses pnpm for consistency and performance:

✅ Local development: pnpm install, pnpm dev
✅ Server deployment: pnpm install, pnpm start
✅ Database operations: pnpm db:push, pnpm db:studio
✅ Deployments: Push to main to deploy via Vercel
✅ GitHub Actions: All CI/CD uses pnpm
✅ Faster installs with efficient dependency linking

🏥 Built-in Health Monitoring

Every application gets comprehensive health monitoring:

Health Check Endpoints:

  • • Web apps: https://yoursite.com/api/health
  • • Mobile APIs: https://api.yoursite.com/health

Health Dashboard:

All applications appear automatically in the centralized health dashboard at: https://schybo.com/health-dashboard

Health Check Features:

  • ✅ Database connectivity testing
  • ✅ Memory usage monitoring
  • ✅ File system health
  • ✅ Service uptime tracking
  • ✅ GraphQL server status
  • ✅ Build process verification

🚀 Ready to Build?

Start building your features - the infrastructure is done! 🎉

View source codeHealth dashboardBack to portfolio