Tips

Usage

The FeatureListicle component presents a tabbed interface to showcase various features of your product or service. It offers an interactive way to display feature lists with associated icons, descriptions, and integration information.

Feature Listicle

Launch Express Docs

Welcome to the Launch Express Boilerplate documentation

Introduction

Quickstart

Learn how to set up the theme for your project

Theme Setup

The configuration of your project is essential to ensure that everything works as expected. This guide will help you set up your project correctly.

Configuration

Deploying your project to production is a crucial step in the development process. This guide will walk you through the steps to deploy your project.

Deployment

To create a landing page for your SaaS project, open the `app/page.tsx` file and replace the content with the following code:

SaaS in 5 minutes

Pre-sale Quickstart

Waitlist Quickstart

The affiliate system integration allows you to easily set up and manage Lemon Squeezy affiliate tracking in your application. This documentation covers the setup and configuration process.

Affiliate Programm

I mentioned my top choices for analytics tools (Pirsch & Plausible), but feel free to integrate any other tool you prefer and place it in the `<head>` of the `layout.tsx` file.

Analytics

Launch Express uses [NextAuth.js v5](https://authjs.dev/) for authentication. The configuration is done in the `config/auth.js` file.

Authentication

The blog system uses MDX files for content and JSON files for author and category information. This documentation covers the structure, configuration, and implementation details of the blogging system.

Blog

Provide support to your customers with chat bot integrations.

Customer Support

Launch Express comes with built-in support for dark mode, allowing you to create a visually appealing and accessible user interface that adapts to user preferences and system settings.

Dark Mode

Launch Express uses Prisma ORM to interact with the database. Prisma is a modern database toolkit that makes it easy to interact with databases in Node.js and TypeScript.

Database

React Email provides a set of pre-built email templates that you can use to get started quickly. These templates are built using React and are fully customizable.

Email Templates

Error pages are crucial for providing a good user experience when things go wrong. This guide covers how to customize and implement error pages in your Next.js application.

Error pages

Framer Motion provides a simple yet powerful API for creating animations in React applications. Launch Express extends this functionality with a custom `Animated` component, making it even easier to add animations to your project.

Framer Motion

Launch Express uses the React-Icons package to provide a wide variety of scalable vector icons that can be easily customized and used throughout your application.

Icons

Launch Express provides in the Extended Project prompts to generate Privacy Policy and Terms of Service texts for your site, ensuring transparency and compliance with legal requirements.

Privacy Policy & Terms of Service with ChatGPT

Launch Express uses Next Auth v5(AuthJS) to secure private pages and API routes, ensuring that only authenticated users can access certain parts of your application. This guide will walk you through the process of creating and managing private content in your Launch Express project.

Private Pages and API Routes

Launch Express comes with built-in SEO capabilities, leveraging Next.js 13's powerful metadata API. This guide will help you understand and utilize the SEO features in your Launch Express project.

Search Engine Optimization (SEO)

Launch Express integrates Shadcn, a collection of beautifully designed, accessible, and customizable React components, to provide a robust and flexible UI system for your NextJS application.

Shadcn UI

Show a menu button for the authenticated users

Account menu

The Animated component is a versatile wrapper that adds animations to its children elements. It leverages Framer Motion to provide smooth, customizable animations for enhancing user interface interactions.

Animated

The Authentication Button component provides a dynamic button for handling user authentication actions. It adapts its behavior and appearance based on the current authentication status and type of action required.

Authentication Button

The Big Icon component is designed to display a large icon prominently on your website.  It accepts an `icon` as a string or a Component like a Icon.

Big Icon

This component opens a checkout session for Stripe or Lemonsqueezy. It can be used to initiate a payment or subscription process for your application.

Checkout Button

The CTA (Call to Action) component is designed to create an engaging section that encourages users to take a specific action. It features animated elements, customizable buttons, and highlighted benefits.

The Dark Mode Toggle component provides an easy-to-use button for switching between light and dark themes in your application. It uses the next-themes library for theme management and displays appropriate icons based on the current theme.

Dark mode toggle

The FAQ component is designed to display a list of frequently asked questions and answers in an interactive accordion format. It provides an animated, expandable interface for users to easily access information.

The Feature component is designed to showcase a list of product features in an visually appealing and responsive layout. Each feature is presented with an icon, title, subtitle, description, and an accompanying image or video.

Feature

The FeatureAccordion component presents a list of product features in an interactive, accordion-style layout. It combines text descriptions with images or videos, adapting to different screen sizes for optimal user experience.

Feature Accordion

Footer

Header

The Hero component is designed to create an impactful and visually appealing introduction section for your website. It includes a headline, subheadline, call-to-action buttons, an optional testimonial, and a featured image.

Hero

The LogoCloud component displays a marquee of logos, typically used to showcase client or partner companies. It features smooth animation and customizable behavior.

Logo Cloud

The Sidebar component provides a responsive navigation menu for your application, with support for both desktop and mobile views. It displays a list of navigation items and adapts to different screen sizes.

Sidebar

The Stats component displays a set of key statistics in a visually appealing grid layout. It includes animated entrances for each statistic and supports both light and dark modes.

Stats

The SupportButton component provides a customizable button that, when clicked, opens a support channel based on the configured support service or defaults to opening an email client.

Support Button

The Testimonial Grid component displays a collection of customer testimonials in a responsive grid layout. It showcases customer quotes, names, companies, and profile pictures, with optional social media links.

Testimonial Grid

The TestimonialSingle component displays a featured customer testimonial with a star rating, quote, customer image, name, and title. It includes animated elements and decorative quote icons.

Testimonial Single

A small testimonial section showcasing 5 customer photos with their ratings. The count of customers who rated the product is animated.

Testimonial Small

The Video component displays a video thumbnail with a play button, which opens a modal dialog to play the video. It supports YouTube, Vimeo, and custom video sources.

Video

The Waitlist component provides a visually appealing and interactive form for users to join a waitlist. It includes email validation, submission handling, and animated elements.

Waitlist

Launch Express comes with built-in font optimization and supports both Google Fonts and custom fonts through Next.js´s powerful font system. The font configuration is managed in `/src/app/layout.tsx.`

Fonts

Learn how to add a logo and favicon to your website.

Logo & Favicon

The Launch Express project implements rate limiting using the @upstash/ratelimit package in combination with @vercel/kv for storage. This provides a robust and scalable solution for protecting your API endpoints from abuse.

Rate Limiting

This documentation explains the automatic sitemap generation setup using next-sitemap in your Next.js project. The sitemap is generated automatically during the build process, ensuring search engines can efficiently crawl and index your website.

Sitemap

Learn about the User Management API endpoints for Launch Express

Get all user profiles in the database with their details. This endpoint is only accessible to admin users.

Get All User Profiles

Retrieve the profile of the authenticated user

Get Own Profile

Update the profile of the authenticated user

Update Own Profile

Get Specific User Profile

Changelog

Affiliate Program

API Reference

Stop Wasting Time

Contact

Launch Express offers seamless integration with Hugging Face, enabling you to harness state-of-the-art AI models in your NextJS application. This guide will walk you through the process of setting up and using Hugging Face in your project.

Huggingface

Launch Express provides seamless integration with LangChain, allowing you to build powerful language model applications in your NextJS project. This guide will walk you through the process of setting up and using LangChain in your application.

Langchain

Launch Express provides seamless integration with Pinecone, enabling you to leverage vector database capabilities for efficient similarity search and AI-powered applications. This guide will walk you through the process of setting up and using Pinecone in your project.

Pinecone

Launch Express provides seamless integration with Replicate AI, allowing you to leverage powerful AI models in your NextJS application. This guide will walk you through the process of setting up and using Replicate AI in your project.

Replicate

Launch Express provides seamless integration with the Vercel AI SDK, allowing you to easily incorporate various AI models into your NextJS application. This guide will walk you through the process of setting up and using the Vercel AI SDK in your project.

Vercel AI SDK

The one-time pricing configuration allows you to set up and manage one-time payment plans for your application. This configuration is defined in the one-time-pricing.ts file and can be utilized through the OnetimePricing component.

One Time Purchase

The Subscription pricing configuration allows you to set up and manage recurring payment plans for your application. This configuration is defined in the subscription-pricing.ts file and can be utilized through the SubscriptionPricing component.

Subscriptions

Learn how to test the payment flow in your application.

Testing Payments

Learn how to set up a payment provider to receive payment informations for your products.

Webhook Setup

The One-time Pricing component is designed to display a one-time pricing plan on your website.

One-time Pricing

The Subscription Pricing component is designed to display a subscription pricing plan on your website.

Get Started

Tutorial

Features

Components

Useful Resources

Feature Listicle

Usage

Tips

Get Started

Tutorial

Features

Components

Useful Resources

​Usage

​Tips

Usage

Tips