Changelog (#399)
* feat: add changelog feature and update site navigation - Introduced a new Changelog page with pagination and detailed entry views. - Added components for displaying changelog entries, pagination, and entry details. - Updated site navigation to include a link to the new Changelog page. - Enhanced localization for changelog-related texts in marketing.json. * refactor: enhance Changelog page layout and entry display - Increased the number of changelog entries displayed per page from 2 to 20 for better visibility. - Improved the layout of the Changelog page by adjusting the container styles and removing unnecessary divs. - Updated the ChangelogEntry component to enhance the visual presentation of entries, including a new date badge with an icon. - Refined the CSS styles for Markdoc headings to improve typography and spacing. * refactor: enhance Changelog page functionality and layout - Increased the number of changelog entries displayed per page from 20 to 50 for improved user experience. - Updated ChangelogEntry component to make the highlight prop optional and refined the layout for better visual clarity. - Adjusted styles in ChangelogHeader and ChangelogPagination components for a more cohesive design. - Removed unnecessary order fields from changelog markdown files to streamline content management. * feat: enhance Changelog entry navigation and data loading - Refactored ChangelogEntry page to load previous and next entries for improved navigation. - Introduced ChangelogNavigation component to facilitate navigation between changelog entries. - Updated ChangelogDetail component to display navigation links and entry details. - Enhanced data fetching logic to retrieve all changelog entries alongside the current entry. - Added localization keys for navigation text in marketing.json. * Update package dependencies and enhance documentation layout - Upgraded various packages including @turbo/gen and turbo to version 2.6.0, and react-hook-form to version 7.66.0. - Updated lucide-react to version 0.552.0 across multiple packages. - Refactored documentation layout components for improved styling and structure. - Removed deprecated loading components and adjusted navigation elements for better user experience. - Added placeholder notes in changelog entries for clarity.
This commit is contained in:
Giancarlo Buomprisco
committed by
GitHub
GitHub
parent
a920dea2b3
commit
116d41a284
@@ -0,0 +1,350 @@
|
||||
---
|
||||
title: "Configuration"
|
||||
description: "Configure your application settings and feature flags."
|
||||
publishedAt: 2024-04-11
|
||||
order: 4
|
||||
status: "published"
|
||||
---
|
||||
|
||||
> **Note:** This is mock/placeholder content for demonstration purposes.
|
||||
|
||||
Customize your application behavior through configuration files.
|
||||
|
||||
## Configuration Files
|
||||
|
||||
All configuration files are located in `apps/web/config/`:
|
||||
|
||||
```
|
||||
config/
|
||||
├── paths.config.ts # Route paths
|
||||
├── billing.config.ts # Billing & pricing
|
||||
├── feature-flags.config.ts # Feature toggles
|
||||
├── personal-account-navigation.config.tsx
|
||||
├── team-account-navigation.config.tsx
|
||||
└── i18n.settings.ts # Internationalization
|
||||
```
|
||||
|
||||
## Feature Flags
|
||||
|
||||
Control feature availability:
|
||||
|
||||
```typescript
|
||||
// config/feature-flags.config.ts
|
||||
export const featureFlags = {
|
||||
enableTeamAccounts: true,
|
||||
enableBilling: true,
|
||||
enableNotifications: true,
|
||||
enableFileUploads: false,
|
||||
enableAnalytics: true,
|
||||
enableChat: false,
|
||||
};
|
||||
```
|
||||
|
||||
### Using Feature Flags
|
||||
|
||||
```typescript
|
||||
import { featureFlags } from '~/config/feature-flags.config';
|
||||
|
||||
export function ConditionalFeature() {
|
||||
if (!featureFlags.enableChat) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <ChatWidget />;
|
||||
}
|
||||
```
|
||||
|
||||
## Path Configuration
|
||||
|
||||
Define application routes:
|
||||
|
||||
```typescript
|
||||
// config/paths.config.ts
|
||||
export const pathsConfig = {
|
||||
auth: {
|
||||
signIn: '/auth/sign-in',
|
||||
signUp: '/auth/sign-up',
|
||||
passwordReset: '/auth/password-reset',
|
||||
callback: '/auth/callback',
|
||||
},
|
||||
app: {
|
||||
home: '/home',
|
||||
personalAccount: '/home',
|
||||
teamAccount: '/home/[account]',
|
||||
settings: '/home/settings',
|
||||
billing: '/home/settings/billing',
|
||||
},
|
||||
admin: {
|
||||
home: '/admin',
|
||||
users: '/admin/users',
|
||||
analytics: '/admin/analytics',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### Using Paths
|
||||
|
||||
```typescript
|
||||
import { pathsConfig } from '~/config/paths.config';
|
||||
import Link from 'next/link';
|
||||
|
||||
<Link href={pathsConfig.app.settings}>
|
||||
Settings
|
||||
</Link>
|
||||
```
|
||||
|
||||
## Navigation Configuration
|
||||
|
||||
### Personal Account Navigation
|
||||
|
||||
```typescript
|
||||
// config/personal-account-navigation.config.tsx
|
||||
import { HomeIcon, SettingsIcon } from 'lucide-react';
|
||||
|
||||
export default [
|
||||
{
|
||||
label: 'common:routes.home',
|
||||
path: pathsConfig.app.personalAccount,
|
||||
Icon: <HomeIcon className="w-4" />,
|
||||
end: true,
|
||||
},
|
||||
{
|
||||
label: 'common:routes.settings',
|
||||
path: pathsConfig.app.settings,
|
||||
Icon: <SettingsIcon className="w-4" />,
|
||||
},
|
||||
];
|
||||
```
|
||||
|
||||
### Team Account Navigation
|
||||
|
||||
```typescript
|
||||
// config/team-account-navigation.config.tsx
|
||||
export default [
|
||||
{
|
||||
label: 'common:routes.dashboard',
|
||||
path: createPath(pathsConfig.app.teamAccount, account),
|
||||
Icon: <LayoutDashboardIcon className="w-4" />,
|
||||
end: true,
|
||||
},
|
||||
{
|
||||
label: 'common:routes.projects',
|
||||
path: createPath(pathsConfig.app.projects, account),
|
||||
Icon: <FolderIcon className="w-4" />,
|
||||
},
|
||||
{
|
||||
label: 'common:routes.members',
|
||||
path: createPath(pathsConfig.app.members, account),
|
||||
Icon: <UsersIcon className="w-4" />,
|
||||
},
|
||||
];
|
||||
```
|
||||
|
||||
## Billing Configuration
|
||||
|
||||
```typescript
|
||||
// config/billing.config.ts
|
||||
export const billingConfig = {
|
||||
provider: 'stripe', // 'stripe' | 'paddle'
|
||||
enableTrial: true,
|
||||
trialDays: 14,
|
||||
|
||||
plans: [
|
||||
{
|
||||
id: 'free',
|
||||
name: 'Free',
|
||||
price: 0,
|
||||
features: ['5 projects', 'Basic support'],
|
||||
limits: {
|
||||
projects: 5,
|
||||
members: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'pro',
|
||||
name: 'Professional',
|
||||
price: 29,
|
||||
interval: 'month',
|
||||
features: ['Unlimited projects', 'Priority support'],
|
||||
limits: {
|
||||
projects: -1, // unlimited
|
||||
members: 10,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
## Internationalization
|
||||
|
||||
```typescript
|
||||
// lib/i18n/i18n.settings.ts
|
||||
export const i18nSettings = {
|
||||
defaultLocale: 'en',
|
||||
locales: ['en', 'es', 'fr', 'de'],
|
||||
defaultNamespace: 'common',
|
||||
namespaces: ['common', 'auth', 'billing', 'errors'],
|
||||
};
|
||||
```
|
||||
|
||||
## Email Configuration
|
||||
|
||||
```typescript
|
||||
// config/email.config.ts
|
||||
export const emailConfig = {
|
||||
from: {
|
||||
email: process.env.EMAIL_FROM || 'noreply@example.com',
|
||||
name: process.env.EMAIL_FROM_NAME || 'Your App',
|
||||
},
|
||||
provider: 'resend', // 'resend' | 'sendgrid' | 'postmark'
|
||||
};
|
||||
```
|
||||
|
||||
## SEO Configuration
|
||||
|
||||
```typescript
|
||||
// config/seo.config.ts
|
||||
export const seoConfig = {
|
||||
title: 'Your App Name',
|
||||
description: 'Your app description',
|
||||
ogImage: '/images/og-image.png',
|
||||
twitterHandle: '@yourapp',
|
||||
locale: 'en_US',
|
||||
|
||||
// Per-page overrides
|
||||
pages: {
|
||||
home: {
|
||||
title: 'Home - Your App',
|
||||
description: 'Welcome to your app',
|
||||
},
|
||||
pricing: {
|
||||
title: 'Pricing - Your App',
|
||||
description: 'Simple, transparent pricing',
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Theme Configuration
|
||||
|
||||
```typescript
|
||||
// config/theme.config.ts
|
||||
export const themeConfig = {
|
||||
defaultTheme: 'system', // 'light' | 'dark' | 'system'
|
||||
enableColorSchemeToggle: true,
|
||||
|
||||
colors: {
|
||||
primary: 'blue',
|
||||
accent: 'purple',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Analytics Configuration
|
||||
|
||||
```typescript
|
||||
// config/analytics.config.ts
|
||||
export const analyticsConfig = {
|
||||
googleAnalytics: {
|
||||
enabled: true,
|
||||
measurementId: process.env.NEXT_PUBLIC_GA_ID,
|
||||
},
|
||||
|
||||
posthog: {
|
||||
enabled: false,
|
||||
apiKey: process.env.NEXT_PUBLIC_POSTHOG_KEY,
|
||||
},
|
||||
|
||||
plausible: {
|
||||
enabled: false,
|
||||
domain: process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Rate Limiting
|
||||
|
||||
```typescript
|
||||
// config/rate-limit.config.ts
|
||||
export const rateLimitConfig = {
|
||||
api: {
|
||||
windowMs: 15 * 60 * 1000, // 15 minutes
|
||||
max: 100, // requests per window
|
||||
},
|
||||
|
||||
auth: {
|
||||
windowMs: 15 * 60 * 1000,
|
||||
max: 5, // login attempts
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Upload Configuration
|
||||
|
||||
```typescript
|
||||
// config/upload.config.ts
|
||||
export const uploadConfig = {
|
||||
maxFileSize: 5 * 1024 * 1024, // 5MB
|
||||
allowedMimeTypes: [
|
||||
'image/jpeg',
|
||||
'image/png',
|
||||
'image/gif',
|
||||
'image/webp',
|
||||
'application/pdf',
|
||||
],
|
||||
|
||||
storage: {
|
||||
provider: 'supabase', // 'supabase' | 's3' | 'cloudinary'
|
||||
bucket: 'uploads',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Environment-Specific Config
|
||||
|
||||
```typescript
|
||||
// config/app.config.ts
|
||||
const isDev = process.env.NODE_ENV === 'development';
|
||||
const isProd = process.env.NODE_ENV === 'production';
|
||||
|
||||
export const appConfig = {
|
||||
environment: process.env.NODE_ENV,
|
||||
apiUrl: isProd
|
||||
? 'https://api.yourapp.com'
|
||||
: 'http://localhost:3000/api',
|
||||
|
||||
features: {
|
||||
enableDebugTools: isDev,
|
||||
enableErrorReporting: isProd,
|
||||
enableAnalytics: isProd,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Use environment variables** for secrets
|
||||
2. **Type your configs** for autocomplete and safety
|
||||
3. **Document options** with comments
|
||||
4. **Validate on startup** to catch errors early
|
||||
5. **Keep configs simple** - avoid complex logic
|
||||
6. **Use feature flags** for gradual rollouts
|
||||
7. **Environment-specific values** for dev/prod differences
|
||||
|
||||
## Loading Configuration
|
||||
|
||||
Configs are automatically loaded but you can validate:
|
||||
|
||||
```typescript
|
||||
// lib/config/validate-config.ts
|
||||
import { z } from 'zod';
|
||||
|
||||
const ConfigSchema = z.object({
|
||||
apiUrl: z.string().url(),
|
||||
enableFeatureX: z.boolean(),
|
||||
});
|
||||
|
||||
export function validateConfig(config: unknown) {
|
||||
return ConfigSchema.parse(config);
|
||||
}
|
||||
```
|
||||
@@ -1,11 +1,13 @@
|
||||
---
|
||||
title: "Getting started with Makerkit"
|
||||
title: "Introduction"
|
||||
description: "Makerkit is a SaaS Starter Kit that helps you build a SaaS. Learn how to get started with Makerkit."
|
||||
publishedAt: 2024-04-11
|
||||
order: 0
|
||||
status: "published"
|
||||
---
|
||||
|
||||
> **Note:** This is mock/placeholder content for demonstration purposes.
|
||||
|
||||
Makerkit is a SaaS Starter Kit that helps you build a SaaS. It provides you with a set of tools and best practices to help you build a SaaS quickly and efficiently.
|
||||
|
||||
## Getting started
|
||||
|
||||
@@ -2,10 +2,12 @@
|
||||
title: "Installing Dependencies"
|
||||
description: "Learn how to install dependencies for your project."
|
||||
publishedAt: 2024-04-11
|
||||
order: 0
|
||||
order: 1
|
||||
status: "published"
|
||||
---
|
||||
|
||||
> **Note:** This is mock/placeholder content for demonstration purposes.
|
||||
|
||||
To install dependencies in your project, please install `pnpm` by running the following command:
|
||||
|
||||
```bash
|
||||
|
||||
@@ -0,0 +1,247 @@
|
||||
---
|
||||
title: "Project Structure"
|
||||
description: "Understanding the monorepo structure and organization."
|
||||
publishedAt: 2024-04-11
|
||||
order: 3
|
||||
status: "published"
|
||||
---
|
||||
|
||||
> **Note:** This is mock/placeholder content for demonstration purposes.
|
||||
|
||||
Learn how the codebase is organized and where to find things.
|
||||
|
||||
## Monorepo Overview
|
||||
|
||||
This project uses Turborepo to manage a monorepo with multiple apps and packages.
|
||||
|
||||
```
|
||||
project-root/
|
||||
├── apps/ # Applications
|
||||
│ ├── web/ # Main Next.js app
|
||||
│ ├── e2e/ # Playwright E2E tests
|
||||
│ └── dev-tool/ # Development utilities
|
||||
├── packages/ # Shared packages
|
||||
│ ├── features/ # Feature packages
|
||||
│ ├── ui/ # UI components
|
||||
│ ├── supabase/ # Supabase utilities
|
||||
│ └── billing/ # Billing integrations
|
||||
├── tooling/ # Development tools
|
||||
├── supabase/ # Database schema & migrations
|
||||
└── docs/ # Documentation
|
||||
```
|
||||
|
||||
## Main Application (`apps/web`)
|
||||
|
||||
The primary Next.js application:
|
||||
|
||||
```
|
||||
apps/web/
|
||||
├── app/ # Next.js App Router
|
||||
│ ├── (marketing)/ # Public pages
|
||||
│ ├── (auth)/ # Authentication
|
||||
│ ├── home/ # Main application
|
||||
│ │ ├── (user)/ # Personal account
|
||||
│ │ └── [account]/ # Team accounts
|
||||
│ ├── admin/ # Admin panel
|
||||
│ └── api/ # API routes
|
||||
├── components/ # Shared components
|
||||
├── config/ # Configuration files
|
||||
├── lib/ # Utility functions
|
||||
├── public/ # Static assets
|
||||
└── supabase/ # Supabase setup
|
||||
```
|
||||
|
||||
## Route Structure
|
||||
|
||||
### Marketing Routes (`(marketing)`)
|
||||
|
||||
Public-facing pages:
|
||||
|
||||
```
|
||||
app/(marketing)/
|
||||
├── page.tsx # Landing page
|
||||
├── pricing/ # Pricing page
|
||||
├── blog/ # Blog
|
||||
└── docs/ # Documentation
|
||||
```
|
||||
|
||||
### Auth Routes (`(auth)`)
|
||||
|
||||
Authentication pages:
|
||||
|
||||
```
|
||||
app/(auth)/
|
||||
├── sign-in/
|
||||
├── sign-up/
|
||||
├── password-reset/
|
||||
└── verify/
|
||||
```
|
||||
|
||||
### Application Routes (`home`)
|
||||
|
||||
Main application:
|
||||
|
||||
```
|
||||
app/home/
|
||||
├── (user)/ # Personal account context
|
||||
│ ├── page.tsx # Personal dashboard
|
||||
│ ├── settings/ # User settings
|
||||
│ └── projects/ # Personal projects
|
||||
└── [account]/ # Team account context
|
||||
├── page.tsx # Team dashboard
|
||||
├── settings/ # Team settings
|
||||
├── projects/ # Team projects
|
||||
└── members/ # Team members
|
||||
```
|
||||
|
||||
## Packages Structure
|
||||
|
||||
### Feature Packages (`packages/features/`)
|
||||
|
||||
Modular features:
|
||||
|
||||
```
|
||||
packages/features/
|
||||
├── accounts/ # Account management
|
||||
├── auth/ # Authentication
|
||||
├── team-accounts/ # Team features
|
||||
├── billing/ # Billing & subscriptions
|
||||
├── admin/ # Admin features
|
||||
└── notifications/ # Notification system
|
||||
```
|
||||
|
||||
### UI Package (`packages/ui/`)
|
||||
|
||||
Shared UI components:
|
||||
|
||||
```
|
||||
packages/ui/
|
||||
└── src/
|
||||
├── components/ # Shadcn UI components
|
||||
│ ├── button.tsx
|
||||
│ ├── input.tsx
|
||||
│ ├── dialog.tsx
|
||||
│ └── ...
|
||||
└── utils/ # UI utilities
|
||||
```
|
||||
|
||||
### Supabase Package (`packages/supabase/`)
|
||||
|
||||
Database utilities:
|
||||
|
||||
```
|
||||
packages/supabase/
|
||||
├── schema/ # Declarative schemas
|
||||
│ ├── accounts.schema.ts
|
||||
│ ├── auth.schema.ts
|
||||
│ └── ...
|
||||
├── src/
|
||||
│ ├── clients/ # Supabase clients
|
||||
│ ├── hooks/ # React hooks
|
||||
│ └── middleware/ # Auth middleware
|
||||
└── migrations/ # SQL migrations
|
||||
```
|
||||
|
||||
## Configuration Files
|
||||
|
||||
### Root Level
|
||||
|
||||
```
|
||||
project-root/
|
||||
├── package.json # Root package.json
|
||||
├── turbo.json # Turborepo config
|
||||
├── pnpm-workspace.yaml # PNPM workspace
|
||||
└── tsconfig.json # Base TypeScript config
|
||||
```
|
||||
|
||||
### Application Level
|
||||
|
||||
```
|
||||
apps/web/
|
||||
├── next.config.js # Next.js configuration
|
||||
├── tailwind.config.ts # Tailwind CSS
|
||||
├── tsconfig.json # TypeScript config
|
||||
└── .env.local # Environment variables
|
||||
```
|
||||
|
||||
### Feature Configuration
|
||||
|
||||
```
|
||||
apps/web/config/
|
||||
├── paths.config.ts # Route paths
|
||||
├── billing.config.ts # Billing settings
|
||||
├── feature-flags.config.ts # Feature flags
|
||||
├── personal-account-navigation.config.tsx
|
||||
└── team-account-navigation.config.tsx
|
||||
```
|
||||
|
||||
## Naming Conventions
|
||||
|
||||
### Files
|
||||
|
||||
- **Pages**: `page.tsx` (Next.js convention)
|
||||
- **Layouts**: `layout.tsx`
|
||||
- **Components**: `kebab-case.tsx`
|
||||
- **Utilities**: `kebab-case.ts`
|
||||
- **Types**: `types.ts` or `component-name.types.ts`
|
||||
|
||||
### Directories
|
||||
|
||||
- **Route segments**: `[param]` for dynamic
|
||||
- **Route groups**: `(group)` for organization
|
||||
- **Private folders**: `_components`, `_lib`
|
||||
- **Parallel routes**: `@folder`
|
||||
|
||||
### Code Organization
|
||||
|
||||
```
|
||||
feature/
|
||||
├── page.tsx # Route page
|
||||
├── layout.tsx # Route layout
|
||||
├── loading.tsx # Loading state
|
||||
├── error.tsx # Error boundary
|
||||
├── _components/ # Private components
|
||||
│ ├── feature-list.tsx
|
||||
│ └── feature-form.tsx
|
||||
└── _lib/ # Private utilities
|
||||
├── server/ # Server-side code
|
||||
│ ├── loaders.ts
|
||||
│ └── actions.ts
|
||||
└── schemas/ # Validation schemas
|
||||
└── feature.schema.ts
|
||||
```
|
||||
|
||||
## Import Paths
|
||||
|
||||
Use TypeScript path aliases:
|
||||
|
||||
```typescript
|
||||
// Absolute imports from packages
|
||||
import { Button } from '@kit/ui/button';
|
||||
import { createClient } from '@kit/supabase/server-client';
|
||||
|
||||
// Relative imports within app
|
||||
import { FeatureList } from './_components/feature-list';
|
||||
import { loadData } from './_lib/server/loaders';
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Keep route-specific code private** - Use `_components` and `_lib`
|
||||
2. **Share reusable code** - Extract to packages
|
||||
3. **Collocate related files** - Keep files near where they're used
|
||||
4. **Use consistent naming** - Follow established patterns
|
||||
5. **Organize by feature** - Not by file type
|
||||
|
||||
## Finding Your Way
|
||||
|
||||
| Looking for... | Location |
|
||||
|----------------|----------|
|
||||
| UI Components | `packages/ui/src/components/` |
|
||||
| Database Schema | `packages/supabase/schema/` |
|
||||
| API Routes | `apps/web/app/api/` |
|
||||
| Auth Logic | `packages/features/auth/` |
|
||||
| Billing Code | `packages/features/billing/` |
|
||||
| Team Features | `packages/features/team-accounts/` |
|
||||
| Config Files | `apps/web/config/` |
|
||||
| Types | `*.types.ts` files throughout |
|
||||
133
apps/web/content/documentation/getting-started/quick-start.mdoc
Normal file
133
apps/web/content/documentation/getting-started/quick-start.mdoc
Normal file
@@ -0,0 +1,133 @@
|
||||
---
|
||||
title: "Quick Start"
|
||||
description: "Get your application running in minutes with this quick start guide."
|
||||
publishedAt: 2024-04-11
|
||||
order: 2
|
||||
status: "published"
|
||||
---
|
||||
|
||||
> **Note:** This is mock/placeholder content for demonstration purposes.
|
||||
|
||||
Get your development environment up and running quickly.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Before you begin, ensure you have:
|
||||
- **Node.js** 18.x or higher
|
||||
- **pnpm** 8.x or higher
|
||||
- **Git** for version control
|
||||
- A **Supabase** account (free tier works great)
|
||||
|
||||
## Step 1: Clone the Repository
|
||||
|
||||
```bash
|
||||
git clone https://github.com/yourorg/yourapp.git
|
||||
cd yourapp
|
||||
```
|
||||
|
||||
## Step 2: Install Dependencies
|
||||
|
||||
```bash
|
||||
pnpm install
|
||||
```
|
||||
|
||||
This will install all required dependencies across the monorepo.
|
||||
|
||||
## Step 3: Set Up Environment Variables
|
||||
|
||||
Copy the example environment file:
|
||||
|
||||
```bash
|
||||
cp apps/web/.env.example apps/web/.env.local
|
||||
```
|
||||
|
||||
Update the following variables:
|
||||
|
||||
```bash
|
||||
# Supabase Configuration
|
||||
NEXT_PUBLIC_SUPABASE_URL=http://localhost:54321
|
||||
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here
|
||||
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key-here
|
||||
|
||||
# Application
|
||||
NEXT_PUBLIC_SITE_URL=http://localhost:3000
|
||||
```
|
||||
|
||||
## Step 4: Start Supabase
|
||||
|
||||
Start your local Supabase instance:
|
||||
|
||||
```bash
|
||||
pnpm supabase:web:start
|
||||
```
|
||||
|
||||
This will:
|
||||
- Start PostgreSQL database
|
||||
- Start Supabase Studio (localhost:54323)
|
||||
- Apply all migrations
|
||||
- Seed initial data
|
||||
|
||||
## Step 5: Start Development Server
|
||||
|
||||
```bash
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
Your application will be available at:
|
||||
- **App**: http://localhost:3000
|
||||
- **Supabase Studio**: http://localhost:54323
|
||||
- **Email Testing**: http://localhost:54324
|
||||
|
||||
## Step 6: Create Your First User
|
||||
|
||||
1. Navigate to http://localhost:3000/auth/sign-up
|
||||
2. Enter your email and password
|
||||
3. Check http://localhost:54324 for the confirmation email
|
||||
4. Click the confirmation link
|
||||
5. You're ready to go!
|
||||
|
||||
## Next Steps
|
||||
|
||||
Now that your app is running:
|
||||
|
||||
1. **Explore the Dashboard** - Check out the main features
|
||||
2. **Review the Code** - Familiarize yourself with the structure
|
||||
3. **Read the Docs** - Learn about key concepts
|
||||
4. **Build Your Feature** - Start customizing
|
||||
|
||||
## Common Issues
|
||||
|
||||
### Port Already in Use
|
||||
|
||||
If port 3000 is already in use:
|
||||
|
||||
```bash
|
||||
# Find and kill the process
|
||||
lsof -i :3000
|
||||
kill -9 <PID>
|
||||
```
|
||||
|
||||
### Supabase Won't Start
|
||||
|
||||
Try resetting Supabase:
|
||||
|
||||
```bash
|
||||
pnpm supabase:web:stop
|
||||
docker system prune -a # Clean Docker
|
||||
pnpm supabase:web:start
|
||||
```
|
||||
|
||||
### Database Connection Error
|
||||
|
||||
Ensure Docker is running and restart Supabase:
|
||||
|
||||
```bash
|
||||
docker ps # Check Docker is running
|
||||
pnpm supabase:web:reset
|
||||
```
|
||||
|
||||
## What's Next?
|
||||
|
||||
- Learn about the [project structure](/docs/getting-started/project-structure)
|
||||
- Understand [configuration options](/docs/getting-started/configuration)
|
||||
- Follow [best practices](/docs/development/workflow)
|
||||
Reference in New Issue
Block a user