Founderflow Logo

Customization Guide

Learn how to customize your Founderflow Boilerplate to match your brand and requirements. This guide covers everything from basic branding to advanced feature customization.

Brand Customization

Update Site Settings

Configure your site's basic information in lib/config/settings.ts:

lib/config/settings.ts
export const SiteSettings = {
name: "Your Brand Name",
logoUrlLight: "/your-light-logo.png",
logoUrlDark: "/your-dark-logo.png",
domainName: "yourdomain.com"
};

💡 Pro Tip

Update both light and dark logo URLs for proper theme support.

⚠️ Important

Update the domain URLs to match your actual deployment domain.

Update SEO Configuration

Configure your SEO settings in lib/config/seo.config.ts:

lib/config/seo.config.ts
const SEO_CONFIG = {
title: "Your Brand - Your Tagline",
description: "Your brand description...",
keywords: "your, relevant, keywords"
};

Feature Customization

Modify Pricing Plans

Customize your subscription plans in lib/config/pricing.ts:

lib/config/pricing.ts
export const PricingPlans = [
{
id: "your-plan",
name: "Your Plan Name",
price: "19.99",
features: [
{ active: true, title: "Your Feature" }
]
}
];

Add New Components

Follow these steps to add new components to your application:

1

Create Component

Create your component in the appropriate folder (ui/, landing/, platform/, etc.)

2

Export from Index

Export your component from the index file for clean imports

3

Import Where Needed

Import and use your component in the appropriate pages or components

4

Add TypeScript Types

Define proper TypeScript interfaces for component props

Content Customization

Update Translations

Modify text content in your translation files located in locales/:

locales/en.json
{
"Hero": {
"Title": "Your Hero Title",
"Subtitle": "Your hero subtitle"
}
}

Modify Landing Page

Customize your landing page content and sections:

Update hero sections
Customize features list
Modify testimonials
Update FAQ content
Customize call-to-action buttons
Update footer links

Functionality Customization

Add New API Routes

Follow these steps to add custom API endpoints:

1

Create Route File

Create a new route file in app/api/

2

Implement Handler Function

Create the API handler function with proper HTTP method handling

3

Add TypeScript Types

Define proper TypeScript interfaces for request/response data

4

Test Functionality

Test your API endpoint to ensure it works correctly

Extend Database Models

Customize your database schema to fit your needs:

1

Modify Existing Models

Update existing models to add new fields or modify existing ones

2

Create New Models

Create new models for additional data structures

3

Update API Routes

Modify API routes to work with your updated models

4

Migrate Existing Data

Create migration scripts for existing data if needed

Advanced Customization

Custom Hooks

Create custom React hooks for reusable logic across components.

Middleware

Customize middleware for authentication, logging, or request processing.

Error Handling

Implement custom error handling and user feedback systems.

Performance Optimization

Add caching, lazy loading, and other performance optimizations.

Third-party Integrations

Integrate additional services like analytics, monitoring, or CRM systems.

Custom Workflows

Implement custom business logic and user workflows.

Next Steps

After customizing your boilerplate, explore these related areas:

Deployment

Deploy your customized application to production.

Troubleshooting

Common issues and solutions for customization problems.