Next Frames Development Guide

This skill provides guidance when working with the Next Frames codebase - a Next.js 15 application with React 19 for image slideshow management using Supabase.

Development Commands

When working with this project, use these npm scripts:

Architecture Overview

Next Frames uses Next.js 15 App Router with React 19 and Supabase as the backend.

Route Structure

The application has three main routes:

1. `/login` - Supabase authentication page

2. `/dashboard` - Protected image management interface (requires authentication)

3. `/slideshow` - Public slideshow display with auto-refresh every 5 minutes

Authentication Pattern

State Management

Key Components

Located in `components/`:

Server Actions Pattern

All database operations use Next.js Server Actions located in `app/actions/`:

**Important:** Always use server actions for database operations. Never call Supabase directly from client components.

Image Management Flow

1. Images are stored in Supabase storage

2. Image URLs and metadata stored in Supabase database

3. Images have a `position` field for ordering

4. Server actions handle all CRUD operations

5. Context provides reactive state updates to UI

Environment Setup

Before starting development, ensure `.env.local` contains:

```

NEXT_PUBLIC_SUPABASE_URL=<your-supabase-url>

NEXT_PUBLIC_SUPABASE_ANON_KEY=<your-anon-key>

```

Styling Approach

Development Workflow

When making changes:

1. **Authentication changes:** Update middleware.js or Supabase utilities in `utils/supabase/`

2. **New database operations:** Create new server action in `app/actions/`

3. **UI changes:** Update components in `components/`

4. **Route additions:** Add to `app/` directory following App Router conventions

5. **State management:** Extend `ImagesContext` as needed

Common Patterns

Adding a New Server Action

1. Create new file in `app/actions/`

2. Mark with `'use server'` directive

3. Import Supabase server client from `utils/supabase/server.js`

4. Handle errors appropriately

5. Return data in consistent format

Creating Protected Routes

1. Add route to `app/` directory

2. Middleware automatically protects routes based on patterns in `middleware.js`

3. Use `createClient()` from server utils to access authenticated user

Working with Images

Testing Checklist

Before committing changes: