Essential Configuration for StartupBolt

Overview

Great, now it's time to perform the essential configuration. Let's set up everything one by one to ensure your website is fully functional.

Customize the Homepage

To customize your homepage, navigate to the app > page.js file. Replace the existing code with the following:

import Navbar from "@/modules/native/Navbar";
import HeroSection from "@/modules/native/HeroSection";
import FeatureTabs from "@/modules/native/FeatureTabs";
import Testimonials from "@/modules/native/Testimonials";
import CTA from "@/modules/native/CTA";
import Footer from "@/modules/native/Footer";
import { getJSONLD } from "@/utils/seo";
 
export default function LandingPage1() {
  return (
    <>
      {getJSONLD()}
      <Navbar accountDropdownButton={true} />
      <main>
        <HeroSection />
        <FeatureTabs />
        <Testimonials />
        <CTA />
      </main>
      <Footer />
    </>
  );
}

Save the file and navigate to http://localhost:3000 (or the port your website is running on), and voilà! You'll see a beautifully designed landing page.

Now, try editing the code again with the following:

import Navbar from "@/modules/native/Navbar";
import HeroCarousel from "@/modules/shadcn/HeroCarousel";
import FeatureIcons from "@/modules/shadcn/FeatureIcons";
import PricingTable from "@/modules/native/PricingTable";
import FAQAccordion from "@/modules/shadcn/FAQAccordion";
import Footer from "@/modules/native/Footer";
import { getJSONLD } from "@/utils/seo";
 
export default function LandingPage2() {
  return (
    <>
      {getJSONLD()}
      <Navbar accountDropdownButton={true} />
      <main>
        <HeroCarousel />
        <FeatureIcons />
        <PricingTable />
        <FAQAccordion />
      </main>
      <Footer />
    </>
  );
}

Save and navigate to http://localhost:3000 (or the correct port), and you’ll see another landing page. It's as simple as that!

Database Setup

We need a database to manage customers, collect emails, authenticate users, and more. Our project will utilize Supabase, an open-source database provider that offers a full Postgres database, authentication, and various other features. Postgres is one of the world's most stable and advanced databases.

Set Up Supabase: Refer to the Supabase Setup Documentation to setup Supabase and add your Supabase keys to .env.local.
Configure Supabase: Follow the Supabase Configuration Guide to create tables, set up RPC functions, and configure triggers to handle payments and subscriptions.

Note: Currently, we support Supabase. If you would like us to support other databases like MongoDB, let us know, and we'll prioritize your request. We love hearing from you!

Authentication Setup

Authentication is the process of allowing users to sign in to your website. We currently support Google Sign-In and Magic Link Sign-In.

Google OAuth Setup: Refer to the Google OAuth Guide for detailed instructions.
Magic Link Setup: To set up Magic Link authentication, refer to the Magic Link Guide. Magic Links provide a convenient, passwordless login experience by sending a link to the user's email. This guide also covers how to use a custom SMTP provider like Resend (opens in a new tab).

If you need additional authentication providers like Facebook or others, let us know. We'll prioritize your request and deliver the necessary integrations quickly.

Here's the improved version of your "Protected Pages and Routes" section:

Protected Pages and Routes

Protected Pages: Learn how to set up protected pages, which are essential for granting users access to your product once they become paying customers. To access these pages, users must be signed in and have an active plan. Follow the guide here.
Protected Routes: Protecting API routes is crucial to ensure that only authenticated users can access certain API endpoints. Implement protected routes by following the guide here.

Styling Essentials

Tailwind CSS: StartupBolt uses Tailwind CSS for styling. Learn more in the Tailwind Documentation.
Theming with Shadcn: We use Shadcn (built on top of Tailwind CSS) for theming. Follow the Theming Guide to learn how to set up theme colors.
Dark Mode: Easily enable or disable dark mode by following the Dark Mode Setup Guide.
Fonts: StartupBolt's font system integrates Google Fonts seamlessly. Refer to the Fonts Guide for detailed instructions.
Icons: Managing icons is straightforward in StartupBolt. Learn how in the Icons Guide.

Creating Landing Pages

StartupBolt offers a variety of components, called modules, to build landing pages. We have two types of modules:

Native Modules: These are built without Shadcn. Learn how to use them in the Native Modules Usage Guide.
Shadcn Modules: These are built with Shadcn. Learn how to use them in the Shadcn Modules Usage Guide.

Here’s an example of how to use these modules to create a landing page:

import Navbar from "@/modules/native/Navbar";
import HeroSection from "@/modules/native/HeroSection";
import FeatureTabs from "@/modules/native/FeatureTabs";
import Testimonials from "@/modules/native/Testimonials";
import CTA from "@/modules/native/CTA";
import Footer from "@/modules/native/Footer";
import { getJSONLD } from "@/utils/seo";
 
export default function LandingPage1() {
  return (
    <>
      {getJSONLD()}
      <Navbar accountDropdownButton={true} />
      <main>
        <HeroSection />
        <FeatureTabs />
        <Testimonials />
        <CTA />
      </main>
      <Footer />
    </>
  );
}

Payment Integration

We currently support two payment gateways: Stripe and LemonSqueezy.

Stripe Integration: Follow the Stripe Integration Guide to integrate Stripe. Add your Stripe keys to .env.local.
LemonSqueezy Integration: Follow the LemonSqueezy Integration Guide to integrate LemonSqueezy. Add your LemonSqueezy keys to .env.local.

Additionally, check out how the credit system works—a powerful feature that provides access to products for paying customers. It's versatile enough to handle simple and complex scenarios, such as reducing credits on usage or adding credits on payment. Refer to the Credits Guide for more details.

You can also learn how to add coupon codes by visiting the Coupons Guide.

Once you've completed the steps above, your website will be highly functional. If you wish to add more advanced features, head over to the Advanced Features Guide.

Conclusion

By following this guide, you've set up a robust and functional website with StartupBolt. Continue exploring the documentation to further customize and enhance your site. If you need additional features or support, don’t hesitate to contact us!

Happy building with StartupBolt!

Quick Start Advanced Features