Skip to content

DEVELOPMENT.md

Latest commit

 

History

History
265 lines (174 loc) · 6.71 KB

DEVELOPMENT.md

File metadata and controls

265 lines (174 loc) · 6.71 KB

Development

Table of Contents

Prerequisites

Before you get started, you will need to have the following tools installed on your machine:

  • Node.js (version 12 or later)
  • pnpm (version 5 or later) or npm or yarn (version 6 or later)
  • Git (optional, but recommended for version control)

This repository includes a list of suggested VS Code extensions. It's a good idea to use VS Code and accept its suggestion to install them, as they'll help with development.

Getting Started

Configuration

The project uses environmental variables for configuration. You can set the environmental variables in a .env file in the root directory of the project. The .env file should contain key-value pairs in the following format:

  • NEXT_PUBLIC_SITE_URL (required): The URL of the frontend App of the project.

Adding a new environmental variable requires a zod schema update in the env folder and a new entry in the schema.js file in the serverSchema variable or clientSchema variable.

Installing the dependencies

You can run the project locally by

git clone https://github.com/timelessco/recollect.git
cd recollect
pnpm install

This will download and install all the required dependencies for the project.

Add the env file

You need to create a .env file and add all the environmental variables as per the env.local.txt file

Running the project locally

pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying src/pages/index.js. The page auto-updates as you edit the file

Building the project

To build the project to a production environment, you can use the

pnpm build

to build the production-ready version of the project. This will create a .next directory with the compiled code and static assets.

Run the above built application locally using

pnpm start

Deploying the project

Guide on how to deploy Next.js to various hosting providers.

More DX scripts

Check for all the below errors in one command using Turborepo

pnpm lint

AutoFix all the linting errors in one command using Turborepo

pnpm fix

Ultracite

Ultracite: Zero-config linting and formatting via Oxlint + Oxfmt

Check for linting and formatting errors

pnpm lint:ultracite

AutoFix linting and formatting errors

pnpm fix:ultracite

Stylelint

(Stylelint): Checks all css files

Check the css linting errors

pnpm lint:css

AutoFix the css linting errors

pnpm fix:css

Markdown

(Markdownlint): Checks all Markdown files

Check the markdown linting errors

pnpm lint:md

AutoFix the markdown linting errors

pnpm fix:md

Check Types (Deno)

(Deno): Type checks Supabase Edge Functions

Check Deno types

pnpm lint:types:deno

Check unused dependencies, exports & types

(knip): Checks all unused dependencies, exports & types

Check the spelling errors

pnpm lint:knip

Check Spelling

(cspell): Spell checks across all source files

Check the spelling errors

pnpm lint:spelling

Test

Run the test suite

pnpm test

Setting up Supabase for Local Development

This project uses Supabase migrations for database schema management. All database setup is automated through migration files.

Quick Start

# Start local Supabase (Docker required)
npx supabase start

# Check status and get credentials
npx supabase status

# Access local services
# Studio Dashboard: http://localhost:54323
# API Gateway: http://localhost:54321
# Database: postgresql://postgres:postgres@localhost:54322/postgres

Working with Database Migrations

# Create a new migration
npx supabase migration new <migration_name>

# Generate migration from UI changes
npx supabase db diff -f <migration_name>

# Apply migrations and reset database
npx supabase db reset

Comprehensive Setup Guide

For detailed instructions including troubleshooting, environment configuration, and best practices, see:

📖 Supabase Local Development Guide

This guide covers:

  • Complete local development workflow
  • Making schema changes with migrations
  • Troubleshooting common issues
  • Database operations and commands
  • Data management and seeding

Google OAuth Setup

To enable Google login, configure OAuth in your Supabase project:

  1. Follow the Supabase Google Login Guide

  2. Add credentials to your .env.local:

    DEV_SUPABASE_AUTH_GOOGLE_CLIENT_ID=your-client-id
DEV_SUPABASE_AUTH_GOOGLE_SECRET=your-client-secret

Database Webhooks

After running migrations, manually enable Database Webhooks in Supabase Studio:

  1. Go to Database → Integrations → Postgres Modules
  2. Enable "Database Webhooks"
  3. Configure webhook triggers as needed

Note: When setting webhook URLs for local development, use your machine's local IP instead of localhost (Docker limitation). See the local development guide for details.