Next.js 15 Template Membership SaaS

Overview

The Template Marketplace is a subscription-based platform that allows users to sign up, subscribe to a one-time payment plan, and gain access to premium GitHub repositories. The application uses MongoDB for data storage and integrates with GitHub via Octokit to automate inviting users to a GitHub organization after a successful checkout. Admins can manage templates and users through a clean backoffice interface.

Features

User Features

• Browse Templates: Users can explore available templates on the landing page.

• Subscription Access: After a successful one-time payment, users gain access to a GitHub repository.

• GitHub Integration: Automatic invitation to the GitHub organization.

Admin Features

• Backoffice Dashboard: A dedicated interface for managing templates and users.

• Template Management: Add, edit, and delete templates.

• User Management: View subscribed users and their details.

Project Structure

template-marketplace/
├── public/
│   ├── images/
│   │   └── logo.png
├── src/
│   ├── app/
│   │   ├── (backoffice)/
│   │   │   ├── _components/
│   │   │   │   ├── BackofficeDashboard.tsx
│   │   │   │   ├── Sidebar.tsx
│   │   │   ├── backoffice/
│   │   │   │   ├── layout.tsx
│   │   │   │   ├── page.tsx
│   │   │   │   ├── products/
│   │   │   │   │   └── page.tsx
│   │   │   │   ├── users/
│   │   │   │   │   └── page.tsx
│   │   ├── (landing)/
│   │   │   ├── _components/
│   │   │   │   ├── Features.tsx
│   │   │   │   ├── Footer.tsx
│   │   │   │   ├── Navbar/
│   │   │   │   │   └── index.tsx
│   │   │   ├── templates/
│   │   │   │   ├── [id]/
│   │   │   │   │   ├── _components/
│   │   │   │   │   │   └── TemplateClient.tsx
│   │   │   │   │   └── page.tsx
│   │   │   ├── layout.tsx
│   │   │   ├── page.tsx
│   │   ├── api/
│   │   │   ├── admin/
│   │   │   │   ├── templates/
│   │   │   │   │   └── route.ts
│   │   │   │   ├── users/
│   │   │   │   │   └── route.ts
│   │   │   ├── webhooks/
│   │   │   │   └── stripe/
│   │   │   │       └── route.ts
│   ├── auth.ts
│   ├── components/
│   │   ├── ui/
│   │   │   ├── badge.tsx
│   │   │   ├── button.tsx
│   │   │   ├── card.tsx
│   │   │   ├── pagination.tsx
│   │   │   ├── table.tsx
│   ├── lib/
│   │   ├── prisma.ts
│   ├── types/
│   │   ├── Template.ts
│   │   ├── User.ts
│   ├── utils/
│   │   ├── formatDate.ts
│   │   ├── inviteToGithubOrg.ts
│   │   ├── validations/
│   │   │   └── template.ts
├── .env
├── .gitignore
├── next.config.js
├── package.json
├── README.md
├── tsconfig.json

Key Directories and Files

Public

• images/logo.png: Contains the logo of the platform.

App

• (backoffice): Handles admin-specific pages and components, including dashboards and management tools.

• (landing): Contains user-facing pages, including the homepage and template details pages.

• api: Defines API routes for managing templates, users, and handling Stripe webhooks.

Components

• ui: Reusable UI components like badges, buttons, cards, pagination, and tables.

Lib

• prisma.ts: Prisma client for database interactions.

Utils

• inviteToGithubOrg.ts: Utility for inviting users to a GitHub organization.

• validations/template.ts: Validation schema for templates.

Technologies Used

• Frontend: React, Next.js

• Backend: Next.js API routes

• Database: MongoDB (via Prisma)

• Authentication: Custom authentication with session handling

• Payments: Stripe integration

• GitHub API: Octokit for managing GitHub organization invitations

Setup Instructions

Prerequisites

• Node.js (v16 or later)

• MongoDB

• Stripe account

• GitHub organization

Installation

1. Clone the repository:

   git clone <repository-url>
   cd template-marketplace

2. Install dependencies:

   npm install

3. Create a .env file and add the required environment variables:

   DATABASE_URL=<your-mongodb-url>
   GOOGLE_CLIENT_ID=<your-google-client-id>
   GOOGLE_CLIENT_SECRET=<your-google-client-secret>
   AUTH_SECRET=<your-auth-secret>
   STRIPE_SECRET_KEY=<your-stripe-secret-key>
   STRIPE_WEBHOOK_SECRET=<your-stripe-webhook-secret>
   NEXT_PUBLIC_APP_URL=<your-app-url>
   NEXTAUTH_URL=<your-auth-url>
   RESEND_API_KEY=<your-resend-api-key>
   GITHUB_TOKEN=<your-github-token>
   NEXT_PUBLIC_STRIPE_CUSTOMER_PORTAL=<your-stripe-customer-portal-url>
   NEXT_PUBLIC_TINY_MCE_API_KEY=<your-tiny-mce-api-key>
   NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=<your-cloudinary-cloud-name>
   CLOUDINARY_API_KEY=<your-cloudinary-api-key>
   CLOUDINARY_API_SECRET=<your-cloudinary-api-secret>
   NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET=<your-cloudinary-upload-preset>

4. Run the development server:

   npm run dev

Usage

User Workflow

1. Sign up on the platform.

2. Subscribe to a one-time payment plan.

3. Receive an email invitation to the GitHub organization.

Admin Workflow

1. Log in to the backoffice.

2. Add, edit, or delete templates.

3. View and manage subscribed users.