{"id":21939021,"url":"https://github.com/jeffreyquan/quizy-client","last_synced_at":"2025-04-22T14:49:43.347Z","repository":{"id":44279994,"uuid":"226879389","full_name":"jeffreyquan/quizy-client","owner":"jeffreyquan","description":"React front end for clone of Kahoot!","archived":false,"fork":false,"pushed_at":"2022-02-10T20:36:50.000Z","size":12901,"stargazers_count":16,"open_issues_count":3,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T16:11:08.502Z","etag":null,"topics":["express","material-ui","mongodb","mongoose","react","scss","socket-io"],"latest_commit_sha":null,"homepage":"https://jeffreyquan.github.io/quizy-client/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jeffreyquan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-12-09T13:34:56.000Z","updated_at":"2025-03-24T20:34:38.000Z","dependencies_parsed_at":"2022-08-29T17:01:55.091Z","dependency_job_id":null,"html_url":"https://github.com/jeffreyquan/quizy-client","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffreyquan%2Fquizy-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffreyquan%2Fquizy-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffreyquan%2Fquizy-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jeffreyquan%2Fquizy-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jeffreyquan","download_url":"https://codeload.github.com/jeffreyquan/quizy-client/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250263166,"owners_count":21401809,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["express","material-ui","mongodb","mongoose","react","scss","socket-io"],"created_at":"2024-11-29T02:16:27.609Z","updated_at":"2025-04-22T14:49:43.309Z","avatar_url":"https://github.com/jeffreyquan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Quizy\n\n## Table of Contents\n* [Introduction](#introduction)\n* [How to get started](#how-to-get-started)\n* [Motivation](#motivation)\n* [Technologies](#technologies)\n* [Key Features](#key-features)\n* [Future Developments](#future-developments)\n* [Screenshots](#screenshots)\n\n\u003ca name=\"introduction\"\u003e\u003c/a\u003e\n## Introduction\n\nThis project is a multiplayer quiz app inspired by [Kahoot!](https://kahoot.com/). Kahoot! is a game-based learning platform that is interactive and makes learning fun. It was used during the Software Engineering Immersive course I had undertaken.\n\nThe gameplay is simple:\n* A quiz, created by a user, is hosted by a teacher or another person, which generates a game PIN. The game is shown on a common screen.\n* Players connect to the game using the PIN.\n* The common screen is used to display the questions that the players answer.\n* Points are awarded for correct answers. Also, the more timely a player answers correctly, the more points the player receives.\n* Scoreboards are updated and shown after every question.\n* When the game ends (i.e. there are no questions left), a Top 3 podium finish is shown and each player receives their own rank.\n\n\u003ca name=\"how-to-get-started\"\u003e\u003c/a\u003e\n## How to get started\n\n#### Using my site\n1. Visit https://jeffreyquan.github.io/quizy-client/ and follow the links to host one of the existing quizzes or create your own.\n2. Click on \"Host Game\", which will generate a game that'll show a game PIN for other players to use their own devices to join the game. Hosting a game works best on a projector but will also work with any desktop or laptop screen.\n3. Test it out with this simple math quiz. Host using this [link](https://jeffreyquan.github.io/quizy-client/#/quizzes/5df46a5211425013c645572e) and join using this [link](https://jeffreyquan.github.io/quizy-client/).\n\n#### To test locally\nFeel free to clone this repository.\nThe link to the server repository is: https://github.com/jeffreyquan/quizy-server.\n\nAfter cloning:\n\n**In the client root directory in the terminal:**\n1. Run `npm install` and\n2. Run `PORT=3333 npm run start`\n\nThis will run using our server which was deployed to Heroku. To run the back-end server locally, change to Heroku links to http://localhost:3000/ and run the following:\n\n**In the server root directory in the terminal:**\n1. Run `npm install` and\n2. Run `npm run start:dev`\n\n\u003ca name=\"motivation\"\u003e\u003c/a\u003e\n## Motivation\n\nI wanted to build something interactive and fun, that many users can be involved with at the same time in the same location. Furthermore, I loved the idea of a learning-based game that made it easier for students to learn.\n\n\u003ca name=\"technologies\"\u003e\u003c/a\u003e\n## Technologies\n\nThis project is created with:\n\n* [React v16.12.0](https://reactjs.org/)\n* [Express v4.17.1](https://expressjs.com/) - Node.js web application framework\n* [Mongoose v5.7.14](https://mongoosejs.com/)\n* [MongoDB](https://www.mongodb.com/)\n* [socket.io](https://socket.io/)\n* [SCSS v4.13.0](https://sass-lang.com/)\n* [Material UI](https://material-ui.com/) - a React framework for styling\n\n## Packages (React)\n\n* [axios](https://github.com/axios/axios) - used for requests to the Express API\n* gh-pages - used to deploy the React front-end\n* [Google fonts](https://github.com/google/fonts)\n* [query-string](https://github.com/sindresorhus/query-string)\n\n## Packages (Node)\n\n* [body-parser](https://github.com/expressjs/body-parser)\n* [cors](https://github.com/expressjs/cors)\n* [express](https://github.com/expressjs/express)\n* [mongoose](https://github.com/Automattic/mongoose)\n* [socket.io](https://github.com/socketio/socket.io)\n* [nodemon](https://github.com/remy/nodemon)\n\n\u003ca name=\"key-features\"\u003e\u003c/a\u003e\n## Key Feaures\n* **Simple creation of quiz** - simple quiz creation form that takes 4 multiple choice answers for each question. You can create a simple quiz to host within minutes.\n* **Publicly available quizzes to host** - quizzes that other people have created can be hosted\n* **Multiplayer quiz games** - friendly competition between players\n\n\u003ca name=\"future-developments\"\u003e\u003c/a\u003e\n## Future Developments\nThese are following features I would like to add:\n* **Validation** - at the moment, quizzes can be created without a name and category. This can lead to bugs. I will be adding validation across the whole app on the front-end and back-end.\n* **Edit questions** - edit questions that have already been added during the creation of quizzes.\n* **End quiz** - end quiz button that allows the host to end a quiz early (for example, when a class is about to end and the quiz needs to finish).\n* **Custom time for each question** - default time set for each question is 20 seconds. I would like to allow the creation of a custom time, most likely increments of 10 seconds.\n* **True or false questions** - default answer options are 4 multiple choice answers. I would like to allow true or false questions.\n* **Images to supplement questions** - allowing users to add images to supplement questions when creating a quiz. This will be shown to players during a game.\n\nThere's so much more to add! Check out [Kahoot!](https://kahoot.com/) to test out their amazing platform.\n\n\u003ca name=\"screenshots\"\u003e\u003c/a\u003e\n## Screenshots\n\n### Create a quiz\n![Create A Quiz - Details](/screenshots/create-quiz-details.png)\n![Create A Quiz - Questions](/screenshots/create-quiz-questions.png)\n![Create A Quiz - Confirmation](/screenshots/create-quiz-confirmation.png)\n\n### All quizzes\n![Quizzes - Index](/screenshots/quizzes-index.png)\n\n### Quiz preview\n![Quiz - Preview](/screenshots/quiz-preview.png)\n\n### Game Play\n\n#### Joining a game\n| Host - Empty Lobby | Player - Join Game with PIN |\n|:---:|:---:|\n| ![Lobby - Empty](/screenshots/host-lobby-empty.png) | ![Player - Join Game](/screenshots/player-join-game.png) |\n\n#### After players have entered\n| Host - Filled Lobby | Player joined successfully |\n|:---:|:---:|\n| ![Lobby - Players Joined](/screenshots/host-lobby-players-joined.png) | ![Player - Instructions](/screenshots/player-instructions.png) |\n\n#### Start of game\n| Host previewing quiz | Player getting ready for first question |\n|:---:|:---:|\n| ![Quiz Preview](/screenshots/host-quiz-preview.png) | ![Player - Get Ready](/screenshots/player-get-ready.png) |\n\n#### Question preview\n| Host previewing question | Player preview showing question number |\n|:---:|:---:|\n| ![Host - Question Preview](/screenshots/host-question-preview.png) | ![Player - Question Preview](/screenshots/player-preview.png) |\n\n#### Question and Answers\n| Host showing the question and answer options | Player with answer buttons |\n|:---:|:---:|\n| ![Host - Question Block](/screenshots/host-question-block.png) | ![Player - Answers](/screenshots/player-answers.png) |\n\n#### Results\n| Host shows how many have selected each answer and the correct answer | Player is given correct or incorrect result, as well as rank and streak (if correct) |\n|:---:|:---:|\n| ![Host - Results](/screenshots/host-results.png) | ![Player - Result - Correct](/screenshots/player-result-correct.png) |\n\n#### Scoreboard\n##### Host shows scoreboard which gives the Top 5 ranked players and their scores\n![Host - Scoreboard](/screenshots/host-scoreboard.png)\n\n#### End of game\n| Podium finish | Player's final rank |\n|:---:|:---:|\n| ![Host - Podiums](/screenshots/host-podiums.png) | ![Player - Final Rank](/screenshots/player-final-rank.png) |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeffreyquan%2Fquizy-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjeffreyquan%2Fquizy-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjeffreyquan%2Fquizy-client/lists"}