Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mshandev/react-quiz-app

This quiz web app is built using React JS. It can allow the user to select the criteria for their quiz from a list of options. The user can then proceed to answer the questions in the quiz and their performance will be tracked and shown in the scoreboard
https://github.com/mshandev/react-quiz-app

Last synced: 1 day ago
JSON representation

This quiz web app is built using React JS. It can allow the user to select the criteria for their quiz from a list of options. The user can then proceed to answer the questions in the quiz and their performance will be tracked and shown in the scoreboard

Awesome Lists containing this project

README 

        


       ✨  Quiz Web App  ✨







![Badge](https://img.shields.io/badge/Tech_Stack-HTML-orange) ![Badge](https://img.shields.io/badge/CSS-blue) ![Badge](https://img.shields.io/badge/React_Js-cyan)

 ![Badge](https://img.shields.io/badge/-Java_Script-yellow) ![Badge](https://img.shields.io/badge/Version-1.0-green) 








          Live Project : https://quiz-app-by-shan.netlify.app/







## Tech Stack :      



- **Frontend:** HTML,CSS,React Js, Java Script, Bootstrap, Chakra UI 

- **Version Control:** Git and GitHub

- **Hosting:** Netlify

- **Code Editor and tools**: VS Code



 



   
✨ Welcome to Quiz Web App ✨ 



## Table of Contents



    - Overview

    - UI of Website

    - Contribution Guideline



 



## Overview 🔨



This quiz web app is built using React JS. It can allow the user to select the criteria for their quiz from a list of options. The user can then proceed to answer the questions in the quiz and their performance will be tracked and shown in the scoreboard. Moreover, the app can be designed to be responsive and user-friendly.



  



## UI of the Website



![Screenshot (280)](https://user-images.githubusercontent.com/87645745/206394866-4e74fd37-3af4-4bca-8ebe-f3810598d869.png) 

### Home Page 



![image](https://user-images.githubusercontent.com/87645745/206397113-b70dc86a-c78c-4f6c-bf61-8183c4c07262.png)  

### Question Page 



![image](https://user-images.githubusercontent.com/87645745/206397461-168cfe8f-2cbe-4d5e-a268-3540baf69ca5.png) 

### Score Board Page 







## Setup Steps



- Go to directory

```

$ cd Quiz-App

```

- Install Dependency 

```

npm install

```

- Start LocalHost Server

```

npm run start

```

  



## Contribution Guidelines 🏗



 To start contributing, follow the below guidelines:



**1.** Fork [this](https://github.com/Mshandev/React-Quiz-App) repository.



**2.** Clone your forked copy of the project.



```

git clone https://github.com/Mshandev/React-Quiz-App

```



**3.** Navigate to the project directory :file_folder: .



```

cd Quiz-App

```



**4.** Add a reference(remote) to the original repository.



```

git remote add upstream Quiz-App.git

```



**5.** Check the remotes for this repository.



```

git remote -v

```



**6.** Create a new branch.



```

git checkout -b 

```



**7.** Perfom your desired changes to the code base.



**8.** Track your changes:heavy_check_mark: .



```

git add .

```



**9.** Commit your changes .



```

git commit -m "Relevant message"

```



**10.** Push the committed changes in your feature branch to your remote repo.



```

git push -u origin 

```



**11.** To create a pull request, click on `compare and pull requests`.



**12.** Add appropriate title and description to your pull request explaining your changes and efforts done.



**13.** Click on `Create Pull Request`.



**14** You did it! 🥳 Wait for your submission to be accepted and your PR to be merged.