> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shipmobilefast.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart w/ StyleSheet

> Let's get you started in 5 minutes.

<Frame>
  <img src="https://mintcdn.com/shipmobilefast-51a499dc/rNBXOQ08cKXtmr3A/images/header/quickstart.png?fit=max&auto=format&n=rNBXOQ08cKXtmr3A&q=85&s=35009e1bd5967b3e4611cc25d706c661" alt="Quickstart" className="w-full h-full rounded-xl" width="700" height="320" data-path="images/header/quickstart.png" />
</Frame>

<Check> First, make sure you set up your development environment. </Check>

## Super Fast Resources for Shipping:

<CardGroup>
  <Card className="flex flex-row gap-4">
    For AI Logo Creator:

    <a href="https://logomeai.partnerlinks.io/5roh64fyuttq">
      <img src="https://mintcdn.com/shipmobilefast-51a499dc/rNBXOQ08cKXtmr3A/images/resources/logome.svg?fit=max&auto=format&n=rNBXOQ08cKXtmr3A&q=85&s=6770f31c4570098733a499c9a7bce6b8" alt="Logo Creator AI" width={100} className="filter invert dark:invert-0" data-path="images/resources/logome.svg" />
    </a>
  </Card>

  <Card className="flex flex-row gap-4">
    For Email SMTP Service:

    <a href="https://brevo.com" className="flex flex-row items-center gap-2">
      <img src="https://mintcdn.com/shipmobilefast-51a499dc/rNBXOQ08cKXtmr3A/images/resources/brevo.png?fit=max&auto=format&n=rNBXOQ08cKXtmr3A&q=85&s=7c755f97d62c2dc339be252c61f2a190" alt="Brevo" width={30} data-path="images/resources/brevo.png" />

      <span>Brevo</span>
    </a>
  </Card>
</CardGroup>

### Then, we are ready to clone the repo.

#### Open your terminal and run the following command:

<Steps>
  <Step>
    <Tabs>
      <Tab title="Starter">
        ```bash theme={null}
        git clone https://github.com/shipmobilefast/shipmobilefast.git [your-project-name]
        ```
      </Tab>

      <Tab title="Pro">
        ```bash theme={null}
        git clone https://github.com/shipmobilefast/shipmobilefast-pro.git [your-project-name]
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    ```bash theme={null}
    cd [your-project-name]
    ```
  </Step>

  <Step>
    <Tabs>
      <Tab title="npm">
        ```bash theme={null}
        npm install
        ```
      </Tab>

      <Tab title="yarn">
        ```bash theme={null}
        yarn install
        ```
      </Tab>

      <Tab title="pnpm">
        ```bash theme={null}
        pnpm install
        ```
      </Tab>

      <Tab title="bun">
        ```bash theme={null}
        bun install
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    ```bash theme={null}
    git remote remove origin
    ```
  </Step>

  <Step>
    Now we are ready to start the development server. But don't start it yet.
  </Step>
</Steps>

### That's it! Our app is ready to be built.

<Info>
  But we are not done yet. We need to set up the app.json file.
</Info>

<Steps>
  <Step>
    First open your `app.json` file and find these lines:

    ```json app.json theme={null}
     {
    "expo": {
      "name": "My App",
      "slug": "my-app",
      "scheme": "com.myapp.app",
      ...
      "ios": {
        ...
        "associatedDomains": ["applinks:myapp.com"],
        "bundleIdentifier": "com.myapp.app",
        ...
      },
      "android": {
        ...
        "package": "com.myapp.app",
        ...
        "intentFilters": [
          {
            ...
            "data": [
              {
                "scheme": "https",
                "host": "myapp.com",
              },
              {
                "scheme": "com.myapp.app"
              }
            ],
          }
       ]
      },...
    }
    ```
  </Step>

  <Step>
    Find an app name for yourself. For example: `Ship Mobile Fast`.
  </Step>

  <Step>
    Then create a slug for your app. For example: `ship-mobile-fast`.
  </Step>

  <Step>
    Then create a bundle identifier for your app. For example: `com.shipmobilefast.app`.

    <Info>
      I am using both same like: `com.shipmobilefast.app`.
    </Info>
  </Step>

  <Step>
    Then replace the values with your own.
  </Step>

  <Step>
    Result should look like this:

    <Info>
      I am using `shipmobilefast.com` as my domain. If you don't have one, you can delete the `associatedDomains` and `data` sections.

      ```json {2-5} app.json theme={null}
        "data": [
            {
              "scheme": "https",
              "host": "shipmobilefast.com",
            },
            // Don't delete this one 👇
            {
              "scheme": "com.shipmobilefast.app"
            }
          ]
      ```
    </Info>

    ```json theme={null}
      {
        "expo": {
          "name": "Ship Mobile Fast",
        "slug": "ship-mobile-fast",
        "scheme": "com.shipmobilefast.app",
        ...
        "ios": {
          ...
          "associatedDomains": ["applinks:shipmobilefast.com"],
          "bundleIdentifier": "com.shipmobilefast.app",
          ...
        },
        "android": {
          ...
          "package": "com.shipmobilefast.app",
          ...
          "intentFilters": [
            {
              ...
              "data": [
                {
                  "scheme": "https",
                  "host": "shipmobilefast.com",
                },
                {
                  "scheme": "com.shipmobilefast.app"
                }
              ],
            }
          ]
        },
        ...
      }
    ```
  </Step>
</Steps>

## Supabase

### Now we need to set up Supabase.

<Steps>
  <Step>
    ```bash theme={null}
    cp .env.example .env
    ```
  </Step>

  <Step>
    Now we need to set up the environment variables one by one. Start with [Supabase](https://supabase.com/).

    <Frame>
      <img src="https://mintcdn.com/shipmobilefast-51a499dc/SqmsS_BTqGZZOYdS/images/setup/supabase/create.png?fit=max&auto=format&n=SqmsS_BTqGZZOYdS&q=85&s=18c0e311002e06ac67a0ce815ef45fd7" alt="Supabase" className="w-full" width="792" height="632" data-path="images/setup/supabase/create.png" />
    </Frame>
  </Step>

  <Step>
    Copy the `URL` and `ANON KEY` and paste them into the `.env` file.

    <Frame>
      <img src="https://mintcdn.com/shipmobilefast-51a499dc/SqmsS_BTqGZZOYdS/images/setup/supabase/copy-keys.png?fit=max&auto=format&n=SqmsS_BTqGZZOYdS&q=85&s=2664045439e6968c4974fc5b517d29bc" alt="Supabase" className="w-full" width="987" height="883" data-path="images/setup/supabase/copy-keys.png" />
    </Frame>

    <Warning>
      Warning 1: Don't forget to check `.env` file in the `.gitignore` file.
    </Warning>

    <Warning>
      Warning 2: I strongly recommend to set up your own SMTP server. For example: [Brevo](https://brevo.com/). It is free up to 300 emails per day.

      <Info>
        I am using it in all my projects.
      </Info>

      You can use [Resend](https://resend.com/) too. It's free 100 emails per day.
    </Warning>
  </Step>

  <Step>
    Now go to the Authentication section and add your app id: like: `com.shipmobilefast.app`.

    <Frame>
      <img src="https://mintcdn.com/shipmobilefast-51a499dc/SqmsS_BTqGZZOYdS/images/setup/supabase/redirect-url.png?fit=max&auto=format&n=SqmsS_BTqGZZOYdS&q=85&s=315a6db8858aa4abf13822e505727bcc" alt="Supabase" className="w-full" width="1247" height="849" data-path="images/setup/supabase/redirect-url.png" />
    </Frame>
  </Step>

  <Step>
    Now open your codebase and let's start your app.

    1. Open your terminal and run the following command:

    ```bash theme={null}
    // WITH EAS
    eas build --profile development --platform ios
    ```

    ```bash theme={null}
    // WITHOUT EAS
    npx expo prebuild
    npx expo run:ios
    // or
    npx expo run:android
    ```
  </Step>

  <Step>
    Probably you will see the error.
    eas.json must be created.
  </Step>

  <Step>
    Open your codebase and create `eas.json` file.
  </Step>

  <Step>
    Add this code into `eas.json` file:

    ```json eas.json {5-7} theme={null}
     "build": {
      "development": {
        "developmentClient": true,
        "distribution": "internal",
         "ios": {
          "simulator": true
        }
      },
    ```
  </Step>

  <Step>
    Now run the following command again:

    ```bash theme={null}
    eas build --profile development --platform ios
    ```
  </Step>

  <Step>
    <Info>
      Now your app is ready to be built. 🎉

      ```bash theme={null}
        npx expo start
      ```
    </Info>
  </Step>
</Steps>

### Troubleshooting

#### If you don't set your Supabase URL and ANON KEY in the `.env` file, you will see an error.

<Frame>
  <img src="https://mintcdn.com/shipmobilefast-51a499dc/SqmsS_BTqGZZOYdS/images/troubleshooting/img1.png?fit=max&auto=format&n=SqmsS_BTqGZZOYdS&q=85&s=db6802d806f53aff220627b829dbe74c" alt="Troubleshooting" className="w-full" width="1920" height="423" data-path="images/troubleshooting/img1.png" />
</Frame>

```bash theme={null}
watchman watch-del-all
```

<Info>
  If you are using macOS, you can also install `watchman` using Homebrew.
</Info>

```bash theme={null}
brew install watchman
```
