Board Notes

Board Notes is a small community app for custom keyboard enthusiasts. Users can browse posts, filter by category, search, save posts, comment, and create or edit their own posts with uploaded cover images and rich text content.

Stack

• Next.js 13 pages router
• React 18
• TypeScript
• Tailwind CSS
• React Query v3
• Supabase Auth
• Supabase Postgres
• Supabase Storage
• Quill editor
• Shadcn Sonner for toasts

Main Features

• Home feed with pagination
• Category feeds
• Search from the header on desktop and a dedicated search page on mobile
• Sign up, login, and email confirmation guidance
• Create, edit, and delete posts
• Cover image upload to Supabase Storage
• Embedded editor image upload to Supabase Storage
• Save and unsave posts
• Comment and comment deletion by owner

Local Development

Install dependencies:

npm install

Start the app:

npm run dev

The dev server runs on:

http://localhost:3002

Useful commands:

npm run lint
npm run build

Environment Variables

Create .env.local with:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_KEY=your_supabase_anon_key

Supabase Setup

The app expects:

• a public Storage bucket named images
• category images under images/categories/...
• post images under images/posts/<user_id>/...

The app stores post image URLs in public.posts.img_url.

Database SQL

Reference SQL files live in SQL:

• SQL/userTable.sql
• SQL/tables.sql
• SQL/table_policies.sql
• SQL/image_policies.sql

Live migration files for an existing Supabase project:

• SQL/20260321_202930_live_schema_migration.sql
• SQL/20260323_203429_add_post_ownership.sql
• SQL/20260331_120500_add_posts_update_policy.sql

For a fresh setup, preferred order is:

1. SQL/userTable.sql
2. SQL/tables.sql
3. SQL/table_policies.sql
4. SQL/image_policies.sql

For an existing database, review the migration files instead of replaying the reference files blindly.

Content Limits

Current editor and post limits:

• title: 80 characters
• body text: 5000 characters
• embedded images per post body: 5
• embedded image file size: 5 MB each
• post list pagination: 10 posts per page

Default post image:

• /images/default/2149680226.jpg

Project Structure

• src/pages: route entry points
• src/components: reusable UI
• src/api: Supabase data-access helpers
• src/config: routes, Supabase config, app constants
• src/types: shared TypeScript types
• src/styles: global styles

Important pages:

• src/pages/index.tsx
• src/pages/post/new/index.tsx
• src/pages/post/[id].tsx
• src/pages/post/[id]/edit.tsx
• src/pages/category/[id].tsx
• src/pages/search/index.tsx
• src/pages/saved/index.tsx
• src/pages/my-posts/index.tsx

Notes

• The app uses the Next.js pages router, not the app router.
• Comment author names come from profiles, not users.
• If you change image upload path conventions, update both the app code and the Storage RLS policies.
• next.config.js must stay aligned with the active Supabase project hostname for next/image.