Essential Configuration for StartupBolt

Overview

This guide walks you through the most important setup steps required to get your StartupBolt website up and running. From authentication to theming, and from dashboards to landing page customization, this document ensures you have all the foundational pieces in place.

Authentication Setup

Authentication allows users to securely sign in to your website. StartupBolt supports Google Sign-In and Magic Link Sign-In out of the box.

Google OAuth Setup: Follow 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.

Admin Dashboard

The StartupBolt Admin Dashboard provides a centralized interface to manage customers, settings, blogs, plugins, and more. It streamlines administrative tasks, giving you full control over your platform.

For setup instructions, visit the Admin Dashboard Guide.

Customer Dashboard

The Customer Dashboard is designed specifically for your customers — i.e., paid users. It provides a solid starting point for building a personalized, logged-in experience tailored to those who have purchased your product or subscription.

Refer to the Customer Dashboard Guide to learn more.

Blog Dashboard

StartupBolt comes with a built-in blog system, including a dashboard to manage posts, authors, categories and more.

Refer to the Blog Dashboard Guide to learn more.

Customize the Homepage

To customize your homepage, open app > page.js and replace the existing code with this layout:

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}
        navigation={[
          { name: 'Home', href: '/' },
          { name: 'Docs', href: '/docs' },
          { name: 'Pricing', href: '#pricing' },
        ]}
      />
      <main>
        <div id="home">
          <HeroCarousel />
        </div>
        <FeatureTabs />
        <div id="pricing">
          <PricingTable />
        </div>
        <FAQAccordion />
      </main>
      <Footer />
    </>
  );
}

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

Feel free to revert the changes if you want to go back to any of the previous landing pages.

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 section allows you to customize your application's basic information such as name, URL, and social profiles.

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"
  ],
};

Here are the fields:

name: The full name of your application.
short_name: A shortened version of your application's name.
description: A concise summary of your application.
url: The application URL. Ensure it matches your live site (with or without www).
author: The name of the project creator or organization.
twitterProfile: The official Twitter handle for your app.
keywords: A list of SEO keywords. Customize this list to better target your audience.

The APP.url value relies on the environment variable NEXT_PUBLIC_SITE_URL. Make sure to define this variable in your .env.local file — this is especially important for your sitemap and proper indexing.
Ensure the URL matches the final destination after any redirects (e.g., with or without www). Proper alignment helps Google and other search engines crawl and index your site accurately.

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!

Manual Setup Advanced Features