GIF Booth

Add animated GIFs and a Family Photo to your virtual events! Let your audience show their faces in a fun and memorable way.

Brought to you with 💛 by Fostive.

Installation

Client

cd client/
npm install

Server

npm install

Requirements

S3

In order to use the GIF Booth app you'll need access to a S3 bucket in AWS, you can have it through Heroku Elements using Bucketeer, or providing your own.

If you are using your own S3 instance please provide the following configuration parameters as environment variables:

• AWS_ACCESS_KEY_ID
• AWS_REGION
• AWS_SECRET_ACCESS_KEY
• AWS_BUCKET_NAME

ffmpeg

GIF Booth uses ffmpeg to do video processing, you'll need to have ffmpeg installed on your computer. On Heroku we will use the heroku-buildpack-ffmpeg-latest, more instructions on how to use it on the Deployment section.

Configuration

Currently, GIF Booth doesn't have an admin interface but it provide an URL endpoint for image moderation, if you want to use this feature please provide the following configuration parameters as environment variables:

• AUTH_USERNAME - (Default: admin)
• AUTH_PASSWORD

Running Locally

npm start

Deployment

1. Create an Heroku application:

heroku create <app-name>

2. Add the ffmpeg buildpack:

heroku buildpacks:add -a <app-name> -i=1 https://github.com/jonathanong/heroku-buildpack-ffmpeg-latest.git

3. Add the heroku/nodejs buildpack:

heroku buildpacks:add -a <app-name> -i=2 heroku/nodejs

4. (Optional) Add the Bucketeer addon (Note: $5/month)

heroku addons:create bucketeer:hobbyist

5. Deploy to Heroku

git push heroku main

🎨 Customization

The logo watermarked onto GIFs and the app's colors can all be easily modified.

Logos

Logo.png branding/Logo.png

used at the base of the group photo

• 80px height

LogoCompact.png branding/LogoCompact.png

used top left of the greeting gif

• 80px height, width, or both

Colors

Edit app colors in branding.css client/src/branding.css

• uses css variables

🤝 Contributing

We love contributions, small or big, from others!

Please see our CONTRIBUTING guidelines. The first thing to do is to discuss the change you wish to make via issue, email, or any other method with the owners of this repository.

Also, please review our code of conduct. Please adhere to it in all your interactions with this project.

Thanks goes to these wonderful ✨ people (emoji key) for contributing to the project:

Chris Castle 📖

Clifton Campbell 💻 🤔 🎨 📖

Julián Duque 💻 🤔 📖 📓 👀 🐛

Jennifer Hooper 📓

Gisete Kindahl 🎨 💻

Diana Perkins 🎨 💻 📖

Vishal Sharma 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

Code of Conduct

Please review and adhere to our CODE_OF_CONDUCT.md before contributing to this project in any way (e.g. creating an issue, writing code, etc).

📝 License

This project is licensed under the Creative Commons Zero v1.0 License. See the LICENSE file for details.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!