Skip to main content

Examples & Templates

Get started quickly with our example projects and templates.

🚀 Starter Templates​

Basic Integration​

A minimal example showing how to integrate TrendGate into your existing application.

git clone https://github.com/trendgate/basic-integration-example
cd basic-integration-example
pnpm install
pnpm dev

Features:

  • Basic authentication setup
  • Simple booking flow
  • Payment integration
  • User dashboard

View on GitHub →

Full Platform Template​

A complete instructor platform built with TrendGate, ready to customize and deploy.

npx create-trendgate-app my-platform --template full
cd my-platform
pnpm install
pnpm dev

Features:

  • Complete instructor onboarding
  • Advanced scheduling system
  • Multi-user support
  • Payment processing
  • Admin dashboard
  • Email notifications

View Demo →

📱 Mobile App Examples​

React Native Integration​

Example React Native app with TrendGate integration.

git clone https://github.com/trendgate/react-native-example
cd react-native-example
pnpm install
pnpm ios # or pnpm android

Features:

  • Native authentication
  • Push notifications
  • Offline support
  • Native payments

View on GitHub →

🔧 Component Examples​

Custom Booking Widget​

import { BookingWidget } from "@trendgate/react";

export function CustomBooking() {
  return (
    <BookingWidget
      instructorId="your-instructor-id"
      theme={{
        primaryColor: "#2563eb",
        borderRadius: "8px",
      }}
      onBookingComplete={(booking) => {
        console.log("Booking completed:", booking);
      }}
    />
  );
}

Progress Tracker Component​

import { ProgressTracker } from "@trendgate/react";

export function MemberProgress({ memberId }) {
  return <ProgressTracker memberId={memberId} showMilestones enableSharing />;
}

🎨 UI/UX Examples​

Custom Themes​

Examples of how to customize the look and feel of TrendGate components.

Landing Page Templates​

🔌 Integration Examples​

Stripe Advanced Integration​

// Advanced payment flow with custom checkout
import { createCheckoutSession } from "@/lib/stripe";

const session = await createCheckoutSession({
  instructor_id: "inst_123",
  line_items: [
    {
      price_data: {
        currency: "usd",
        product_data: {
          name: "10 Session Package",
          description: "Save 10% with our package deal",
        },
        unit_amount: 45000, // $450.00
      },
      quantity: 1,
    },
  ],
  metadata: {
    package_type: "bulk_10",
    member_id: member.id,
  },
});

Webhook Handling​

// Example webhook handler for session events
export async function POST(req: Request) {
  const payload = await req.text();
  const sig = req.headers.get("trendgate-signature");

  const event = verifyWebhook(payload, sig);

  switch (event.type) {
    case "session.completed":
      await handleSessionCompleted(event.data);
      break;
    case "booking.created":
      await sendBookingConfirmation(event.data);
      break;
    // ... handle other events
  }

  return new Response("OK", { status: 200 });
}

📚 More Resources​

🤝 Contributing Examples​

Have an example to share? We'd love to include it!

  1. Fork the examples repository
  2. Add your example following our guidelines
  3. Submit a pull request

See our Contributing Guide for more details.