Features

Explore all the features included in CodeBaseHub starter kit

Configuration System

Centralized configuration file at packages/config/index.ts to control all app settings:

packages/config/index.ts

export const appConfig: AppConfig = {
  appName: "Your App Name",
  description: "A Full-stack starter kit for building web and mobile app",
  author: "Your Name",
  emailFrom: "hi@codebasehub.pro",

  legal: {
    termsUrl: "https://codebasehub.pro/terms",
    privacyUrl: "https://codebasehub.pro/privacy",
  },

  i18n: {
    default: "en",
    locales: {
      en: "English",
      tr: "Türkçe",
      ar: "العربية",
    },
  },

  platforms: {
    web: {
      auth: { allowSignup: true, google: false, apple: false },
      theme: "system",
    },
    mobile: {
      auth: { allowSignup: true, google: false, apple: false },
      theme: "system",
      features: { onboarding: true, userInfo: true },
      integrations: {
        appsFlyer: true,
        oneSignal: true,
        postHog: true,
        revenueCat: true,
      },
    },
  },
};

Internationalization (i18n)

Built-in support for multiple languages with next-intl, making it easy to reach a global audience.

Globe

Multi-language Support

English, Turkish, and Arabic with easy expansion to more languages.

Code

RTL Support

Automatic right-to-left layout for Arabic and other RTL languages.

FileCode

Type-safe Translations

Fully typed translations with TypeScript autocomplete.

Usage Example

components/welcome.tsx

import { useTranslations } from 'next-intl';

export function MyComponent() {
  const t = useTranslations('common');
  return (
    <div>
      <h1>{t('welcome.title')}</h1>
      <p>{t('welcome.description')}</p>
    </div>
  );
}

app/[locale]/page.tsx

import { getTranslations } from 'next-intl/server';

export default async function Page() {
  const t = await getTranslations('common');

  return <h1>{t('welcome.title')}</h1>;
}

components/language-switcher.tsx

import { useLocale } from 'next-intl';
import { useRouter } from 'next/navigation';

export function LanguageSwitcher() {
  const locale = useLocale();
  const router = useRouter();

  const changeLanguage = (newLocale: string) => {
    router.push(`/${newLocale}`);
  };

  return (
    <select value={locale} onChange={(e) => changeLanguage(e.target.value)}>
      <option value="en">English</option>
      <option value="tr">Türkçe</option>
      <option value="ar">العربية</option>
    </select>
  );
}

Platform-Specific Configuration

Configure features separately for Web and Mobile platforms:

Web Configuration

platforms: {
  web: {
    auth: {
      allowSignup: true,
      google: false,
      apple: false,
    },
    theme: "system",
  },
}

Control user registration
Configure OAuth providers
Set theme preference

Mobile Configuration

platforms: {
  mobile: {
    auth: {
      allowSignup: true,
      google: false,
      apple: false,
    },
    theme: "system",
    features: {
      onboarding: true,
      userInfo: true,
    },
    integrations: {
      appsFlyer: true,
      oneSignal: true,
      postHog: true,
      revenueCat: true,
    },
  },
}

Authentication settings
Feature toggles
Analytics integrations

Mobile Features & Integrations

Enable or disable features and third-party integrations with simple configuration toggles:

Rocket

Onboarding

Welcome screens and user setup flow.

User

User Info

User profile and information management.

Activity

AppsFLyer

Mobile attribution and analytics.

Bell

OneSignal

Push notifications and messaging.

BarChart3

PostHog

Product analytics and feature flags.

CreditCard

RevenueCat

In-app subscriptions and monetization.

Theme System

Beautiful dark mode support with automatic system preference detection.

Toggle themes easily in your components:

components/theme-toggle.tsx

import { useTheme } from "next-themes";

export function ThemeToggle() {
  const { theme, setTheme } = useTheme();

  return (
    <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
      {theme === "dark" ? "🌙" : "☀️"}
    </button>
  );
}

User Interface

Modern, accessible UI components built with shadcn/ui and Tailwind CSS.

Database & ORM

PostgreSQL database with Drizzle ORM for type-safe database queries.

Define Schema

apps/server/src/db/schema/index.ts

import { pgTable, text, timestamp, uuid } from "drizzle-orm/pg-core";

export const users = pgTable("users", {
  id: uuid("id").defaultRandom().primaryKey(),
  email: text("email").notNull().unique(),
  name: text("name").notNull(),
  createdAt: timestamp("created_at").defaultNow().notNull(),
});

Query Data

apps/server/src/lib/queries.ts

import { db } from "@/db";
import { users } from "@/db/schema";
import { eq } from "drizzle-orm";

const user = await db.query.users.findFirst({
  where: eq(users.email, "user@example.com"),
});

Run Migrations

# Push schema to database
pnpm db:push

# Generate types
pnpm db:generate

Additional Features

Blocks

Dashboard

Full-featured admin panel with user management.

BookOpen

Documentation

Built-in documentation system powered by Fumadocs.

Zap

Code Quality

Biome, TypeScript configured for consistent code style.

Box

Monorepo

Organized workspace with Turborepo for efficient builds.

Smartphone

Desktop App

Build native desktop apps with Tauri integration.

Mobile

Mobile App

React Native app with Expo for iOS and Android.

All features are production-ready and follow industry best practices. Customize them using the centralized config file.

Was this page helpful?