imbingz / React-Typescript-Quiz-App

A responsive Trivia Quiz App that allows the user to set the number of questions and the difficult levels (easy, medium, hard), gives the user immediate feedback and tracks the user's performance.

Home Page:https://main.d3ray8px57oaq.amplifyapp.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

A Trivia Quiz App Built with React JS and TypeScript


github-follow project-languages-used project-top-language license node.js npm

Table of Content

Project Links

Screenshots-Demo

screenshot-demo1

Project Objective

* Use Reactjs and TypeScript to build a quiz app. 
* The app is mobile-reponsive 
* User can set the number of questions and the difficult levels (easy, medium, hard)
* User will be notified whether he/she has chosen the correct answer, if not, the correct answer will be highlighted. 
* There is also a score to track the performance (1 point for each correct answer. No penalties for incorrect answers.)

User Story

As a user, I want to play trivia quiz to expand my trivia knowledge. I want to be able to set the number of question stems and the difficulty levels and have instant feedback on whether I have chosen the right answer. If I chose the wrong answer, I also want to know which one is the right answer.

Technologies

Reactjs, Typscript, Styled Components, AWS Amplify

Installation

Access to GitHub.com and a code editor such as vscode is necessary. Click the GitHub link provided above to the APP REPO. Click on the green button that says Clone or Download and Choose how you would like to download: using the SSH/HTTPS keys or download the zip file. If using SSH/HTTPS Key: You will copy the link shown and open up either terminal (mac: pre-installed) or gitbash (pc: must be installed). Once the application is open, you will type git clone paste url here. If using Download ZIP: Click on Download Zip. Locate the file and double click it to unzip the file. Locate the unzipped folder and open it.

Usage

In order to use this APP, you need terminal (mac: pre-installed) or gitbash (pc: must be installed). You also need to download and install node.js and npm or yarn package manager. Open the cloned REPO in your favorite code editor, and then in terminal, enter the command “npm i“ or “yarn add” to install the dependencies. If you just want to try how the app works, you can go to the link here

Credits and Reference

The following links have helped me with this project.
Background Image by Ashley Batz on Unsplash
React Documentation on Typescript
Styled Component
Travia API
Amazon Amplify Hosting FreeCodeCamp YouTube Channel

Tests

npm test

Author Contact

Contact the author with any questions!
Github link: imbingz
Email: contact.bingz@gmail.com

License

This project is MIT licensed.

Copyright © 2020 BING Z


This README was built with ❤️ by BING Z

About

A responsive Trivia Quiz App that allows the user to set the number of questions and the difficult levels (easy, medium, hard), gives the user immediate feedback and tracks the user's performance.

https://main.d3ray8px57oaq.amplifyapp.com/


Languages

Language:TypeScript 82.4%Language:HTML 17.6%