{"id":50772291,"url":"https://github.com/jo56/three-saas-apps","last_synced_at":"2026-06-11T20:02:03.045Z","repository":{"id":340058254,"uuid":"1073920379","full_name":"jo56/three-saas-apps","owner":"jo56","description":"Three SaaS architecture approaches in TypeScript with shadcn/ui","archived":false,"fork":false,"pushed_at":"2026-06-06T22:31:47.000Z","size":1276,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-07T00:12:53.223Z","etag":null,"topics":["fastify","nextjs","saas","shadcn-ui","tutorial","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jo56.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-10T20:39:21.000Z","updated_at":"2026-06-06T22:31:43.000Z","dependencies_parsed_at":"2026-02-23T08:04:57.120Z","dependency_job_id":null,"html_url":"https://github.com/jo56/three-saas-apps","commit_stats":null,"previous_names":["jo56/three-saas-apps"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/jo56/three-saas-apps","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jo56%2Fthree-saas-apps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jo56%2Fthree-saas-apps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jo56%2Fthree-saas-apps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jo56%2Fthree-saas-apps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jo56","download_url":"https://codeload.github.com/jo56/three-saas-apps/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jo56%2Fthree-saas-apps/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34215254,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-11T02:00:06.485Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fastify","nextjs","saas","shadcn-ui","tutorial","typescript"],"created_at":"2026-06-11T20:02:02.387Z","updated_at":"2026-06-11T20:02:03.037Z","avatar_url":"https://github.com/jo56.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Three SaaS Architecture Approaches with shadcn/ui\n\nThis repository demonstrates three different architectural approaches for building a B2B SaaS application using shadcn/ui components. All three versions look identical but showcase different tech stack architectures.\n\nAll projects use **PostgreSQL** with **Prisma ORM** for data persistence. See [DATABASE_SETUP.md](./DATABASE_SETUP.md) for setup instructions.\n\n## Version 1: Full Next.js Stack (`nextjs-shadcn-saas/`)\n\n**Architecture**: Monolithic full-stack framework\n\n### Tech Stack:\n- **Frontend**: Next.js 14 (App Router)\n- **Backend**: Next.js API Routes\n- **Database**: PostgreSQL + Prisma ORM\n- **Styling**: Tailwind CSS + shadcn/ui\n\n### Structure:\n```\nnextjs-shadcn-saas/\n├── app/\n│   ├── api/                  # Backend API routes\n│   │   ├── dashboard/\n│   │   ├── analytics/\n│   │   ├── customers/\n│   │   ├── team/\n│   │   ├── reports/\n│   │   └── billing/\n│   ├── (dashboard)/          # Frontend pages\n│   │   ├── dashboard/\n│   │   ├── analytics/\n│   │   ├── customers/\n│   │   ├── team/\n│   │   ├── reports/\n│   │   ├── billing/\n│   │   └── settings/\n│   └── page.tsx\n├── components/              # shadcn/ui components\n└── lib/                     # Utilities and types\n```\n\n### How to Run:\n```bash\ncd nextjs-shadcn-saas\n\n# Start PostgreSQL container\ndocker-compose up -d\n\n# Install dependencies\nnpm install\n\n# Setup and seed database\nnpm run db:setup\n\n# Start the Next.js application\nnpm run dev\n# Visit http://localhost:3000\n```\n\n**Note:** Unlike the Fastify projects, this is a monolithic Next.js app where everything runs in one process. Docker only provides the PostgreSQL database.\n\n### Pros:\n- Single codebase for frontend and backend\n- Excellent DX with hot reload for both\n- Built-in optimizations (Image, Font, etc.)\n- Easy deployment (Vercel, Netlify, etc.)\n- Server-side rendering capabilities\n- Simplest architecture to understand and maintain\n- Great for marketing pages (SEO-friendly)\n\n### Cons:\n- Tightly coupled frontend and backend\n- Harder to scale teams (full-stack developers needed)\n- Backend limited to Node.js/JavaScript\n- API routes slower than dedicated backend frameworks\n\n### Database Notes:\n- PostgreSQL runs on port 5434 (different from other projects to avoid conflicts)\n- Database must be manually set up with `npm run db:setup`\n- No Docker containerization for the Next.js app (runs locally only)\n\n---\n\n## Version 2: Fastify + React Monorepo (`fastify-shadcn-saas/`)\n\n**Architecture**: Separate backend and frontend services in a monorepo\n\n### Tech Stack:\n- **Backend**: Fastify (Node.js)\n- **Frontend**: React + Vite + React Router\n- **Database**: PostgreSQL + Prisma ORM\n- **Styling**: Tailwind CSS + shadcn/ui\n\n### Structure:\n```\nfastify-shadcn-saas/\n├── backend/\n│   ├── src/\n│   │   ├── index.ts          # Fastify server\n│   │   ├── data/             # Mock data\n│   │   └── types.ts\n│   └── package.json\n├── frontend/\n│   ├── src/\n│   │   ├── components/       # shadcn/ui + layout\n│   │   ├── pages/            # React pages\n│   │   ├── lib/              # Utils and types\n│   │   └── App.tsx\n│   └── package.json\n└── package.json              # Root with concurrently\n```\n\n### How to Run:\n\n**Option 1: Docker (Recommended - Backend + Database)**\n```bash\ncd fastify-shadcn-saas\n\n# Start PostgreSQL + Backend containers (includes auto-seeding)\ndocker-compose up -d\n\n# Check logs to verify backend is running\ndocker-compose logs -f backend\n\n# In a separate terminal, install frontend dependencies and start\ncd frontend\nnpm install\nnpm run dev\n# Frontend: http://localhost:5173\n# Backend API: http://localhost:3001\n```\n\n**Option 2: Local Development (All services)**\n```bash\ncd fastify-shadcn-saas\n\n# Start PostgreSQL container only\ndocker-compose up -d postgres\n\n# Install all dependencies\nnpm run install:all\n\n# Setup database (from backend directory)\ncd backend \u0026\u0026 npm run db:setup \u0026\u0026 cd ..\n\n# Start both backend and frontend with concurrently\nnpm run dev\n# Backend: http://localhost:3001\n# Frontend: http://localhost:5173\n```\n\n### Pros:\n- Clear separation of concerns\n- Independent deployment of frontend/backend\n- Backend can be swapped (Python, Go, etc.)\n- Easy to scale teams (dedicated frontend/backend devs)\n- Flexibility in tech stack evolution\n- Docker setup for easy backend deployment\n\n### Cons:\n- More complex setup and deployment\n- Need CORS configuration\n- Two separate codebases to maintain\n- More build tooling required\n\n### Database Notes:\n- Database is automatically seeded when using Docker\n- Backend runs on port 3001, PostgreSQL on port 5432\n- No need to run `npm run db:setup` when using Docker\n\n---\n\n## Version 3: Fastify Backend + Next.js Frontend Hybrid (`fastify-nextjs-hybrid/`)\n\n**Architecture**: Best of both worlds - separate API with Next.js frontend\n\n### Tech Stack:\n- **Backend**: Fastify (standalone service)\n- **Frontend**: Next.js (as a client-side framework, no API routes)\n- **Database**: PostgreSQL + Prisma ORM\n- **Styling**: Tailwind CSS + shadcn/ui\n\n### Structure:\n```\nfastify-nextjs-hybrid/\n├── backend/\n│   ├── src/\n│   │   ├── index.ts          # Fastify server\n│   │   ├── data/             # Mock data\n│   │   └── types.ts\n│   └── package.json\n├── frontend/\n│   ├── app/\n│   │   ├── (dashboard)/      # Next.js pages (client-side)\n│   │   └── page.tsx\n│   ├── components/           # shadcn/ui components\n│   ├── lib/                  # API client + utilities\n│   └── next.config.js        # API proxy configuration\n└── package.json\n```\n\n### How to Run:\n\n**Option 1: Docker (Recommended - Backend + Database)**\n```bash\ncd fastify-nextjs-hybrid\n\n# Start PostgreSQL + Backend containers (includes auto-seeding)\ndocker-compose up -d\n\n# Check logs to verify backend is running\ndocker-compose logs -f backend\n\n# In a separate terminal, install frontend dependencies and start\ncd frontend\nnpm install\nnpm run dev\n# Frontend: http://localhost:3000\n# Backend API: http://localhost:3001\n```\n\n**Option 2: Local Development (All services)**\n```bash\ncd fastify-nextjs-hybrid\n\n# Start PostgreSQL container only\ndocker-compose up -d postgres\n\n# Install all dependencies\nnpm run install:all\n\n# Setup database (from backend directory)\ncd backend \u0026\u0026 npm run db:setup \u0026\u0026 cd ..\n\n# Start both backend and frontend with concurrently\nnpm run dev\n# Backend: http://localhost:3001\n# Frontend: http://localhost:3000\n```\n\n### Pros:\n- Next.js DX with external API flexibility\n- Backend can be any language/framework\n- Independent scaling of services\n- Can leverage Next.js features (image optimization, etc.)\n- Clear API contract\n- Docker setup for easy backend deployment\n\n### Cons:\n- Can't use Next.js server-side features easily\n- Requires API proxy/CORS setup\n- More deployment complexity\n- Network overhead for API calls\n\n### Database Notes:\n- Database is automatically seeded when using Docker\n- Backend runs on port 3001, PostgreSQL on port 5433 (different from fastify-shadcn-saas)\n- No need to run `npm run db:setup` when using Docker\n\n---\n\n## Key Differences\n\n| Feature | Next.js Full-Stack | Fastify+React | Fastify+Next.js |\n|---------|-------------------|---------------|-----------------|\n| **Coupling** | Tight | Loose | Medium |\n| **Deployment** | Single service | Two services | Two services |\n| **DX** | Excellent | Good | Excellent |\n| **Team Scalability** | Medium | High | High |\n| **Backend Flexibility** | Low | High | High |\n| **Learning Curve** | Low | Medium | Medium |\n\n## Shared Features\n\nAll three versions include:\n\n- **Dashboard** with KPIs, charts, and recent activity\n- **Analytics** with multiple chart types and metrics\n- **Customers** management with filtering and search\n- **Reports** generation and management\n- **Team** member management\n- **Billing** with plans and transaction history\n- **Settings** for account configuration\n\n## When to Use Each\n\n### Choose Next.js Full-Stack when:\n- Building an MVP quickly\n- Small team of full-stack developers\n- Don't need microservices\n- Want simplest deployment\n- Backend logic is simple\n- Need great SEO for marketing pages\n- Want server-side rendering out of the box\n\n### Choose Fastify+React when:\n- Need maximum flexibility\n- Have separate frontend/backend teams\n- Want to use different backend language later\n- Building a complex, scalable system\n- Need fine-grained control\n- SEO is not a priority (dashboard-focused app)\n\n### Choose Fastify+Next.js Hybrid when:\n- Want Next.js DX but separate backend\n- Backend already exists/is managed separately\n- Need backend flexibility with frontend ease\n- Team knows Next.js but needs API separation\n- Need good SEO with a high-performance API backend\n\n## Database\n\nAll three projects now use **PostgreSQL** with **Prisma ORM** for data persistence. Each project has:\n\n- Docker Compose configuration for local PostgreSQL\n- Prisma schema with Customer, TeamMember, and Report models\n- **Automatic database seeding** when using Docker\n- Separate database instances on different ports to avoid conflicts:\n  - `nextjs-shadcn-saas`: PostgreSQL on port 5434\n  - `fastify-shadcn-saas`: PostgreSQL on port 5432\n  - `fastify-nextjs-hybrid`: PostgreSQL on port 5433\n\n### Quick Database Setup\n\n**For Fastify projects (fastify-shadcn-saas, fastify-nextjs-hybrid):**\n```bash\n# Using Docker (Recommended) - Database is auto-seeded\ndocker-compose up -d\n\n# Using local development - Manual setup required\ndocker-compose up -d postgres\ncd backend \u0026\u0026 npm run db:setup \u0026\u0026 cd ..\n```\n\n**For Next.js project (nextjs-shadcn-saas):**\n```bash\n# Start PostgreSQL container\ndocker-compose up -d\n\n# Install dependencies (includes tsx for seeding)\nnpm install\n\n# Setup and seed database (must be run manually)\nnpm run db:setup\n```\n\n**Note:** The Next.js project requires manual database setup - it does not auto-seed on startup like the Fastify projects.\n\nSee **[DATABASE_SETUP.md](./DATABASE_SETUP.md)** for detailed setup instructions and troubleshooting.\n\n## Docker Deployment\n\nThe Fastify backends (`fastify-shadcn-saas` and `fastify-nextjs-hybrid`) are fully containerized and ready for deployment:\n\n- **Multi-stage Docker builds** for optimized production images\n- **Docker Compose** configurations for both development and production\n- **Health checks** and automatic database migrations\n- **Automatic database seeding** on first run\n- **Production-ready** configurations with environment variable management\n\n### Quick Start with Docker\n\n```bash\n# For fastify-shadcn-saas\ncd fastify-shadcn-saas\ndocker-compose up -d\n\n# For fastify-nextjs-hybrid\ncd fastify-nextjs-hybrid\ndocker-compose up -d\n```\n\nBoth will start:\n- PostgreSQL database\n- Fastify backend API with auto-seeding\n- Health checks and monitoring\n\nThen start the frontend separately (see project-specific instructions above).\n\nSee **[DOCKER_DEPLOYMENT.md](./DOCKER_DEPLOYMENT.md)** for detailed deployment instructions, production setup, and troubleshooting.\n\n## Development\n\nAll versions use the same shadcn/ui components and have identical UI/UX. Data is now persisted in PostgreSQL databases, demonstrating real-world data persistence patterns.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjo56%2Fthree-saas-apps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjo56%2Fthree-saas-apps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjo56%2Fthree-saas-apps/lists"}