https://github.com/simandrew/quiz-app-react
Quiz React App
https://github.com/simandrew/quiz-app-react
Last synced: about 1 year ago
JSON representation
Quiz React App
- Host: GitHub
- URL: https://github.com/simandrew/quiz-app-react
- Owner: SimAndrew
- Created: 2024-02-01T19:30:06.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-02-07T17:36:19.000Z (about 2 years ago)
- Last Synced: 2025-01-12T11:32:12.553Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://quizz-reactjs-app.netlify.app/
- Size: 71.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Quiz App React
---
### About:
A Quiz React application built with React. Contains 15 questions, for each correct answer you get points, for each wrong answer you get nothing. At the end of the quiz, you can view the statistics of the points received for the answers and the high score functionality.
The application fetches questions from `src/questions.json` deployed on [my-json-server.typicode.com](https://my-json-server.typicode.com/) .
You can try here: [quizz-reactjs-app.netlify.app](https://quizz-reactjs-app.netlify.app/)
---
### Sample task, photo:
- Right answer
- Wrong answer
- Finish the quiz. View total score
- src/questions.json contain 15 questions
```
{
"questions": [
{
"question": "Which is the most popular JavaScript framework?",
"options": ["Angular", "React", "Svelte", "Vue"],
"correctOption": 1,
"points": 10
},
]
}
```
---
### Technologies:
- [React JS](https://react.dev/)
- [Vite JS](https://vitejs.dev/), [ESLint](https://eslint.org/), [Prettier](https://prettier.io/)
- [Deploy src/questions.json on My JSON Server](https://my-json-server.typicode.com/SimAndrew/quiz-app-react/questions)
- [my-json-server.typicode.com](https://my-json-server.typicode.com/)
- [Deploying on Netlify](https://www.netlify.com/)
---
### Run the app:
- Clone a project: `git clone`
```
https://github.com/SimAndrew/quiz-app-react.git
```
- Open project code in your editor.
- Install the dependencies, enter into the terminal:
```
npm install
```
- Run the project, enter into the terminal:
```
npm run dev
```
- To run `src/questions.json` on `localhost:8000/questions` edit `src/components/App.jsx`
```
useEffect(function () {
// From My my-json-server.typicode.com :
fetch(
'https://my-json-server.typicode.com/SimAndrew/quiz-app-react/questions',
)
// To:
fetch('http://localhost:8000/questions')
.then((res) => res.json())
.then((data) => dispatch({ type: 'dataReceived', payload: data }))
.catch((err) => dispatch({ type: 'dataFailed' }));
}, []);
```
- To run enter into the terminal:
```
npx json-server --watch src/questions.json --port 8000
```