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 FeatureIcons from "@/modules/shadcn/FeatureIcons";
import PricingTable from "@/modules/native/PricingTable";
import MyTeam from "@/modules/shadcn/MyTeam";
import FAQAccordion from "@/modules/shadcn/FAQAccordion";
import TypingCTA from "@/modules/native/TypingCTA";
import Footer from "@/modules/native/Footer";
import PayButton from "@/modules/native/PayButton";
import ScrollPrompt from "@/modules/native/ScrollPrompt";
import HeroConcert from "@/modules/native/HeroConcert";
import settings from "@/settings";
import { getJSONLD } from "@/utils/seo";
 
export default function Page() {
  return (
    <>
      {getJSONLD()}
      <Navbar
        accountDropdownButton={false}
      />
      <main>
        <div id="home">
          <HeroConcert
            CustomButton={<PayButton
                plan={settings.PLAN_DETAILS[0]}
                buttonTitle="Get StartupBolt"
                className="bg-primary text-primary-foreground text-lg font-bold py-3 px-8 rounded-md hover:bg-primary/90 transition duration-300 text-center self-center lg:self-start flex items-center justify-center"
              />}
          />
        </div>
        <TypingCTA />
        <FeatureIcons />
        <div id="team">
          <MyTeam
            sectionColors={{
              background: "bg-accent",
              foreground: "text-accent-foreground"
            }}
          />
        </div>
        <div id="pricing">
          <PricingTable
            planDetails={settings.PLAN_DETAILS.slice(0, 3)}
          />
        </div>
        <ScrollPrompt
          text={{
            description: "Do you have any questions?"
          }}
        />
        <FAQAccordion
        />
      </main>
      <Footer
        sectionColors={{
          background: "bg-accent",
          foreground: "text-accent-foreground"
        }}
      />
    </>
  );
}

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 FeatureTabs from "@/modules/native/FeatureTabs";
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}
        cta={false}
        darkModeButton={false}
      />
      <main>
        <HeroCarousel />
        <FeatureTabs />
        <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.

App Configuration in `settings.js`

The settings.js file, located at /settings.js is the central configuration file for your StartupBolt application. This file contains various settings that control different aspects of your app. It is important to update these configuration values as per your product or service.

APP

This is where you customize your application's basic information like name, URL, social profiles .etc

const APP = {
  name: "StartupBolt",
  short_name: "StartupBolt",
  description: "StartupBolt helps you create websites and launch your software as a service (SaaS) startups quickly",
  url: process.env.NEXT_PUBLIC_SITE_URL || "https://www.startupbolt.com",
  author: "startupbolt",
  twitterProfile: "@startup_bolt",
  keywords: [
    "website creation",
    "saas builder",
    "nextjs boilerplate",
    "stripe integration",
    "website builder",
    "online business"
  ],
};

name: The full name of your application.
short_name: A short version of your application name.
description: A concise description of the application.
url: Set the application URL. Make sure it aligns with your live site (with or without www).
author: Name of the project creator or organization.
twitterProfile: The official Twitter handle for the app.
keywords: List of keywords for SEO purposes. Add or modify them to target your audience.

Using Environment Variables

The site URL relies on environment variable. Make sure you define the environment variables in your .env.local file, this is especially important for sitemap. Ensure that the url aligns with the final destination after any redirects (e.g., with or without 'www'). This alignment helps Google and other search engines properly crawl and index your site.

Example:

NEXT_PUBLIC_SITE_URL=https://www.startupbolt.com

Configuring Website Icons in StartupBolt

StartupBolt makes it easy to manage and customize brand icons for your site. Learn more in the Configuring Website Icons in StartupBolt.

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 FeatureTabs from "@/modules/native/FeatureTabs";
import PricingTable from "@/modules/native/PricingTable";
import MyTeam_2 from "@/modules/native/MyTeam_2";
import FAQAccordion from "@/modules/shadcn/FAQAccordion";
import CTA from "@/modules/native/CTA";
import Footer from "@/modules/native/Footer";
import PayButton from "@/modules/native/PayButton";
import PromoBar from "@/modules/native/PromoBar";
import ScrollPrompt from "@/modules/native/ScrollPrompt";
import HeroSection from "@/modules/native/HeroSection";
import settings from "@/settings";
import { getJSONLD } from "@/utils/seo";
 
export default function Page() {
  return (
    <>
      {getJSONLD()}
      <PromoBar />
      <Navbar
        accountDropdownButton={false}
      />
      <main>
        <div id="home">
          <HeroSection
            CustomButton={<PayButton
                plan={settings.PLAN_DETAILS[0]}
                buttonTitle="Get StartupBolt"
                className="bg-primary text-primary-foreground text-lg font-bold py-3 px-8 rounded-md hover:bg-primary/90 transition duration-300 text-center self-center lg:self-start flex items-center justify-center"
              />}
          />
        </div>
        <CTA />
        <FeatureTabs />
        <div id="team">
          <MyTeam_2
            sectionColors={{
              background: "bg-accent",
              foreground: "text-accent-foreground"
            }}
          />
        </div>
        <div id="pricing">
          <PricingTable
            // This prop allows you to customize which pricing plans are displayed:
            // - By default, all plans defined in settings.js will be shown
            // - Using .slice(0, 3) here limits the display to the first 3 plans
            // - You can modify this to show different plans or a custom selection
            planDetails={settings.PLAN_DETAILS.slice(0, 3)}
          />
        </div>
        <ScrollPrompt
          text={{
            description: "Do you have any questions?"
          }}
        />
        <FAQAccordion
        />
      </main>
      <Footer
        sectionColors={{
          background: "bg-accent",
          foreground: "text-accent-foreground"
        }}
      />
    </>
  );
}

Conclusion

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. 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