louder.ai v1.23.17
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 withyarn
.
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
2 years ago