# What is Fast Phoenix?

Fast Phoenix is the ultimate starting point for your Phoenix projects. It is built with a singular goal: to save you time and effort while ensuring your application is crafted with best practices. Here's why Fast Phoenix is the right choice:

* **Speed up Development**: Get up and running in minutes with a pre-configured, production-ready boilerplate tailored for the Phoenix framework. Skip the repetitive setup and dive straight into building features.
* **Proven Architecture**: Fast Phoenix leverages real-world production patterns and best practices, ensuring your application is robust and scalable from day one.
* **Out-of-the-box Features**: Includes essential integrations like authentication organizations, Mailgun, role management, and Stripe, so you can launch faster without reinventing the wheel.
* **Flexibility and Customization**: Designed to be developer-friendly, Fast Phoenix lets you easily extend or adapt the boilerplate to your specific needs.
* **Community-Driven**: Built by developers for developers, Fast Phoenix evolves with input from its growing community, ensuring it stays up-to-date with the latest trends and challenges.

Make your next project a success with Fast Phoenix—a boilerplate designed to help you deliver exceptional applications faster.

### Jump right in

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Getting Started</strong></td><td>Create your first site</td><td></td><td></td><td><a href="/pages/CyH2xJQs9yWJ1S8BYNav">/pages/CyH2xJQs9yWJ1S8BYNav</a></td></tr><tr><td><strong>Features</strong></td><td>What Fast Phoenix offers.</td><td></td><td></td><td><a href="/pages/7aUFmnCMx9m4smGncsXL">/pages/7aUFmnCMx9m4smGncsXL</a></td></tr><tr><td><strong>Publish your docs</strong></td><td>Share your docs online</td><td></td><td></td><td><a href="/pages/JjjojIyKxaiBPzzLwvtg">/pages/JjjojIyKxaiBPzzLwvtg</a></td></tr></tbody></table>


# Main Features

Fast Phoenix is designed to supercharge your Phoenix development with a wealth of prebuilt features and integrations, allowing you to focus on building your unique product.

Fast Phoenix is designed to supercharge your Phoenix development with a wealth of prebuilt features and integrations, allowing you to focus on building your unique product. Here’s what makes it an unbeatable choice:

**Prebuilt Integrations**

* **Stripe Integration**: Seamlessly handle subscriptions, tiered pricing, and payment portals.
* **Mailgun Integration**: Effortlessly manage email sending for transactional and marketing campaigns.

**Powerful Organization Management**

* **User Invites and Seat Limits**: Enforce subscription-based seat limits for organizations.
* **Real-Time Updates with PubSub**: Keep all users in an organization synchronized instantly.

***

**Customizable Email System**

* **Premade Beautiful Email Templates**: Stunning, ready-to-use email templates for all communication needs.
* **Dynamic Email Creation**: Create new email templates directly on the live website without writing a single line of code. Templates are stored in the database for easy reuse.

***

**Comprehensive Admin Tools**

* **Admin Dashboard**:
  * Monitor application performance with Telemetry.
  * Manage users with advanced lookup and editing tools.
  * View and create email templates with ease.
  * Launch bulk email campaigns with user-type-specific filters.

***

**Built-in UI Features**

* **Landing Page**: A polished, ready-to-use landing page to get your project started.
* **User Dashboard with Sidebar Navigation**: A modern, intuitive dashboard to enhance user experience.
* **User Notifications and Invites**: Keep users engaged and informed with built-in notifications.

***

**Streamlined User Onboarding and Account Creation**

* **Account Creation Without Sign-Up**: Create user accounts for customers who purchase a package, skipping the need for traditional sign-up.
* **Guided Onboarding**: Help users get started with tailored onboarding flows.

***

**Organization PubSub**

* Real-time updates across an organization for enhanced collaboration and user interaction.

***

**Visual Appeal and Theming**

* **32 Built-in Themes**: Choose from a wide range of themes that ensure flawless content display.

***

**Optimized for Success**

* **SEO Setup**: Built-in configurations to help your site rank higher on search engines.
* **Prebuilt Components**: Reusable components that save you time while adhering to best practices.

***

Fast Phoenix combines powerful features with developer-friendly tools, so you can launch faster, scale smarter, and build better. 🚀


# Changelog

## v1.0.5 - 01/02/2025

* Minor bug fixes & ENV fix&#x20;

## v1.0.4 - 05/01/2025

* Removed profile dropdown from auth navbar for responsiveness.

## v1.0.3 - 02/01/2025

* Simplified .env setup to envs/.env.prod & envs/.env.dev ( Works in production for .env.prod ) No longer need to add to fly secrets.

## v1.0.2 - 01/01/2025

* Added Non organization version for download.
* Simplified logo locations
* Added Prod .env variables to runtime.ex for non-sensitive variables.

## v1.0.1 - 15/12/2024

* Added SiteMapController.ex for SEO Crawlers & Updated robots.txt
* Fixed duplicate title & description tags for pages.
* Added canonical host support in endpoint.ex & config.ex


# Quickstart

Getting started with Fast Phoenix is as easy as 1, 2, 3! Follow these three steps to kick off your next Phoenix project:

### Let's get started!

1. **Purchase and Download**\
   Purchase the Fast Phoenix template and download the provided ZIP file to your local machine.
2. **Extract the Template**\
   Unzip the downloaded file to your desired project directory.
3. **Install Dependencies & setup**\
   Open your terminal, navigate to the project directory, and run:

```elixir
mix deps.get
docker run --name phx_saas_db -p 5432:5432 -e POSTGRES_USER=phxsaas -e POSTGRES_PASSWORD=phxsaas -e POSTGRES_DB=phx_saas_db -d postgres
mix ecto.setup
cd assets
npm install
cd ..
mix phx.server
```

Fast Phoenix has streamlined the setup process, so you can focus on what matters—building your application. 🚀

### Setup

Fast Phoenix includes an `.env` file to streamline your configuration for development. This file stores critical environment variables for services like Stripe, Mailgun, and project-specific constants.

### Configure Development Environment Variables

Located in envs/ directory, You'll find an`.env.dev` file. These files contain predefined variables for development environments.

Open `.env.dev` and in a text editor, and replace the placeholder values with your own details. Here's what you'll need to customize:

```
SAAS_NAME=FastPhoenix
DOMAIN=your-domain.com 
EMAIL=your-email@example.com 
LOGO_LOCATION="your-logo-url"

# Stripe Configuration
STRIPE_API_KEY=your-stripe-api-key
STRIPE_SIGNING_SECRET=your-signing-secret
STRIPE_API_BASE_URL=http://localhost:4000
STRIPE_PRO_PRICE_ID=your-pro-price-id
STRIPE_PRO_PRICE=30
STRIPE_ENTERPRISE_PRICE_ID=your-enterprise-price-id
STRIPE_ENTERPRISE_PRICE=100
STRIPE_PORTAL_ID=your-portal-id

# Mailgun Configuration
MAILGUN_API_KEY=your-mailgun-api-key
MAILGUN_DOMAIN=your-mailgun-domain

```

You’re all set! With the `.env` files configured, Fast Phoenix is ready to handle your environment-specific settings for development seamlessly.


# Go Live!

## A few things before you go live:

### Launching to fly.io:

Fly seems to be the easiest and cheapest option for phoenix apps, so that's what we'll use for our guide.

If you haven't already, download the [Fly.io CLI](https://fly.io/docs/getting-started/installing-flyctl). Then you will need to [register or sign in](https://fly.io/docs/getting-started/log-in-to-fly/).

Create a new project by running this command:

```
flyctl launch
```

Follow the steps in the CLI, usually the default setup it best, unless you want to change the name of the project.

At this point, it will try to generate and deploy the app, but may fail. We need to make some changes for the launch to succeed. Run this command and follow the next steps.

```elixir
mix phx.gen.release --docker
```

### Add NPM &  Nodejs for js package DaisyUI to Dockerfile:

Add this code after the install build dependencies command, and above the **WORKDIR /app** command.

```docker
# Install Node.js and npm
RUN apt-get update -y && \
    apt-get install -y curl gnupg && \
    curl -fsSL https://deb.nodesource.com/gpgkey/nodesource.gpg.key | gpg --dearmor -o /usr/share/keyrings/nodesource.gpg && \
    echo "deb [signed-by=/usr/share/keyrings/nodesource.gpg] https://deb.nodesource.com/node_16.x bullseye main" > /etc/apt/sources.list.d/nodesource.list && \
    apt-get update -y && \
    apt-get install -y nodejs

```

Then add this below the **COPY assets assets** command:

```dockerfile
RUN npm install --prefix assets/
```

Then below this line:&#x20;

```dockerfile
COPY --from=builder --chown=nobody:root /app/_build/${MIX_ENV}/rel/phx_saas ./
```

&#x20;**Copy the following:**&#x20;

```dockerfile
# Install dos2unix to fix CRLF line endings
RUN apt-get update && apt-get install -y dos2unix

# Convert all .sh files to use LF line endings
RUN find /app -type f -name "*.sh" -exec dos2unix {} +

# Ensure /app/bin/migrate and other scripts are executable
RUN chmod +x /app/bin/migrate
```

This is to ensure proper line endings. (We have run into deployment problems many times due to this)

### Re-deploy App:

Run the command below to successfully deploy your new app.

```
flyctl deploy
```

### Add your production .env variables to envs/.env.prod

Change your Canonical url to your host domain eg. "domain.com" in config.ex & root.html.heex.

And you're set!&#x20;


# Stripe

## Stripe Setup Tutorial

Fast Phoenix integrates seamlessly with Stripe to handle subscriptions and payments. Follow these steps to configure Stripe for your project.

***

**Step 1: Prepare Your Environment Variables**

Fast Phoenix uses environment variables to manage Stripe configuration. Open your `.env` file and ensure the following variables are set:

```
# Stripe API Configuration
STRIPE_API_KEY=sk_test_your_stripe_api_key
STRIPE_SIGNING_SECRET=your_signing_secret
STRIPE_API_BASE_URL=http://localhost:4000

# Product and Pricing IDs
STRIPE_PRO_PRICE_ID=price_pro_id
STRIPE_PRO_PRICE=30
STRIPE_ENTERPRISE_PRICE_ID=price_enterprise_id
STRIPE_ENTERPRISE_PRICE=100

STRIPE_PORTAL_ID=portal_test_id
```

Replace the placeholder values with your actual Stripe credentials and product/pricing details.

***

**Step 2: Create Products and Prices in Stripe**

1. **Log in to Stripe Dashboard**\
   Access your [Stripe Dashboard](https://dashboard.stripe.com/).
2. **Create Two Products**
   * **Pro Plan**
     * Name: Pro
     * Price: $30
     * Billing: Monthly
   * **Enterprise Plan**
     * Name: Enterprise
     * Price: $100
     * Billing: Monthly
3. **Copy Product Price IDs**\
   After creating the products, navigate to the pricing details and copy the *Price IDs* for each product. Replace the `STRIPE_PRO_PRICE_ID` and `STRIPE_ENTERPRISE_PRICE_ID` values in your `.env` file with these IDs.

***

**Step 3: Set Up Stripe Webhooks**

Stripe uses webhooks to notify your application about important events like successful payments.

1. **Run Your Application**\
   Start your local development server:

   ```bash
   mix phx.server
   ```
2. **Install Stripe CLI**\
   Download and install the [Stripe CLI](https://stripe.com/docs/stripe-cli) to set up webhook forwarding.
3. **Forward Events to Your Application**\
   Use the Stripe CLI to forward webhook events to your local server:

   ```bash
   stripe listen --forward-to localhost:4000/webhook
   ```

   Copy the generated signing secret and update your `.env` file’s `STRIPE_SIGNING_SECRET`.
4. **Set Up Webhook Endpoint in Stripe For Prod**
   * Navigate to the Webhooks section of the Stripe Dashboard.
   * Add a new endpoint pointing to `https://your-domain.com/webhooks/stripe` for production.

***

**Step 4: Test Your Setup**

1. **Test Subscription Creation**\
   Use Stripe's test card numbers (e.g., `4242 4242 4242 4242`) to simulate subscriptions.

***

**Step 5: Optional - Enable Customer Portal**

1. In the Stripe Dashboard, enable the [Customer Portal](https://dashboard.stripe.com/settings/billing/portal).
2. Copy the Customer Portal URL and save it in your `.env` as `STRIPE_PORTAL_ID`.

***

### Extra:

We have written a stripe\_helpers.ex module that creates checkout sessions for new subscribers and upgrading/downgrading subscribers, and a request helper function for hitting up Stripe's API. For example:&#x20;

```elixir
price_id = StripeHelpers.get_price_id(session_id)

# email being the logged in user.
case StripeHelpers.create_checkout_session(price_id, email) do
      {:ok, url} ->
        redirect(conn, external: url)
      {:error, reason} ->
        IO.inspect(reason)
        redirect(conn, to: "/")
      _ ->
        redirect(conn, to: "/")
    end
```

Your Stripe setup is now complete! You can start accepting payments, managing subscriptions, and leveraging Fast Phoenix’s built-in features to streamline your billing processes. 🚀


# Mailgun

#### Mailgun Setup Tutorial

Fast Phoenix includes Mailgun integration for sending transactional emails and running email campaigns. Follow these steps to configure Mailgun for your project.

***

**Step 1: Prepare Your Environment Variables**

Fast Phoenix uses environment variables to manage Mailgun configuration. You will also have to set this in your config.ex file under config :mailgun.. As the module requires the variables at compile time. Open your `.env` file and ensure the following variables are set:

```env
# Mailgun Configuration
MAILGUN_API_KEY=your_mailgun_api_key
MAILGUN_DOMAIN=https://api.mailgun.net/v3/your-domain.com
```

Replace the placeholder values with your actual Mailgun API key and domain.

***

**Step 2: Set Up Mailgun Account**

1. **Create a Mailgun Account**\
   Sign up or log in to your [Mailgun Dashboard](https://www.mailgun.com/).
2. **Add Your Domain**
   * Navigate to *Domains* and add your sending domain (e.g., `your-domain.com`).
   * Follow the DNS setup instructions provided by Mailgun to verify your domain.
3. **Get Your API Key**
   * Once your domain is verified, go to *API Keys* in your account settings.
   * Copy your private API key and paste it into the `MAILGUN_API_KEY` field in your `.env` file.

***

**Step 3: Test Mailgun Integration**

1. **Send a Test Email**\
   In your Phoenix application, you can send a test email to verify the setup:

   ```elixir
   defmodule PhxSaas.Mailer do
     use Mailgun.Client,
       domain: Application.get_env(:mailgun, :domain),
       key: Application.get_env(:mailgun, :api_key)

     alias PhxSaas.Templates.EmailTemplates

     def deliver_user_instructions(recipient, subject, body) do

       case send_email(
           to: recipient,
           from: "#{Application.get_env(:phx_saas, :saas_name)} <mailgun@#{Application.get_env(:phx_saas, :domain)}>",
           subject: subject,
           html: body
       ) do
         {:ok, _metadata} -> {:ok, _metadata}
         {:error, _reason} -> notify_admin(subject, recipient)
         :ok -> IO.puts "Email sent successfully"
       end
     end

     def notify_admin(subject, user) do
       {:ok, _metadata} =
         send_email(
             to: Application.get_env(:phx_saas, :email),
             from: "#{Application.get_env(:phx_saas, :saas_name)} <mailgun@#{Application.get_env(:phx_saas, :domain)}>",
             subject: subject,
             text: "Failed to send instructions to user: #{user.email}"
           )
     end
   end

   PhxSaas.Mailer.deliver_user_instructions("recipient@gmail.com", "Test", """<h1> This is a test email </h1>""")
   ```
2. **Verify the Email**\
   Check the recipient's inbox or your Mailgun logs to confirm the email was sent successfully.

***

**Step 4: Configure Email Templates**

Fast Phoenix supports customizable email templates stored in the database. You can manage them directly from the admin interface:

1. Navigate to the admin dashboard.
2. Select *Email Templates* to view, create, or edit templates.

***

**Step 5: Bulk Email Campaigns**

Use Fast Phoenix emailing capabilities to send bulk emails directly from the admin dashboard:

1. Set filters for user types to target specific audiences.
2. Compose your email campaign using a custom template.
3. Launch the campaign, and track its performance in the Mailgun Dashboard.


# Premade Email Templates

<figure><img src="/files/DIATtYIFgCBF3TimRk7p" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/IVXOw1j3KwBLOSNzfZWE" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/wRaiaTH3V1POP2Wb7MM5" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/CvKdzgdvlcyZ6dLzaFKR" alt=""><figcaption></figcaption></figure>


# Email Templates & Sending

## Create your own templates with custom links for your emailing campaigns.&#x20;

<figure><img src="/files/tgGcvKhJwfmDwKT3RrFA" alt=""><figcaption></figcaption></figure>

### Create

<figure><img src="/files/UJrGx5ZP2JFP69raYQad" alt=""><figcaption></figcaption></figure>

### View

<figure><img src="/files/0Pzu8eX2vn6Rj8r4SjO1" alt=""><figcaption></figcaption></figure>

### NOTE:

You can change the logo at the top by editing the image path in **runtime.ex**

### Setup Campaign

<figure><img src="/files/YnLFQmiLkz7pFbeXPg5u" alt=""><figcaption></figcaption></figure>

### Send.


# Organizations

#### Organizations Setup

<figure><img src="/files/ggneWpYDoKnLV3jHOaS4" alt=""><figcaption></figcaption></figure>

Fast Phoenix provides robust features for managing organizations, including roles, invites, and activity logs. Organizations are central to enabling collaborative workflows and controlling access within your app. Here’s how to set it up and use it effectively:

***

**Step 1: Organization Creation**

Organizations are created during the user onboarding process:

1. **Onboarding Flow**\
   After signing up, users are prompted to create an organization by entering their name.
   * Example field: *Name*
   * Once submitted, an organization is created and associated with the user as the owner.
2. **Default Settings**
   * The user who creates the organization is assigned the `Admin` role.
   * Default seat limits are set based on the subscription tier.

***

**Step 2: Organization Roles**

Fast Phoenix includes a flexible role system for managing access:

1. **Predefined Roles**
   * **Admin**: Manage users, roles, and organization settings but cannot handle billing.
   * **Member**: Basic access to organization features based on permissions.
2. **Custom Roles (Optional)**
   * Extend the system by defining additional roles in the database or configuration files.

***

**Step 3: Organization Invites**

Invite team members to join an organization with ease:

1. **Send Invites**
   * Admins can send invites by entering the email address of the invitee.
   * The invite is sent using a prebuilt email template (customizable via the admin dashboard).
2. **Accepting Invites**
   * Invitees receive an account notification to accept the invite and join the organization.
3. **Seat Limit Enforcement**
   * Seat limits are based on the organization’s subscription tier. Attempts to exceed this limit will be blocked until an upgrade is made.

***

**Step 4: Organization Logs**

Track all organization-related activities:

1. **Log Types**
   * **Member Actions**: Invites sent, roles updated, or members removed.
   * **Settings Updates**: Organization name or preferences changes.
2. **Access Logs**
   * Logs are accessible via the organization dashboard for transparency and auditing.

***

**Step 5: PubSub for Real-Time Updates**

Fast Phoenix leverages Phoenix PubSub to keep all members in sync:

**Live Notifications**

* Role changes, invites, or setting updates trigger real-time notifications for all logged-in users.

***

**Step 6: Managing Organizations**

Admins can manage their organization via a dedicated dashboard:

1. **Member Management**
   * Add, remove, or update roles for team members.
   * Resend invites or revoke pending ones.
2. **Subscription Settings**
   * View current subscription tier and available seat limits.
   * Upgrade or downgrade directly through the Stripe integration.
3. **Logs and Insights**
   * Access detailed logs and analytics about organization activities.

***

Fast Phoenix’s organization system is designed to simplify team collaboration while providing the flexibility and control needed for growing applications. 🚀


# Admin

<figure><img src="/files/8tHzD4lPfkhzNeRn21gh" alt=""><figcaption></figcaption></figure>

#### Admin Section Overview

The Fast Phoenix admin section is a powerful hub for managing your application. It provides essential tools for overseeing users, managing emails, and monitoring application performance. The admin interface includes the following pages:

***

**1. Users**

The Users page allows administrators to manage all registered users in the application:

* **Search and Lookup**:\
  Quickly find users by email, username, or other criteria.
* **View Details**:\
  Access user profiles, including roles, organization membership, and activity logs.
* **Manage Users**:
  * Update roles or permissions.
  * Deactivate or delete user accounts.

***

**2. Emailing**

The Emailing page provides a centralized tool for launching email campaigns:

* **Bulk Campaigns**:\
  Send emails to specific user groups using filters such as:
  * Subscription tier (e.g., Free, Pro, Enterprise)
* **Track Campaigns**:\
  Monitor delivery, open, and click-through rates via Mailgun logs.

***

**3. Email Templates**

Manage all custom email templates from this page:

* **Create Templates**:\
  Use a simple editor to design email templates directly in the browser.
* **Edit Templates**:\
  Update existing templates without redeploying code.
* **Preview Emails**:\
  Visualize how the email will look before sending.
* **Database Storage**:\
  All custom templates are stored in the database for reusability.

***

**4. Default Templates**

The Default Templates page lists the prebuilt email templates included with Fast Phoenix:

* **View Built-in Templates**:\
  Browse templates for actions like password resets, invites, and notifications.
* **Customize Defaults**:\
  Override default templates to match your brand’s tone and design.

***

**5. Telemetry**

The Telemetry page provides insights into your application’s performance and health:

* **Real-Time Metrics**:\
  Monitor key metrics such as request rates, database queries, and system load.
* **Error Tracking**:\
  Identify and troubleshoot errors in real time.

***

#### Why It Matters

The admin section in Fast Phoenix empowers administrators with:

* **Full Control**: Oversee all aspects of the application from a single interface.
* **Operational Efficiency**: Manage users, emails, and performance without needing to access the codebase.
* **Scalability**: Tools that grow with your application’s user base and complexity.

With the admin section, managing your app becomes simple, efficient, and powerful. 🚀


# Landing Page

###

<figure><img src="/files/8so71tExuZLiCjToKwjb" alt=""><figcaption></figcaption></figure>

**Key Features of the Landing Page**

1. **Beautiful and Functional Design**
   * Modern, responsive layout that looks great on any device.
   * Carefully crafted sections designed to highlight your product’s features, benefits, and call-to-action (CTA).
2. **Prebuilt Sections**\
   The landing page comes with a variety of pre-designed sections:
   * **Hero Section**: A stunning introduction with a CTA button.
   * **Features Section**: Highlight key features of your product.
   * **Pricing Section**: Clearly display your subscription tiers and benefits.
   * **Testimonials Section**: Showcase user reviews or client logos.
   * **FAQ Section**: Address common questions to reduce barriers to signup.
3. **Customizable Components**
   * Each section is implemented as a reusable Phoenix component, making it easy to adapt or repurpose across your application.
   * Components are modular, so you can rearrange, add, or remove sections as needed.
4. **Theme Compatibility**
   * Works seamlessly with Fast Phoenix’s 32 built-in themes with DaisyUI.
   * Components dynamically adapt to your selected theme, ensuring consistent styling.

***

**Benefits of Reusable Components**

1. **Rapid Development**
   * Modify or add sections without duplicating code.
   * Use the same components on other pages, such as user dashboards or promotional microsites.
2. **Easy Maintenance**
   * Centralize updates for shared components. Changes to one instance are automatically applied everywhere the component is used.
3. **Consistency**
   * Ensure your branding and design are consistent across your app with shared components.
4. **Scalability**
   * Add new landing page sections as your application evolves without disrupting the existing structure.

***

**Customizing the Landing Page**

1. **Update Content**\
   Modify text, images, and links directly in the templates or dynamically via a CMS integration.
2. **Rearrange Sections**\
   Change the order of sections by rearranging the component calls in the landing page template.
3. **Add New Components**
   * Build custom components that match the style and structure of the prebuilt ones.
   * Drop them into the page template to extend functionality.

***

With its reusable Phoenix components, the Fast Phoenix landing page is not just a beautiful front-facing tool—it’s a development powerhouse that saves you time and effort while delivering a polished experience for your users. 🚀


# Themes

#### DaisyUI’s 32 Themes

<figure><img src="/files/WB0zp5xBgda8LgXS2kI2" alt=""><figcaption></figcaption></figure>

Fast Phoenix includes seamless integration with **DaisyUI**, a popular utility-first component library built on top of TailwindCSS. With **32 built-in themes**, you can transform your application’s look and feel instantly, ensuring it always matches your brand or user preferences.

***

**Why DaisyUI Themes?**

1. **Prebuilt Themes**
   * A wide variety of themes cater to different aesthetics, from professional and minimalistic to bold and vibrant.
   * Themes are carefully designed for consistency and usability.
2. **Dynamic Customization**
   * Switch between themes effortlessly without rewriting any styling.
   * Use themes to allow users to personalize their experience or dynamically match their device’s dark/light mode settings.
3. **Fully Compatible with Fast Phoenix**
   * Every page, component, and element in Fast Phoenix has been coded to work seamlessly with DaisyUI themes.
   * Whether it’s the landing page, admin dashboard, or email templates, your content will display perfectly across all themes.

***

**Key Features of the Themes**

1. **Consistency**
   * Typography, buttons, forms, and other components are uniformly styled across themes.
   * No need for additional CSS tweaks when switching themes.
2. **Customization Options**
   * Tweak colors, fonts, and other design elements using TailwindCSS variables.
   * Build your own theme or extend an existing one to fit your unique brand.
3. **Responsive Design**
   * Every theme is mobile-friendly and adapts beautifully to different screen sizes.

***

**How to Use DaisyUI Themes in Fast Phoenix**

1. **Select a Default Theme**
   * Choose your app's default theme by configuring it in `tailwind.config.js`&#x20;
   * Example:

     ```javascript
     module.exports = {
       daisyui: {
         themes: ["light", "dark", "corporate", "retro"], // List themes you want to use
       },
     };
     ```
2. **Preview Themes**
   * Use DaisyUI’s Theme Showcase to explore the available themes and see what suits your application.

***

**Popular Themes Included**

1. **Light**: Clean and minimal for professional apps.
2. **Dark**: Ideal for modern, sleek designs.
3. **Corporate**: Polished and business-oriented.
4. **Forest**: Green hues for a natural, earthy vibe.
5. **Cyberpunk**: Neon and bold for futuristic aesthetics.
6. **Retro**: Nostalgic colors and style.
7. **Synthwave**: Vibrant neon for high-energy apps.
8. **Dracula**: A dark theme with contrasting highlights.

***

**Benefits of DaisyUI Integration**

1. **Rapid Customization**
   * No need to spend hours designing styles—simply pick a theme that matches your needs.
2. **User-Friendly**
   * Provide users with an elegant and consistent interface across all pages and components.
3. **Future-Proof Design**
   * Easily update or expand themes as your application evolves.

***

With **DaisyUI’s 32 themes**, Fast Phoenix ensures that your app is always visually appealing, easy to use, and adaptable to any branding requirements. 🚀


# SEO

#### SEO Setup in Fast Phoenix

Search Engine Optimization (SEO) is a critical aspect of making sure your application gets the visibility it deserves on search engines. Fast Phoenix comes with a simple yet powerful SEO setup to help you optimize your landing page and other important content. Currently, the SEO setup is centralized in a dedicated `seo.ex` file, where you can manage the SEO title, description, and other metadata for your landing page.

***

**Step 1: The `seo.ex` File**

In Fast Phoenix, SEO metadata is stored in the `seo.ex` file, which provides a centralized place to manage your SEO tags. By default, this file contains the following configuration:

```elixir
defmodule PhxSaas.Seo do
  def title, do: "Fast Phoenix - Build Faster with Elixir and Phoenix"
  def description, do: "Fast Phoenix is a boilerplate for the Phoenix Framework, helping you rapidly develop your web applications with powerful features and seamless integrations."
  def keywords, do: "Phoenix, Elixir, boilerplate, web development, SaaS"
  def author, do: "Your Name or Company"
  def og_image, do: "https://yourdomain.com/images/og-image.png"
  def twitter_card, do: "summary_large_image"
end
```

You can customize this file to fit your app’s SEO needs. Below is a breakdown of the key metadata elements:

* **title**: This will be the title tag displayed in search results and the browser’s tab.
* **description**: This is the meta description tag that will be displayed in search results beneath your title.
* **keywords**: The keywords meta tag is used to provide search engines with relevant keywords for your page.
* **author**: The author meta tag helps indicate the creator of the content.
* **og\_image**: This is the Open Graph image, used for social media sharing (like Facebook).
* **twitter\_card**: This tag defines how your content appears on Twitter when shared.

***

***

**Step 2: Customizing SEO for Specific Pages**

For pages beyond the landing page, you can define custom SEO values. In the controller for each page, you can override the default `title`, `description`, and other meta tags:

```elixir
defmodule PhxSaasWeb.Page do
  use PhxSaasWeb, :live_view

  def mount(_params, _session, socket) do
    {:ok,
    socket
    |> assign(:title, "Welcome to Fast Phoenix")
    |> assign(:description, "Start building your web applications with Fast Phoenix, a powerful Phoenix boilerplate.")}
  end
end
```

Now, when the `index.html.eex` page is rendered, it will use the overridden SEO values.

***

**Step 3: Advanced SEO Optimization (Optional)**

1. **Adding Structured Data (JSON-LD)**\
   Structured data helps search engines understand your content better. You can add JSON-LD structured data to your pages for things like product information, events, or organization details.

   Example:

   ```elixir
   <script type="application/ld+json">
     {
       "@context": "https://schema.org",
       "@type": "WebPage",
       "name": <%= assigns[:title] || PhxSaas.Seo.title() %>,
       "description": <%= assigns[:description] || PhxSaas.Seo.description() %>,
       "author": <%= assigns[:author] || PhxSaas.Seo.author() %>
     }
   </script>
   ```
2. **Open Graph Tags**\
   Open Graph tags help improve the visibility of your content on social media platforms like Facebook and LinkedIn. These can be easily added to the `<head>` section, as shown earlier.

***

**Step 4: Testing SEO**

After setting up your SEO metadata, you can use tools like Google’s Mobile-Friendly Test or Google Search Console to check how your site performs in search engines.

We also like to use Semrush to audit our sites.

You can also test your Open Graph and Twitter Card metadata with:

* [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/)
* [Twitter Card Validator](https://cards-dev.twitter.com/validator)
* [Semrush](https://semrush.com)

***

With Fast Phoenix’s SEO setup, optimizing your web app for search engines is easy and flexible. Customize the metadata, adjust it on a page-by-page basis, and ensure your app is ready for higher search rankings and better visibility across social media platforms. 🚀


# Theme Selector

<figure><img src="/files/WB0zp5xBgda8LgXS2kI2" alt=""><figcaption></figcaption></figure>

```
<.theme_select />
```


# Testimonials

<figure><img src="/files/NJWIxxhsrtZbAfRgAReb" alt=""><figcaption></figcaption></figure>


# Call to Action

<figure><img src="/files/yUTJePFsswwkD0U132sp" alt=""><figcaption></figcaption></figure>


# Faq's

<figure><img src="/files/RACk6fxSfavcFTVa5I8e" alt=""><figcaption></figcaption></figure>

```html
<.faqs>
  <:question title="Lorem ipsum dolor sit amet consectetur adipisicing?">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab hic veritatis molestias culpa in,
    recusandae laboriosam neque aliquid libero nesciunt voluptate dicta quo officiis explicabo
    consequuntur distinctio corporis earum similique!
  </:question>
  <:question title="Lorem ipsum dolor sit amet consectetur adipisicing?">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab hic veritatis molestias culpa in,
    recusandae laboriosam neque aliquid libero nesciunt voluptate dicta quo officiis explicabo
    consequuntur distinctio corporis earum similique!
  </:question>
  <:question title="Lorem ipsum dolor sit amet consectetur adipisicing?">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab hic veritatis molestias culpa in,
    recusandae laboriosam neque aliquid libero nesciunt voluptate dicta quo officiis explicabo
    consequuntur distinctio corporis earum similique!
  </:question>
</.faqs>
```


# Features

<figure><img src="/files/52hc8Mdsdp8BAYG0PWvx" alt=""><figcaption></figcaption></figure>


# Header

<figure><img src="/files/4vZ62pOPfojOvGltqPIv" alt=""><figcaption></figcaption></figure>

```html
<.navbar :if={!@current_user} current_user={@current_user}>
  <:company><%= Application.get_env(:phx_saas, :saas_name) %></:company>
  <:link patch={~p"/#pricing"}>Pricing</:link>
  <:link patch={~p"/#contact"}>Contact</:link>
</.navbar>
```


# Footer

<figure><img src="/files/jsARZ6o9IDPzzHT80Rf5" alt=""><figcaption></figcaption></figure>


# Hero

<figure><img src="/files/diSf1NP86YTIRfAfAROJ" alt=""><figcaption></figcaption></figure>

```html
<.hero
  label="Deploy & Sell"
  cta="Get Started"
  cta_path={~p"/products/subscribers/new"}
>
  <:headline>The Best Tool On The Market For Small Businesses</:headline>
  <:copy>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio reiciendis omnis praesentium soluta neque, quas esse? Qui illo perferendis debitis, quisquam hic libero repudiandae mollitia impedit fugit accusantium officia officiis.
  </:copy>
</.hero>
```


# Login/Register

<figure><img src="/files/PcJOPKXveMqPlY5QNRvf" alt=""><figcaption></figcaption></figure>


# Mobile Hero

<figure><img src="/files/yix6IZRYYanIfgdtTNsx" alt=""><figcaption></figcaption></figure>

```html
<.mobile_hero
  label="Get The App"
  apple_path="https://example.com"
  google_path="https://example.com"
  image_path="/images/quartz.png"
>
  <:headline>Available On iOS & Android</:headline>
  <:copy>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quo a, sint doloremque culpa corrupti est corporis dolor facere id laudantium. Tempore deserunt optio nulla cumque quia et, quidem incidunt.
  </:copy>
</.mobile_hero>
```


# Sidebar

<figure><img src="/files/22WSvnilHq6kgr2IYD92" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/v8PnfWWestjZf9WrLclS" alt=""><figcaption></figcaption></figure>

```html
<.auth_navbar
  socket={@socket}
  :if={
    @current_user &&
      @socket.view in PhxSaasWeb.admin_routes()
  }
  current_user={@current_user}
  active_tab={@active_tab}
  inner_content={@inner_content}
>
  <:link title="Users" patch={~p"/admin"}>
    <div class="hero-user h-6 w-6"></div>
  </:link>
  <:link title="Emailing" patch={~p"/admin/emails"}>
    <div class="hero-envelope h-6 w-6"></div>
  </:link>
  <:link title="Email Templates" patch={~p"/admin/templates"}>
    <div class="hero-pencil-square h-6 w-6"></div>
  </:link>
  <:link title="Default Templates" patch={~p"/admin/preview/templates"}>
    <div class="hero-inbox-stack h-6 w-6"></div>
  </:link>
  <:link title="Telemetry" patch={~p"/admin/telemetry"}>
    <div class="hero-chart-pie h-6 w-6"></div>
  </:link>
</.auth_navbar>
```


# Trust

<figure><img src="/files/ZBYdNdWuZshu83AiDXcO" alt=""><figcaption></figcaption></figure>


# Card

<figure><img src="/files/ZDMXhxylUEV7ZMLuEBBw" alt=""><figcaption></figcaption></figure>

```
<.card>
  <:icon>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      class="h-10 w-10 shrink-0 transform-cpu rounded-lg text-primary"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="m21 7.5-2.25-1.313M21 7.5v2.25m0-2.25-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3 2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75 2.25-1.313M12 21.75V19.5m0 2.25-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25"
      />
    </svg>
  </:icon>
  <:title>
    Built With Phoenix
  </:title>
  <:description>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae accusantium veniam facere eligendi
  </:description>
</.card>
```