Louder.ai Front End

This is a Next.js project bootstrapped with create-next-app.

Dependencies

• Firebase (Firestore, Storage)
• Stripe
• Uploadcare Widget

Getting Started

Run yarn install first.

If you previously used npm to install packages delete the node_modules folder (rm -rf node_modules) and re-install dependencies with yarn.

Configure Firebase credentials

Create a .env.local with the following environment variables for testing with the development database

NEXT_PUBLIC_FIREBASE_APIKEY=
NEXT_PUBLIC_FIREBASE_AUTHDOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECTID=
NEXT_PUBLIC_FIREBASE_STORAGEBUCKET=
NEXT_PUBLIC_FIREBASE_MESSAGINGSENDERID=
NEXT_PUBLIC_FIREBASE_APPID=
NEXT_PUBLIC_FIREBASE_MEASUREMENTID=
NEXT_PUBLIC_UPLOADCARE_API_KEY=
NEXT_PUBLIC_STRIPE_API_KEY=
NEXT_PUBLIC_STRIPE_PRODUCT_ID_FOR_PRICE_LIST=

First, run the development server:

yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Check out our Next.js deployment documentation for more details.

Firebase Setup (One-time)

The following Firebase features are required and must be enabled and configured prior to deployment

• Email/password authentication
• Firestore
• Storage are requred
• Hosting

Firestore Rules

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

Storage Rules

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth!=null;
    }
  }
}

Deploy to Google Firebase

Install Firebase SDK: npm install -g firebase-tools

Log into Google: firebase login

Deploy with: yarn run build && yarn run deploy

Stripe Integration

You need to get an API key from https://dashboard.stripe.com/apikeys. You can used test credit cards found at https://stripe.com/docs/testing.

When testing in development, be sure to use development api keys and price codes. In production, you must use production API keys and price codes.

To get payment links working:

1. Generate a "Campaign Promotion" product
2. Add one-time price payments ($5, %10, $50, $100) to the product
3. Get the product id (something like prod_L5ohIgIcFThsCg)

Test Environment

Go to the developer console, switch to "Test Mode", use the secret API key for the NEXT_PUBLIC_STRIPE_API_KEY value in the .env.local file.

Ensure there is a product in the test environment with a price list. Set the NEXT_PUBLIC_STRIPE_PRODUCT_ID_FOR_PRICE_LIST enviroment variable to the product id (something like "prod_L5ih8a9vnSN9nM")

You can use the test Credit Card Number: 4242 4242 4242 4242

Production Environment

For production API Keys, you must harden them with Restricted keys to only have specific read/write permissions. The following API Key permissions should be set:

• Products: Read
• Plans: Read
• Payment Links: Write

To deploy to production run yarn deploy-prod