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
-
Open the file located at
/frontend/src/app/app.component.html. -
Replace its content with the following:
-
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:
-
Go to
/backend/src/app/lead/lead.controller.tsand uncomment the API endpoint for saving emails: -
In the frontend, update your call-to-action button in the Hero, Pricing, and CTA sections with the following:
For a full-width button in the Pricing section, use:
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 ⭐️!