Getting Started with ZapStart

Welcome to ZapStart! This documentation will take you from zero to having your SaaS up and running faster than you can say "venture capital." Let's get you set up so you can focus on what really matters – building something awesome.

ZapStart is designed to accelerate your SaaS development journey by providing a robust, production-ready foundation. You'll spend less time on boilerplate code and more time on your unique features.

If you don't have access to stripe or other payment gateways or if you want to setup a global company (US-based) to have access to Stripe and U.S. banking services or for legal protection, ZapStart Company-setup guide could be a good help for you.

Demo App

We will setup the configuration in order to build the first demo app that is ready for production. The demo app is a simple counter app that has two counters, a free counter and a pro counter. The free counter is for all users and the pro counter is for users who have a subscription. The pro counter is a paid feature and is not available for free users.

Project Structure

ZapStart uses a thoughtfully designed project structure that prioritizes developer experience, scalability, and clear separation of concerns. We've optimized for clarity and maintainability. We made sure the codebase is very well documented and easy to understand.

Frontend (Next.js App Router)

/appPages using Next.js App Router (main folder where all the pages are located)
/componentsReusable React components
/contextContext API for state management
/dataData folder, e.g. for the blogPosts
/libsUtility libraries (SEO handling, etc.)
/publicStatic assets and files

ZapStart Advantage:

Our frontend structure uses Next.js App Router for optimal performance with a flat component architecture that avoids deep nesting issues common in other boilerplates.

Backend (Express.js)

/src/controllersRequest handlers organized by domain
/src/routesAPI endpoint definitions
/src/middlewareRequest processing (auth, plan check, etc.)
/src/modelsDatabase schema definitions
/src/libsUtility libraries (email, payment, JWT, etc.)
app.jsMain application file

ZapStart Advantage:

Unlike competitors that mix business logic with route handlers or use complex inheritance patterns, our backend follows a clean service-oriented architecture for better testability and maintainability.

Why Next.js + Node.js instead of just Next.js?

The separation of Next.js for frontend and Node.js (Express.js) for backend creates an ideal architecture: Next.js delivers lightning-fast, SEO-optimized user interfaces with superior React rendering capabilities, while a dedicated Express backend provides robust API handling, better scalability for complex business logic, and a specialized middleware ecosystem. This clean separation allows each layer to be optimized independently, offering better performance and maintainability than trying to force Next.js to handle both concerns as Next.js is limited when it comes to backend functionality.

Additionally, Next.js's layers of abstraction can become problematic when integrating with third-party services like Figma plugins or implementing custom OAuth flows. The overabstraction in Next.js often creates a steeper learning curve with diminishing returns, whereas a dedicated Express backend provides straightforward, well-documented patterns that are easier to customize for specific integration needs.

Running Locally

Follow these steps to get ZapStart running on your local machine:

1. Clone the Repository or go to the github repo and choose your cloning method

git clone git@github.com:Mghrabi/ZapStart_JS.git [your-saas-name]

Then cd into the folder

2. Install Dependencies for Frontend, when you run the frontend and open the browser, you you will get an error for not being able to communicate with the backend, this is completely normal, ignore the error

cd frontend 
                            npm install 
                            npm run dev

The frontend is running on port 3001, so you can open the browser and go to http://localhost:3001 to see the frontend.

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 />
    </>
  );
}

3. Install Dependencies for Backend, but don't run it yet because we need to set up the environment variables first, otherwise you will get an error. You run the backend using this command npm run dev

cd backend 
                            npm install

3. Set Up Environment Variables

Copy the example environment files to create your own:

cd backend 
 mv .env.example .env

You'll need to fill in the environment variables for your backend. Check out the specific documentation for configurations setup as mentioned in the next steps.

4. Start Development Servers

Run both the frontend and backend development servers (if you already have your environment variables set up):

# In the backend directory
npm run dev

Your frontend will be available at http://localhost:3001 and your API at http://localhost:3000.

Next Steps

Now that you have ZapStart running locally, it's time to set up the essential services:

You're well on your way to launching your SaaS! Once you've configured these services, you'll have a fully functional application ready for customization.

Fill in the JWT keys
Set up your MongoDB database
Configure Google OAuth
Set up email services
Integrate payment processing
Fill in the config files