Twilio Mixologist is an application that allows you to solve the problem of long queues at stands at events. Attendees can order their coffee, smoothie or whatever you serve via Twilio-powered channels, Mixologists get all orders on a website that can be accessed via a tablet and once an order is done the attendee will be notified via the system to come and pick it up. No more queueing and efficient coffee ☕️ ordering! 🎉
If you want to learn more about how this project was started, check out the this blog post:
Different versions of this system have been used at events such as:
- NDC Oslo 2016, 2017
- CSSConf EU && JSConf EU 2017
- WeAreDevelopers World Congress 2023, 2024
- Mobile World Congress Barcelona 2023, 2024
- Money 20/20 2023
- Twilio SIGNAL 2023, 2024
- Receive orders using Twilio Messaging
- Store orders and real-time synchronization them between back-end and front-end using Twilio Sync
- Easy dynamic application configuration using Twilio Sync
- Managing message threads using Twilio Conversations
- Permission management based on Twilio Sync
- Easy way to reset the application from the admin interface
- Support multiple events that happen in parallel
- Query for location in the queue as well as canceling the order as a user
- All combined into a single NextJS web application
- Integration with Segment
- Your suggestions
The current Twilio Channels are:
- Node.js version 20 or higher
- [pnpm]
- A Twilio account - Sign up here
-
Install the project's dependencies
pnpm install
-
Create a
.env.localfiles with, at least, the following# Application related values MIXOLOGIST_LOGIN=someuser:assword ADMIN_LOGIN=someadmin:password SERVICE_INSTANCE_PREFIX=Mixologist ACTIVE_CUSTOMERS_MAP=ActiveCustomers UNLIMITED_ORDERS=CommaSeparatedNumbersToWhichTheLimitDoesNotApply # NGROK URL GOES HERE PUBLIC_BASE_URL=https://mobert.ngrok.io # Twilio related values TWILIO_ACCOUNT_SID= TWILIO_API_KEY= TWILIO_API_SECRET=Go into the Twilio Console and generate an API Key and Secret. Make sure to store the information safely.
-
Run the setup script
pnpm run create-twilio-res
-
Now you can manually add all the senders you need to the Messaging Services that was just created for you. This can be done in the Twilio Console
-
Go to the Verify service and make sure it is able to Send Email Verifications with Verify and Twilio SendGrid
-
Connect your Messaging Service to your Conversation Service in the Twilio console.
- Turn on 'Handle Inbound Messages with Conversations' here
- Set your default Mesaging Service and Conversation Services to the Services created by the setup script
- Head back to your Messaging Service, navigate to 'Integration' and select 'Autocreate a Conversation' P.S. In the future this setup step will no longer be necessary
-
Run the script to write the base config for the application. You can re-run this command whether you edit the configuration such as the menu (
menus.ts) or the spelling map (spellingMap.ts). It will also pick up changes you're done to the sender pool of the messaging service.pnpm run update-config
-
First, run the development server:
pnpm dev- Open http://localhost:3000 with your browser to see the result.
This projects comes with a test suit that runs on every push to main and feat/ branches. Unit tests cover basic capabilities (access control checks, template generator). And e2e tests cover the main functionality of the website since the data is loaded async and RSC's are currently not supported by unit test frameworks.
pnpm test # run unit tests
pnpm test:e2e # run e2e testsTBD
Here's a diagram of what happens when the user sends a message to the application
Please be aware that this project has a Code of Conduct. The tldr; is to just be excellent to each other ❤️
All third party contributors acknowledge that any contributions they provide will be made under the same open source license that the open source project is provided under.
MIT