Logo
Get Started

Web Module Guide

Deploy modern SaaS features (Blog, SEO, Payments) faster than ever.

The Web Starter Kit (apps/web-starter) gathers all the essential components for a classic SaaS business model (Marketing, Blog, Dashboard) under one roof. In this guide, you will learn how to commercialize the system and leverage the advanced features offered by the Empire package.

Landing Page Module

A professional first impression directly impacts conversion rates. RapidCore allows you to set up high-performance landing pages in 10 minutes using ready-made UI blocks.

Ready-Made Components

  • Hero: Attention-grabbing headlines and CTA (Call to Action) areas.
  • Features: A grid layout listing features with icons and descriptions.
  • Pricing: Sleek, dynamic pricing tables.
  • FAQ: An accordion-style section for frequently asked questions.

Faster Customization with Tailwind v4

Use Tailwind v4 variables in packages/ui/src/globals.css to customize your theme. For example, you can change your primary neon color like this:

@theme {
  --color-brand: #a855f7; /* Vibrant Purple */
  --color-brand-muted: rgba(168, 85, 247, 0.1);
}
Business Tip

To run "A/B Tests" on your landing page, try different CTA button colors and headlines. RapidCore components are supported by micro-animations via framer-motion, directing users straight to the action.

Payment and Subscription Strategies

RapidCore features a hybrid payment architecture that supports both one-time sales and recurring revenue models.

One-Time Payment vs. Subscription

  • Starter Package: Uses a "Pay-per-use" or one-time payment model for small tools or digital products.
  • Pro Package: Activates the monthly/yearly subscription model to generate recurring revenue.

Stripe Customer Portal Setup

Use the Stripe Customer Portal to allow users to upgrade or cancel their own plans:

  1. Configure the portal in Stripe Dashboard > Settings > Billing > Customer Portal.
  2. Update the redirect link in apps/web-starter/src/actions/billing.ts with your key.

Newsletter and Marketing

An integrated newsletter system is vital for maintaining a connection with your user base.

  • Infrastructure: The Pro package comes with Resend or Mailgun integration for newsletter distribution.
  • Lead Magnet: You can start collecting emails by adding the NewsletterForm component anywhere on your landing page:
// Homepage integration
<NewsletterForm 
  title="Don't Miss Exclusive Updates" 
  buttonText="Subscribe Now" 
/>
Conversion Focus

By sending an automated "Welcome Email" to registered users, you can increase the first-day retention rate by up to 30%.

Marketplace and Affiliate (Empire Exclusive)

The Empire package offers tools to transform your SaaS into a massive ecosystem.

Affiliate Panel

A dashboard where users can create their own referral links and earn commissions per sale. The cookie-based tracking system follows users arriving via referral links for 30 days.

Marketplace Payout Schema

In the marketplace model, the earnings split between sellers and the platform works as follows:

graph LR
    A[Customer Payment] --> B{Stripe Split};
    B --> C[Seller 80%];
    B --> D[Platform Commission 20%];
    D --> E[System Pool];

Technical Configuration

Critical environment variables required to activate all Web module functions:

# apps/web-starter/.env
STRIPE_SECRET_KEY="sk_live_..."
STRIPE_WEBHOOK_SECRET="whsec_..." # Critical for payment confirmations
RESEND_API_KEY="re_..." # For newsletter distribution
SANITY_PROJECT_ID="..." # Headless CMS connection

Headless CMS Connection

To manage your blog content via Sanity or Strapi, configure the API client as follows:

const client = createClient({
  projectId: process.env.SANITY_PROJECT_ID,
  dataset: "production",
  useCdn: true,
});
Educational Note

For security, ensure that the STRIPE_WEBHOOK_SECRET variable is stored only on the server-side. This variable verifies data from Stripe to prevent payment fraud.