✨ Build Your Startup

Introduction

Congratulations! You've reached the final stage of your ZapStart journey. You now have a production-ready codebase that would typically take months to develop from scratch. This guide will help you verify that everything is working correctly, make any final adjustments, and then shift your focus to what really matters—building your actual business.

Prerequisites

Before proceeding, ensure you've completed all the configuration steps:

Run Frontend

Let's run our Frontend, cd frontend and run npm install to install the dependencies then run npm run dev to start the development server, if you get an issue error about user refresh token, it's a normal issue, you can ignore it, it won't affect the app or shown to users.

Open your browser and go to http://localhost:3001 to see the app.

Go to your frontend/app/page.js and paste the following code:

import { Suspense } from 'react'
import Header from "@/components/Header";
import Hero from "@/components/Hero";
import PricingSection from "@/components/PricingSection";
import FAQ from "@/components/FAQ";
import Footer from "@/components/Footer";
import TestimonialsMarquee from "@/components/TestimonialsMarquee";
import FeaturesDetailsAccordion from "@/components/FeaturesDetailsAccordion";
import CallToAction from "@/components/CallToAction";
import { createMetadata } from '@/libs/seo/metadata';
import TutorialSection from "@/components/TutorialSection";

export const metadata = createMetadata({
  canonicalPathRelative: '/',
});

export default function Home() {
  return (
    <>
      <Suspense>
        <Header />
      </Suspense>
      <main className="overflow-hidden ">
        <Hero />
        <TutorialSection />
        <FeaturesDetailsAccordion />
        <PricingSection />
        <TestimonialsMarquee />
        <CallToAction />
        <FAQ />
      </main>
      <Footer />
    </>
  );
}
     

Run Backend

Let's run our Backend, cd backend and run npm install to install the dependencies then run npm run dev to start the development server.

You should see the following logs if everything is setup correctly:Server running on port 3000 in development mode

Run Stripe Listen

Let's run stripe cli to listen to the webhooks, run stripe listen --forward-to localhost:3000/api/subscription/webhook to start the stripe listen.

leave this terminal always running when working locally.This is necessary for the webhooks to be received.

Send Emails Upon Purchase

Uncomment the sendEmail function in subscriptionController.js to send emails upon purchase.

This is useful if you want to send emails to your users upon purchase, customize the email if necessary.

Testing Counter App

Let's say that you're interested in the free counter first and want to test the product, go to the pricing section below and click on Start for Free button for the free plan.

You should be redirected to the login page (if you are not already logged in, otherwise your free plan will be activated once your click on the Start for Free button), login with the email (the email should be one of the test emails in google oauth), once you're logged in you should be redirected to the dashboard with pricing plans shown to you to choose from.

Click on the Start for Free button for the free plan and you should be redirected to the dashboard with the free counter working.

Testing Payment Processing

Stripe integration is critical for your SaaS business. Here's how to thoroughly test it:

Click on your profile icon and click on the Manage Subscription button, you should go to the customer portal where you can manage your subscription. From there you can cancel your subscription, update your payment method, and more.

It's Time to Build Your Startup

Now that you understand the fundamentals of ZapStart, it's time to start building your own product. The codebase includes a comprehensive set of pre-built components that you can use to quickly create a professional-looking application:

• Follow the Components Documentation: Browse through the components section to see all available UI elements you can use to build your landing page and application.
• Read Component Source Files: Each component file contains detailed comments and instructions on how to implement it effectively. These insights will help you adapt them to your specific needs.
• Explore Other Tutorials: Check out additional tutorials on SEO optimization, user authentication, and more to enhance your application's functionality.
• Study the Codebase: The entire ZapStart codebase is thoroughly documented with comments explaining what each part does, making it easier to understand and modify according to your requirements.

Focus on Your Business

With your technical foundation solidly in place, it's time to shift your focus to building your business: