SupaPoll

A live poll Next.js application built with Supabase, Twilio, and Hookdeck.

supapoll-localhost-vote.mp4

supapoll.com is deployed to Vercel.

Setup

1. Signup for Supabase.

2. Install the Supabase CLI and login with supabase login

3. Create a new Supabase project using the Supabase CLI and enter details as prompted:

   supabase projects create

4. Open the project URL and add the appropriate values to a .env file:

   NEXT_PUBLIC_SUPABASE_URL=
   NEXT_PUBLIC_SUPABASE_ANON_KEY=
   SERVICE_ROLE=
   SUPABASE_JWT_SECRET=
   

5. Link your Supabase project locally by running supabase link, selecting the project, and entering the database password you used when running supabase projects create.

6. Run supabase db push to run the migrations on the remote database.

7. Set up GitHub Login for the project by following the Supabase GitHub login guide

8. Set up Twilio Verify by following the Twilio Verify Supabase phone provider guide

9. Set the Twilio environment variables:

   TWILIO_ACCOUNT_SID=
   TWILIO_AUTH_TOKEN=
   TWILIO_AUTH_VERIFY_SID=
   

10. Buy at least one phone number from Twilio to allow you to vote via SMS.

11. Update the environmental variable with one or more comma-separated phone numbers:

    NEXT_PUBLIC_PHONE_NUMBERS=
    

12. Signup for Hookdeck, grab your project's API Key and signing secret from the secrets section, and add the following environment variables:

    HOOKDECK_API_KEY=
    HOOKDECK_SIGNING_SECRET=
    

13. Install the application dependencies:

    npm i
    

14. Run the Hookdeck setup script to create a connection in Hookdeck to receive Twilio SMS webhooks and update the Twilio phone numbers to use that URL for inbound SMS webhooks:

    npm run setup
    

15. Install the Hookdeck CLI, run hookdeck login.

16. Run the Hookdeck CLI to tunnel webhooks from Hookdeck to your localhost:

    hookdeck listen 8080 twilio-messaging
    

Run SupaPoll

npm run dev

Open http://localhost:8080 with your browser to see the result.

Development

To update the Supabase type definitions, run:

npx supabase gen types typescript --project-id "$PROJECT_REF" --schema public > lib/types/supabase.ts

See the Supabase docs for Generating TypeScript Types.

Learn More

To learn more about the technologies used in this application:

• Supabase
• Twilio Verify
• Twilio Programmable Messaging
• Hookdeck
• Next.js

Credits

• Daily Web Coding