DevRocket
Tutorials

Ship in 5 Minutes

Welcome to the 5-minute tutorial! In this guide, we’ll help you build a beautiful landing page and optionally add a waitlist form to collect emails for your SaaS product.

Step 1: Clone the Repository and Run the Server

If you haven’t already, clone the boilerplate and run the frontend and backend servers locally. Follow the instructions in the Get Started guide.


Step 2: Update Your Landing Page

  1. Open the file located at /frontend/src/app/app.component.html.

  2. Replace its content with the following:

    <app-header></app-header>
    <main>
      <app-hero></app-hero>
      <app-problem></app-problem>
      <app-features></app-features>
      <app-pricing></app-pricing>
      <app-faq></app-faq>
      <app-cta></app-cta>
    </main>
    <app-footer></app-footer>
  3. Save the file. This sets up your landing page structure with the predefined components.


Step 3: Customize the Content

Each component file contains tips for writing compelling copy:

  • Header: Update your logo and navigation links.
  • Hero: Add a headline and a call-to-action.
  • Problem: Define the problem your SaaS solves.
  • Features: Highlight your product features.
  • Pricing: Include pricing tiers or subscription plans.
  • FAQ: Answer common questions.
  • CTA: Add a call-to-action to engage your users.

Step 4: Add a Waitlist Form (Optional)

To collect emails for a waitlist:

  1. Go to /backend/src/app/lead/lead.controller.ts and uncomment the API endpoint for saving emails:

    import { Body, Controller, Post } from '@nestjs/common';
     
    @Controller('leads')
    export class LeadsController {
      @Post()
      saveLead(@Body() lead: { email: string }) {
        // Save the email to your database
        return { success: true };
      }
    }
  2. In the frontend, update your call-to-action button in the Hero, Pricing, and CTA sections with the following:

    <button-lead></button-lead>

    For a full-width button in the Pricing section, use:

    <button-lead class="full-width"></button-lead>

Step 5: Deploy Your Application

It’s time to deploy your project! If you need assistance, check out our deployment guide for hosting your frontend and backend on platforms like Netlify, Vercel, or Heroku.

Congratulations! 🎉 Your SaaS is now ready to showcase to the world.

Finish this tutorial and let us know—we’ll feature your startup on our homepage ⭐️!

On this page