Projects Integration with Supabase - Setup Guide

This guide explains how to configure and populate the projects integration with Supabase (Postgres + Auth + Storage).

📋 What was implemented

1. TypeScript types

• Arquivo: src/app/types/project.ts
• Full definition of the Project interface
• ProjectInput type for create/update
• Listing filters and result type

2. Server functions

• src/app/server/projects/get-all-projects.ts: Busca todos os projetos com filtros
• src/app/server/projects/get-project-by-slug.ts: Busca projeto por slug

3. Server Actions (CRUD)

• src/app/actions/projects/create-project.ts: Criar projeto
• src/app/actions/projects/update-project.ts: Atualizar projeto
• src/app/actions/projects/delete-project.ts: Deletar projeto (soft/hard delete)
• src/app/actions/projects/toggle-project-active.ts: Alternar status ativo

4. Updated components

• src/app/components/projects/projects-grid.tsx:

  • Consumes projects from the server
  • Category filter (mobile, front-end, back-end, full-stack, ai)
  • Stack/technology filter
  • Empty state when there are no results

• src/app/[locale]/(pages)/projetos/page.tsx:

  • Fetches Supabase projects on the server
  • Passes data to the ProjectsGrid component

5. Translations

Added translation keys in EN, PT, and ES:

• Projects.stackFilter.title: “Filtrar por tecnologia”
• Projects.stackFilter.clear: “Limpar filtro”
• Projects.emptyState: “Nenhum projeto encontrado com os filtros selecionados”

6. Seeding

• Use npm run db:seed to populate local data (optional)

🚀 Next steps

1. Create indexes in Postgres (Supabase)

Create indexes that match your filter/sort queries (e.g., slug, created_at).

You can define indexes directly in the Supabase SQL migrations.

Option B: Create manually

Open the Supabase Dashboard and create the necessary indexes: https://app.supabase.com 

Recommended indexes for the projects table:

1. isActive (ASC) + order (ASC) - Default ordering
2. isActive (ASC) + createdAt (DESC) - Sort by newest
3. isActive (ASC) + isFeatured (DESC) + order (ASC) - Featured projects
4. isActive (ASC) + category (ASC) + order (ASC) - Category filters
5. isActive (ASC) + stack (ARRAY_CONTAINS) + order (ASC) - Stack filters

2. Populate the database

Run the seed to populate sample projects (optional):

npm run db:seed

The seed should:

• Read projects from src/app/data/projects.ts
• Insert rows into the projects table
• Extract technologies into the stack array for filters
• Check for duplicate slugs
• Add timestamps and metadata

3. projects record structure (Supabase)

{
  "slug": "luminall-ai",
  "title": "luminall-ai",
  "description": "luminall-ai",
  "badge": "luminall-ai",
  "category": "ai",
  "tech": ["Next.js", "OpenAI GPT-4", "TypeScript", "Supabase", "Tailwind"],
  "link": "https://www.luminall.me",
  "image": "/assets/images/projects/front-end/luminall-demo.png",
  "imagePath": "/assets/images/projects/front-end/luminall-demo.png",
  "stack": ["Next.js", "OpenAI GPT-4", "TypeScript", "Supabase", "Tailwind"],
  "isActive": true,
  "isFeatured": false,
  "order": 0,
  "createdAt": "2025-01-XX...",
  "updatedAt": "2025-01-XX..."
}

Note: The title, description, and badge fields are translation IDs. The component looks them up in messages/[locale].json using Projects.items.{slug}.{field}.

🔍 How the stack filter works

1. ProjectsGrid extracts the unique technologies from every project’s stack array
2. Renders a button for each technology
3. Clicking a technology filters projects that include it in their stack array
4. Works alongside the category filter

🎨 Customization

Add new projects programmatically

1. Use a action createProject:

import { createProject } from "@/app/actions/projects/create-project";
 
const result = await createProject({
  slug: "meu-novo-projeto",
  title: "meu-novo-projeto", // Translation ID
  description: "meu-novo-projeto", // Translation ID
  badge: "meu-novo-projeto", // Translation ID
  category: "front-end",
  tech: ["React", "Next.js", "TypeScript"],
  link: "https://exemplo.com",
  stack: ["React", "Next.js", "TypeScript"],
  isActive: true,
  isFeatured: false,
  order: 10,
});

2. Add translations in src/i18n/messages/[locale].json:

{
  "Projects": {
    "items": {
      "meu-novo-projeto": {
        "title": "My New Project",
        "description": "Project description...",
        "badge": "Project badge"
      }
    }
  }
}

Manage project ordering

Projects are ordered by the order field (ascending). To reorder:

import { updateProject } from "@/app/actions/projects/update-project";
 
await updateProject(firestoreId, { order: 5 });

🐛 Troubleshooting

Error: “The query requires an index”

• Create the necessary indexes in Postgres (Supabase)

Projects do not appear on the page

• Make sure you ran the migration script
• Confirm the projects have `isActive: true
• Check server logs for connection errors

Filters are not working

• Verify the indexes exist
• Ensure the stack field is populated correctly

📚 Additional resources

• Indexes in Postgres 
• Next.js Server Actions documentation 
• next-intl documentation