Code Monkey home page Code Monkey logo

aswa-trivia-app-fork's Introduction

Trivia App Demo

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/.

How to play

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.

Anatomy of the app

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.

Web Front End

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.

Serverless Backend

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.

Learn how to build it

I did a live stream where we built the whole thing from scratch, you can watch it on YouTube

Live Stream banner

Additional Exercises

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

aswa-trivia-app-fork's People

Contributors

aaronpowell avatar azureadvocatebit avatar dependabot[bot] avatar jsharmamsft avatar msftgits avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.