RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/fluid-design-io/payload-better-auth-starter below:

fluid-design-io/payload-better-auth-starter: A production-ready PayloadCMS starter with Better Auth, modern UI components, and full-stack development tools.

A production-ready PayloadCMS starter with payload-auth, modern UI components, and full-stack development tools.

🔐 Better Auth - Modern authentication with email OTP via payload-auth (Better Auth)
🎨 Shadcn UI - Beautiful, accessible components
📝 Blog System - SEO-optimized with rich text editor
📧 Email Templates - Custom React Email templates
🗄️ PostgreSQL - Production-ready database
☁️ S3 Storage - Public & private file uploads
🐳 Docker Compose - One-command local development
📱 Responsive Design - Mobile-first approach
🎭 Motion Primitives - Smooth animations
🔍 SEO Plugin - Built-in SEO management

Video.Demo.mp4

Content Block: Allows you to create a content section with multiple columns that are mobile responsive.
Media Block: Refined version of Payload's default media block (added zoom functionality).
Gallery Block: A grid of zoomable images.
CopyRight Inline Block: An inline block that adds © Copyright ${fromYear}~${currentYear}... so you don't have to manually change it every year.

LayoutHeader: A header component with a badge, h1 title, and description.
SectionSpacing: A spacing component for vertical spacing between sections.
SectionGrid: A grid layout with multiple content items.
SectionGridItem: An individual content item for vertical row layout.
SectionHeader: A section header with a badge, h2 title, and description.
SectionHorizontal: A horizontal section with a title, description, and media.
ImageMedia: A reusable image media component with customizable gradients and styling.
VideoMedia: A reusable Vimeo video media component with configurable playback options.
FullWidthImage: A large full-width image section with a glow effect.

Example usage 👀

import {
  FullWidthImage,
  ImageMedia,
  LayoutHeader,
  SectionGrid,
  SectionGridItem,
  SectionHeader,
  SectionHorizontal,
  SectionSpacing,
} from "@/components/layout/elements";
import { Main } from "@/components/layout/main";

export default function FeaturesPage() {
  return (
    <Main>
      <LayoutHeader title='Features' badge='Acme' description='...' />
      <SectionSpacing>
        <SectionGrid>
          <SectionGridItem
            title='Title 1'
            description='...'
            media={<ImageMedia src={image} alt='Title 1' zoom />}
          />
          <SectionGridItem
            title='Title 2'
            description='...'
            media={<ImageMedia src={image} alt='Title 2' zoom />}
          />
        </SectionGrid>
        <FullWidthImage
          image={image}
          caption='Image Caption'
          alt='Title 1'
          zoom
        />
        <SectionHorizontal
          variant='right'
          title='Title 3'
          description='...'
          media={
            <ImageMedia
              src={image}
              alt='Title 3'
              className='p-8'
              imgClassName='rounded-2xl'
              gradientColors={[
                "from-cyan-200/20",
                "via-cyan-300/20",
                "to-cyan-500/20",
              ]}
              zoom
            />
          }
        />
      </SectionSpacing>
    </Main>
  );
}

Main Pages

Account Settings

Email UI

git clone fluid-design-io/payload-better-auth-starter
cd payload-better-auth-starter
bun install

# Create environment file
cp .env.example .env

# Edit with your values
nano .env

# Start all services (PostgreSQL, S3, Email)
bun run dev

Visit http://localhost:3000 for your site and http://localhost:3000/admin for the CMS.

Replace "Acme" with Your Brand

Logo & Icons

# Replace these files:
src/components/icons.tsx          # Main logo
src/components/payload/admin-icon.tsx  # Admin panel icon
public/favicon.ico               # Browser favicon

Company Name

# Search and replace "Acme" in:
src/lib/constants.ts
src/plugins/seo-plugin.ts
src/lib/email/email-template.tsx

Open Graph Images

# Replace default OG image:
public/website-template-OG.png

Email Templates

# Customize email branding:
src/lib/email/email-template.tsx
src/plugins/form-plugin/before-email.tsx

# Required for production
PAYLOAD_SECRET=your-secret-key
DATABASE_URI=postgresql://user:pass@host:port/db

# Optional - S3 Storage
S3_BUCKET=your-bucket
S3_ACCESS_KEY_ID=your-key
S3_SECRET_ACCESS_KEY=your-secret
S3_REGION=us-east-1

# Optional - Email (Resend)
RESEND_API_KEY=your-resend-key

Users - Authentication & user management
Blog - SEO-optimized blog posts with authors
Media - Image/video uploads with S3 storage
Globals - Site-wide content (footer, etc.)

Better Auth - Modern authentication system
SEO Plugin - Meta tags, Open Graph, structured data
Import/Export - Data migration tools
S3 Storage - Cloud file storage
Form Builder - Contact forms (optional)

Shadcn UI - 30+ accessible components
Motion Primitives - Framer Motion utilities
Theme System - Dark/light mode support
Responsive Layout - Mobile-first design

bun run dev          # Start development server
bun run build        # Build for production
bun run start        # Start production server

# Docker Services
bun run services:start    # Start PostgreSQL, S3, Email
bun run services:stop     # Stop all services
bun run services:logs     # View service logs

# Database
bun run db:reset         # Reset database
bun run db:connect       # Connect to PostgreSQL

# Email Testing
bun run email:test       # Test email functionality

Enable the form plugin for contact forms:

Move extra/form/ to src/plugins/form/
Uncomment form plugin in src/plugins/index.ts
Restart development server

src/
├── app/                 # Next.js app router
├── collections/         # PayloadCMS collections
├── components/          # React components
│   ├── ui/             # Shadcn UI components
│   ├── layout/         # Layout components
│   └── payload/        # CMS-specific components
├── lib/                 # Utilities & configurations
├── plugins/             # PayloadCMS plugins
└── blocks/              # Content blocks

Connect your GitHub repository
Set environment variables
Deploy automatically

docker-compose -f docker-compose.prod.yml up -d

MIT License - see LICENSE.md for details.

Need help? Check out the PayloadCMS docs or Better Auth docs.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4