Mayoyo.site

Database

Comprehensive guide to the pre-configured database setup using Supabase and Sanity CMS, including tables, content handling, user management, and integration examples.

Database

Your template comes with a complete database setup using Supabase PostgreSQL and Sanity CMS. Everything is pre-configured - you just need to understand how it works.

What's Already Set Up

Supabase Tables

  • Profiles - User data with Stripe customer IDs
  • Subscriptions - Stripe subscription tracking
  • Contact Messages - Contact form submissions
  • Row Level Security - Users only see their own data

Sanity CMS

  • Blog system - Posts, authors, categories
  • Content schemas - Pre-built content types
  • Image handling - Optimized image delivery

Working with User Data

Get User Profile

import { createClient } from '@/lib/supabase/client';

const supabase = createClient();
const { data: profile } = await supabase
  .from('profiles')
  .select('*')
  .eq('id', user.id)
  .single();

Update User Data

const { error } = await supabase
  .from('profiles')
  .update({ full_name: 'John Doe' })
  .eq('id', user.id);

Get Subscription Status

const { data: subscription } = await supabase
  .from('subscriptions')
  .select('*')
  .eq('user_id', user.id)
  .single();

Working with Content

Fetch Blog Posts

import { createClient } from '@/lib/sanity/client';

// Get all posts
export async function getBlogPosts() {
  return await createClient().fetch(`
    *[_type == "post"] | order(publishedAt desc) {
      title, slug, excerpt, featuredImage, publishedAt
    }
  `);
}

// Get single post
export async function getBlogPost(slug: string) {
  return await createClient().fetch(
    `
    *[_type == "post" && slug.current == $slug][0]
  `,
    { slug }
  );
}

Handle Images

import imageUrlBuilder from '@sanity/image-url'
import { createClient } from '@/lib/sanity/client'

const builder = imageUrlBuilder(createClient())

export function urlFor(source: any) {
  return builder.image(source)
}

// Usage
<Image
  src={urlFor(post.featuredImage).width(800).url()}
  alt={post.title}
/>

Database Structure

User Flow

  1. User signs up → Profile created automatically
  2. User subscribes → Subscription record created via Stripe webhook
  3. Profile updated with subscription status
  4. User accesses features based on subscription

Content Flow

  1. Create content in Sanity Studio (http://localhost:3333)
  2. Content appears on your site automatically
  3. Blog posts show at /blog
  4. Other content via API calls

Key Files

lib/
├── supabase/
│   ├── client.ts          # Client-side queries
│   └── server.ts          # Server-side queries
├── sanity/
│   ├── client.ts          # Sanity client
│   └── queries.ts         # Content queries
└── database.types.ts      # TypeScript types

Managing Content

Sanity Studio

  • Access at http://localhost:3333
  • Create blog posts, authors, pages
  • Preview content before publishing
  • Media library for images

Database Admin

  • Access Supabase dashboard for user data
  • View subscription status
  • Monitor contact form submissions
  • Check analytics data

Common Tasks

Add New User Field

  1. Add column in Supabase dashboard
  2. Update TypeScript types
  3. Add to profile forms

Create New Content Type

  1. Add schema in sanity/schemas/
  2. Create query functions
  3. Build frontend components

Track User Activity

// Example: Track feature usage
const trackFeatureUse = async (feature: string) => {
  await supabase.from('user_activity').insert({
    user_id: user.id,
    feature,
    used_at: new Date().toISOString(),
  });
};

Troubleshooting

Can't see user data?

  • Check if user is logged in
  • Verify RLS policies are working

Content not loading?

  • Confirm Sanity project ID is correct
  • Check if content is published in Studio

Database errors?

  • Review your environment variables
  • Check Supabase connection status

Your database is ready to use - no additional setup needed. The schemas, security, and integrations are all configured. Just start building your features!

Authentication

Complete guide to the authentication system built with Supabase, including user management, protected routes, and customization options.

Deployment

Step-by-step guide to deploying your SaaS with Vercel, setting up production services like Supabase, Stripe, and Sanity, and ensuring performance, security, and monitoring.