This is a simple countdown timer intended to be used for in-class activities, with a few bonus features:
- Philips Hue integration -- select a Hue light group to flash when the time's up!
- Markdown support -- the timer's message, intended to contain activity instructions, accepts Markdown input that will be renderedas HTML!
- Slack support -- send a Slack alert when the timer is up!
git clonethis repo to get the codenpm installto install all dependenciesnpm startto start the React app
That's it! To enable specific integrations or alerts, see the following section.
If you want Philips Hue integration, you will need to get an authorized app key from your Philips Hue hub first, and then paste the data into your local .env file:
- Follow the official "Getting Started" guide to get an authorized user/app created.
- Once your done, paste your user/app key into the
REACT_APP_HUE_USERNAMEvariable in your.env.localfile 1. - You will also need to paste your Hue bridge's IP address into the
REACT_APP_HUE_IPvariable.
Coming Soon: Support for bridge discovery is a planned feature. Once that's in place, this process will be handled within the app!
If you want to enable sending Slack messages when the timer completes, you will need to create a new Slack app and start the proxy server 2:
- Follow the official Slack API guide to create your app.
- After your Slack app is created, generate a webhook URL for it and paste it into the
REACT_APP_SLACK_HOOKvariable in your.env.localfile 1. - To start the local proxy server, open a new terminal window and
cdinto theproxyfolder within this project. - You'll need to run
npm installthe first time in order to install the server's dependencies. Once that's done, runnpm startto start up the proxy server!
1: To create your .env.local file, simply copy the .env file to .env.local. This file is ignored by git, and is where you should store any custom configurations, API keys, etc. that should not be committed to the repo. If you need to add a new configuration value for a new integration, please add a blank instance of the variable to .env. DO NOT add any values into the main version-controlled .env file!
2: The local proxy server is needed to get around CORS restrictions. If you're integrating a feature that needs to proxy a request, send a POST request from the front-end to /proxy, with url, method, and body properties inside of the request body. The proxy server will send the request along to the given URL using the given method with the given body, and then relay the response body back to the front-end.
See Code Information for more information about the project code + setup.