# Start Here

## Hello Maker, Let's Get Started With OneMix!

Follow this tutorial to run the OneMix boilerplate locally in minutes.

### Step 1: Get The Repo

* `git clone <https://github.com/SaaS-King/onemix.git`>
* Rename `.env.example` to `.env`

### Step 2: Setup Datbase

* Create a project on [Supabase](https://supabase.com/). You get two free projects.
* You can now populate the following values in the .env file:
* `SUPABASE_URL` and `SUPABASE_ANON_PUBLIC` found at [https://supabase.com/dashboard/project/{PROJECT}](https://supabase.com/dashboard/project/%7BPROJECT%7D)

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

* `SUPABASE_SERVICE_ROLE` found at [https://supabase.com/dashboard/project/{PROJECT}/settings/api](https://supabase.com/dashboard/project/%7BPROJECT%7D/settings/api)

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

* `DATABASE_URL` found here [https://supabase.com/dashboard/project/{PROJECT}/settings/database](https://supabase.com/dashboard/project/%7BPROJECT%7D/settings/database)

<figure><img src="/files/6cSOnfjEA8WEskKdDiTi" alt=""><figcaption></figcaption></figure>

### Step 3: Setup Payment

* Install [Stripe CLI](https://docs.stripe.com/stripe-cli)
* Create a [Stripe](https://stripe.com) account. You can now populate `STRIPE_SECRET_KEY` in the .env file. Find it at <https://dashboard.stripe.com/test/apikeys>

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

* With Stripe CLI installed, run this command: `stripe listen --forward-to localhost:3000/api/webhook` to get the `STRIPE_ENDPOINT_SECRET`

### Step 4: Setup Email

* Create a [Resend](https://resend.com/) account.
* Create an API key here: <https://resend.com/api-keys> and copy it for the `RESEND_KEY_API` value.
* Use your personal email for `receiverEmail` variable in `app/email/service.server.ts`

<figure><img src="/files/7rxWydZl2HTqNPmv1mHg" alt=""><figcaption></figcaption></figure>

### Step 5: Run Locally

* `npm i` (You can use yarn or pnpm if you want to)
* `npm run setup` to seed the DB and Stripe. This script creates 3 dummy subscription products and the respective pricing and tiers in Stripe. You can change them later.
* `npm run dev`

**Voila! You have OneMix running in your local system!**


# Analytics

Just add your Google Analytics Tracking ID in `.env` file to get Google Analytics working.


# Authentication

OneMix makes use of cookie-based authenticated sessions with Supabase.


# Database

### Cleaning Up The Database

On running the `npm run setup` command, your DB gets seeded with pre-defined tables for users, pricing, subscriptions, etc.

***

> **WARNING: Do not execute these commands if you’re unsure about what you want to do.**

If you have used OneMix locally and have a lot of dummy data in the DB that you want to get rid of, you can use `npx prisma db push --force-reset`

***

> **WARNING: Do not execute these commands if you’re unsure about what you want to do.**

In case you want to make a few adjustments in the DB structure and you’re okay with losing any existing dummy data, you can make the changes in `prisma/schema.prisma` file and then run the `npx prisma migrate reset` command.

This command will:

* Drop the database
* Create a new database
* Apply all migrations
* Generate the Prisma client

> **TIP: You might get `resource_already_exists` error from Stripe on running this command if you haven’t made changes to the products in `scripts/config.ts` file. You can ignore this.**


# Emails

In the `email/service.server.ts`, you can find two methods - one to send an email to the user and another to receive an email from the user. You can copy these methods and send or receive emails for multiple scenarios.

OneMix makes use of two variables for the email setup to work:

* `senderEmail` : The email address you can use to send emails from. For testing purposes, you can use `onboarding@resend.dev` . Later, when you verify your domain with Resend, you can use something like `noreply@{YOUR_DOMAIN}.com`
* `receiverEmail` : The email address where you receive an email when the user submits the Contact form. You can use your personal email or create a new email for this. If you have a business email like `contact@{YOUR_DOMAIN}.com`, you can use it too.

#### Verify Your Domain In Resend

You can follow the official Resend docs to verify your domain. This is how you can do it if you have a domain on Namecheap: <https://resend.com/docs/dashboard/domains/namecheap>.


# Error Handling

Error are normalized using the `OneMixError` class in the `utils/error.ts` file.

The `NotifyError()` method in `root.tsx` is used to display the error.


# Payments

### Handling Stripe Test Data

When you run the `npm run setup` command for the first time, Stripe gets seeded with some dummy products and pricing plans.

You can delete the products here: <https://dashboard.stripe.com/test/products?active=true>

Or, you can delete the entire test data (products, prices, logs, etc.) here: <https://dashboard.stripe.com/test/developers>

![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/5f80d4d1-3a21-46b6-a6fe-ce724081cd76/96b8d71b-975a-42d0-87c9-990db1a943a9/Untitled.png)

In case you want to edit the existing products or prices or pricing tiers or add new ones, you can add it directly in your Stripe Dashboard or make the required changes in `prisma/schema.prisma` and `scripts/config.ts` files and run the `npm run setup` command again.

### Stripe Production Guide

* Toggle off the Test Mode.
* Copy the `Secret key` from <https://dashboard.stripe.com/apikeys> and use it as the value of `STRIPE_SECRET_KEY` in your production environment variables.
* Go to <https://dashboard.stripe.com/webhooks>.
* Click on `+ Add endpoint`. Use `https://www.{YOUR_DOMAIN}/api/webhook/`. Select `checkout.session.completed` event and others if you have modified the `api.webhook.ts` file. Copy the signing secret and add it to `STRIPE_ENDPOINT_SECRET` in your production environment variables.


# SEO

Remix makes use of the meta method to define meta tags using key value pairs.

In the `root.tsx` file, you can find:

```tsx
export const meta: MetaFunction = () => [
  { title: "OneMix" },
  { name: "description", content: "OneMix App" },
];
```

You can add all HTML meta tags here and you can use the meta method in each of your routes. If a route does not have a meta method, the `root.tsx` meta values are used.

> **TIP:** Learn more about the meta method [here](https://remix.run/docs/en/main/route/meta).

You can also use the HTML `<meta>` tags as usual without using Remix’s meta method too.

For example, adding this:

```html
<meta property="og:url" content="<https://www.example.com/>" />
<meta
  property="og:image"
  content="<https://example.com/home-page.png>"
/>
```

in the `<head>` of you `App()` method in `root.tsx` would work the same way as it would in any HTML or React project.

### sitemap.xml

Open any sitemap generator like <https://www.xml-sitemaps.com/> and enter your site’s URL after deployment. Add the output to the `content` variable of the `routes/[sitemap.xml].tsx` file. This helps search engines to index the pages of your site.

### robots.txt

A default robots.txt file is already added at `routes/[robots.txt].tsx` which you can customize as per your needs.

### SEO Best Practices

It’s important to follow SEO best practices for you product to rank on search engine results. Here are some links that will help you:

{% embed url="<https://www.semrush.com/blog/seo-best-practices/>" %}

{% embed url="<https://www.link-assistant.com/news/html-tags-for-seo.html>" %}


# Header

A responsive header for navigation.

Default:

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

Logged In:

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


# Hero Section

The hero has vertically and horizontally centered text with a CTA.

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


# Image Gallery

There are two options to display your images:

* `ImageGrid`

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

* `MasonryImageGrid`

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

You can change the images, number of images, number of columns, etc. as per your requirement.


# Marketing Section

For the marketing section, OneMix has the We Are Trusted By section to showcase different customers of your products.

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


# Testimonials

A beautiful, responsive section to highlight what your users say about your products.

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


# Pricing

The pricing table showcases both monthly and annual prices using a toggle button.

OneMix supports multi-currency pricing. The default currency can be changed by changing the value of `DEFAULT_CURRENCY` in the .env file.

> **TIP:** The pricing table shows the products saved in the DB and Stripe. Make the changes in the `scripts/config.ts` file to update the products, prices, etc. If required, clean the DB and re-run the seed command. Checkout [Cleaning Up The Database](/features/database).

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


# FAQs

More questions and answers can be added in the `components/faqs.tsx` file.

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


# Contact Form

The responses of the Contact Us form is sent to the `receiverEmail` in the `email/service.server.ts` file.

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


# Privacy Policy

Use the ChatGPT prompt given in `privacy-policy.tsx` file to generate your startup’s personalized privacy policy.


# Terms of Service

Use the ChatGPT prompt given in `terms-of-service.tsx` file to generate your startup’s personalized terms of service.


# Deployment

* `git add .`
* `git commit -m "deployment time"`
* `git push`
* Use any hosting provider that supports Remix Vite like [Vercel](https://vercel.com) or [Netlify](https://netlify.com).
* Don’t forget to add the `Environment Variables` for production.
* For handling webhooks for live payments, don’t forget to follow the [Stripe Production Guide](/features/payments)
* Go live and share your project with the world!