This repo contains a demo application for Azure Static Web Apps (Preview) which consists of a Trivia Game, backed by Open Trivia DB.
You can find a deployed version of the application at https://trivia-app.aaron-powell.com/.
To play to game, click "Start new game", enter your name, answer the questions and see how well you did. Each question will have 30 seconds until it times out and moved on to the next one. The questions are in the "hard" category of "Science and Technology" from Open Trivia DB.
The application consists ofr two components, a web front end and a serverless backend. All components are within this repo so you can run it all together.
The web front end is written using Create React App using the TypeScript template.
You'll find the code starting in the root of the git repo, with the code then residing within /src with each of the difference pages in the pages folder.
To communicate with the backend, Apollo Client for React is used, leveraging the React Hooks.
The backend is written using Azure Functions, using the TypeScript template, and exposes the data via GraphQL using Apollo Server for Azure Functions. Presently, there's no database backend, the data is stored temporarily in memory.
I did a live stream where we built the whole thing from scratch, you can watch it on YouTube
If you want to look at wats to expand the application, there's a few opportunities:
- Improve the UI
- Add a proper database backend, such as Cosmos DB's free tier
- Make the game multi-player. The data structures are designed for multi-player, but the application doesn't support it presently