Skip to content


Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

The responsible social network.

This repository contains the source code for Vouch -- a social network that is:

  • Ad free
  • Member supported, and
  • 100% open source

React, Firebase & Bacon

Along with the source code, the Vouch team is also developing a course with a goal of walking you through the construction and architecture of this codebase -- from npm init through to credit card payments. It's still in-progress, and currently completely free.

Running and Deploying Vouch

So you want to get Vouch running locally and then deploy your own copy? Here's how.

1. Accounts

Before starting, you'll need accounts with a couple of services:

  • Firebase (with a plan that allows for communication with external APIs, like the Blaze plan)
  • Stripe

Once you have these accounts, you'll need to prepare the following information:

  • Your Firebase config object (which you can find in the Firebase console)
  • A Firebase service account JSON file (which you can create in the Firebase console under Project Settings / Service accounts)
  • A Stripe test api key, secret key, webhook secret and product id

Setting up your Stripe Product

Vouch reads the available product plans directly from Stripe. It expects that all available plans will be created under the same Product object, and looks for a list of available plans under the product metadata's publicPlanIds key.

Here's what the relevant settings look like for Vouch itself:

Stripe product settings screenshot

Vouch also reads plan information from each plan's metadata. Here's an example of what this configuration looked like at the time of writing:

Stripe plan settings screenshot

2. Clone and install

Once you've got the config ready, start by cloning the repository and installing its dependencies. Vouch manages its dependencies with yarn, but npm may work too.

git clone vouch
cd vouch
yarn install
cd functions
yarn install
cd ..

3. Local configuration files

To run the app locally, you'll need to create some configuration files.

cp .env.example .env.development.local
cp functions/.runtimeconfig.json.example functions/.runtimeconfig.json

You'll then need to fill in these files with the settings you prepared earlier:

  • Add your Stripe configuration to .runtimeconfig.json
  • Add your Firebase config and Stripe public key to .env.development.local

The end result should look something like this:

// .runtimeconfig.json
  "stripe": {
    "product_id": "prod_lololololololo",
    "secret_key": "sk_test_lololololololololololololololololo",
    "webhook_secret": "whsec_lolololololololololololololololo"

// .env.development.local files


You'll also need to copy your firebase service account JSON file to functions/.serviceaccount.json

The configuration files are all listed in .gitignore, so that you don't accidentally push any configuration to a public repository.

4. Link a firebase app

The Firebase CLI tool looks for the current project's app ID in a file could .firebaserc -- which you'll need to create. The easiest way to do this is by running firebase use --add, selecting a project, and then naming it default when prompted:

$ firebase use --add

? Which project do you want to add? vouchchat
? What alias do you want to use for this project? (e.g. staging) default

Created alias default for vouchchat.
Now using alias default (vouchchat)

5. Start the dev server

You can test your configuration by starting the development server:

yarn start

This should open a browser window to http://localhost:3000/, which should display the landing page.

6. Configuration for deployment

Before deploying your app, you'll first need a .env.production.local file. This follows the same format as .env.development.local -- in fact, you can just copy the development settings across unless you're launching you own production app.

You'll also need to set the production config for your Firebase functions:

firebase functions:config:set stripe.product_id=... stripe.secret_key=... stripe.webhook_secret=...

The reason you'll need to do this is that the information in functions/.runtimeconfig.json is only used locally; the firebase functions:config:set command is used to configure the same settings for production.

7. Deploy!

Deploying your app to the internets is simple:

yarn deploy

This will build your app's distributable files and renderer package with universal-react-scripts, then deploy these to Firebase Hosting/Functions -- along with the Firebase functions that constitute the API. Once complete, the app's URL will be printed to the console.

8. Setting up Webhooks

To keep the Firebase database up to date with the latest subscription data, you'll need to set up a Stripe webhook in the stripe Developers / Webhooks panel.

The webhook URL will take the following format:

https://us-central1-<your firebase project id>

The webhook will in turn call the function in functions/webhooks/stripe.js, which handles the following events:

  • invoice.created
  • customer.subscription.deleted
  • customer.subscription.updated


Vouch's source code, other than the files in /src/media, are licensed under the MIT license.

Files under /src/media are not licensed for use without explicit permission. Please get in touch at if you'd like to use the Vouch brand in your project (or if you'd like to help us improve our license).


No description, website, or topics provided.



MIT, Unknown licenses found

Licenses found






No releases published


No packages published