Giter VIP home page Giter VIP logo

face.camp's Introduction

face.camp logo

Facecamp lets you take an animated gif from desktop or mobile by connecting the app to Slack and then visiting face.camp to post yourself to Slack for your teamies to see.

Developing Locally

  1. npm install

Using your production face.camp token

If you only want to develop the UI (and not any of the server functions), the easiest way to do that is to take your token from face.camp and paste it into your locally running app.

  1. Start the local app with npm start
  2. Go to face.camp and if you are not authenticated, complete the login flow to signin with Slack
  3. Open the developer console and paste the following and press Enter:
((k)=>copy(`localStorage.setItem('${k}',${JSON.stringify(localStorage.getItem(k))})`))('facecamp-data')
  1. This will copy your local Slack token to your clipboard
  2. Go to your local app at http://localhost:8080 and open the developer console
  3. Paste the contents of your clipboard and press Enter
  4. Your local app should now show you as authenticated

Using the server functions

You'll need a Slack app with a client id and secret to run the server functions. Go to your Slack app's page to get or create your app. Then use the configuration values for that app to setup and run the authentication lambda functions. Once you have your client id and secret:

  1. Start the local app with npm start
  2. Put DEV_CLIENT_ID=YOUR_CLIENT_ID and DEV_CLIENT_SECRET=YOUR_CLIENT_SECRET in .env
  3. Start the functions server with npm run functions:start
  4. The app will proxy all the API requests to the locally running functions server
  5. Find your development server URL from the output of npm start (it should be http://localhost:8080)
  6. Go to your Slack app's "OAuth & Permissions" settings and add your development server as a redirect url. Note that this url will only affect instances of the server running with the DEV_CLIENT_ID and DEV_CLIENT_SECRET. Any changes to production OAuth redirect URLs need to be reviewed by Slack.

So you want to test on your mobile device

  1. Follow the instructions above from the "Using the server functions" section
  2. Make sure to use the local IP address version of the development URL for the redirect url

Building for Production

This app gets built as static files that can be hosted anywhere. Run the following commands to build a production ready version to the build/ directory.

npm run build

If you'd like to test the production version locally, you can run the following command which will serve whatever files are in the build/ directory.

npx serve -s build

Contributing

Follow the guidelines in the contribution docs.

Credit

Credit to @latentflip's gifhu.gs from which I took the initial implementation for the getUserMedia -> gif code.

License

MIT

face.camp's People

Contributors

lukekarrys avatar lynnandtonic avatar greenkeeper[bot] avatar one000mph avatar wraithgar avatar sockdrawermoney avatar bighitbiker3 avatar dstaley avatar dependabot[bot] avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.