Quizzes & Polls
A prototype for quizzes and polls made with next.js and supabase.
Its running on AWS Amplify and can be embedded via iframe.
A Prototype of a Guessing Game
guess in which region a certain search term / topic is most popular
based on google trends data
(in private browser tabs geoIP-Service is blocked and the app does not work normally)
About
The project, initiated in 2023, aimed to create an up-to-date full-stack Next.js app with React Server Components. The goal was to build a tool challenging beliefs with data.
The app leverages modern React/Next.js features like Suspense and Next.js 13 SSR and routing. It aims to implement persistent serverless state management through cookies and localStorage in the future. By utilizing postMessage, the app can run within an iframe or as a standalone application.
Started as a small side project, the project grew quickly due to endless ideas that emerged while working on it. The code requires some refactoring before incorporating new features, especially the stores need restructuring to handle different scenarios. The design also needs attention.
This is a prototype and not a finished piece of software!
Future Directions
To further develop the versatile boilerplate, here are some possible directions this might go:
Online Tool:
Utilize as an engaging tool on websites for playful interactions and get some insights about user preferences
Educational Service:
Track user actions when they interact with the app. Beside right or wrong answers, finer metrics like the number of changes of an answer or the response times might be made to gather insights on i.e. a level of confidence of a student.
Demographic Insights Platform:
Host the same questions on different websites/environments to gather better demographic insights.
Guessing Quiz:
Create a fully grown guessing game with features like a leader board .
Some questions with a polling version
(an experiment with a round slider interface)
experimental polling interface
User Form
used to collect demographic data
Singe and Multiple Choice Questions
coming soon
Tech in use
- Next.js 13 and Typescript
- Hosting: AWS Amplified (as a (almost) free reverse proxy running nodejs 18)
- Database: supabase (simple postgre hosting)
- Browser Tech:
- fingerprinting (canvas and audio fingerprinting)
- iframe and postMessage (to make it embeddable to other sites)
- geoip service (for a bit better reliability of the collected data)
- localStorage (to manage state between sessions)
- Other:
- iron-session (sealed cookies, some obfuscation and a bit of security)
- Zustand State Store(s)
- server-side js and react server components
- Tailwind CSS (for styling)
Supabase Backend
The storage of demographic information and browser IP footprints occurs in a Supabase PostgreSQL free/cold instance 💓 , which may require a reload to warm up if inactive. The management of quizzes, questions, and embedding settings is facilitated through the Supabase backend. While there is currently no backend in place for managing quizzes and questions, the necessary data is already stored in Supabase, making the implementation of a backend a feasible next step.
