# Quickstart

1. After completing your payment, you'll receive an email with access to the GitLab repository containing both the Angular frontend and NestJS backend projects.

<figure><img src="https://1133247628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FChP1QKunnIyhe3OuxmcV%2Fuploads%2FFPb7k1BiMyvfMFEgE9TG%2Fimage.png?alt=media&#x26;token=4bd650cd-841c-4f16-b7e4-ec4f6920b993" alt=""><figcaption></figcaption></figure>

1. Clone both projects to your local machine.

<figure><img src="https://1133247628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FChP1QKunnIyhe3OuxmcV%2Fuploads%2FPWl6hijQ69QcrGZOA8PI%2Fimage.png?alt=media&#x26;token=d0740e65-aeea-421c-862e-dfee505d4d2c" alt=""><figcaption></figcaption></figure>

1. For each project, run the following command to install dependencies:

   ```
   npm i
   ```
2. To set up the database and API, run:

   ```
   docker compose up -d
   ```

### Backend Setup

#### Environment Variables

Create a `.env` file in the root of your backend project and add the following variables:

```
API_NAME=db-api
PORT_HTTP=4001

DATABASE_URL=postgresql://dbuser:dbpassword@db-postgres:5432/db

FIREBASE_API_KEY=...
FIREBASE_AUTH_DOMAIN=..
FIREBASE_PROJECT_ID=...
FIREBASE_PRIVATE_KEY=-...
FIREBASE_CLIENT_EMAIL=...
FIREBASE_STORAGE_BUCKET=...

STRIPE_SECRET_KEY=...
STRIPE_WEBHOOK_SECRET=...
```

### Frontend Setup

In the Angular project, locate the `app.config.ts` file and update the `firebaseConfig` object with your Firebase credentials:

```typescript
const firebaseConfig = {
  apiKey: "...",
  authDomain: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "...",
  appId: "...",
  measurementId: "..."
};
```

### Third-Party Services Setup

#### Stripe

1. Create a Stripe account at [stripe.com](https://stripe.com).
2. Retrieve your API keys from the Stripe dashboard.
3. Update the `STRIPE_SECRET_KEY` and `STRIPE_WEBHOOK_SECRET` in your backend `.env` file with your Stripe credentials.

#### Firebase

1. Create a new project on the [Firebase Console](https://console.firebase.google.com/).
2. Set up Authentication and Storage services for your project.
3. Retrieve your Firebase configuration and credentials.
4. Update the Firebase-related environment variables in your backend `.env` file.
5. Update the `firebaseConfig` object in your frontend `app.config.ts` file.

### Running the Application

1. Start the backend server:

   ```
   npm run start:dev
   ```
2. Start the frontend development server:

   ```
   ng serve
   ```

Your SaaS application should now be up and running! Access the frontend at `http://localhost:4200` and the backend API at `http://localhost:4001`.\
\
![](https://1133247628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FChP1QKunnIyhe3OuxmcV%2Fuploads%2FQ0kNqxjcZ4QYDW9Yjp7M%2Fimage.png?alt=media\&token=f6104850-f52f-42b9-8717-a0881e393139)![](https://1133247628-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FChP1QKunnIyhe3OuxmcV%2Fuploads%2F5lPPOR95mjAKTWGdDsZp%2Fimage.png?alt=media\&token=863da505-de44-447a-993d-c6c8a39a7f49)
