https://github.com/chan9yu/quiz_app

🧩 Quiz App with react
https://github.com/chan9yu/quiz_app

cypress e2e-test github-actions github-pages jest react react-testing-library redux redux-saga storybook styled-components typescript vite vitest yarn

Last synced: about 2 months ago
JSON representation

🧩 Quiz App with react

• Host: GitHub
• URL: https://github.com/chan9yu/quiz_app
• Owner: chan9yu
• Created: 2023-10-31T11:43:42.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-11-07T14:55:11.000Z (about 1 year ago)
• Last Synced: 2023-11-08T13:25:40.257Z (about 1 year ago)
• Topics: cypress, e2e-test, github-actions, github-pages, jest, react, react-testing-library, redux, redux-saga, storybook, styled-components, typescript, vite, vitest, yarn
• Language: TypeScript
• Homepage: https://chan9yu.github.io/quiz_app/
• Size: 13.8 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 🧩 Quiz App

> Quiz App with react




## 🖼️ Thumbnail



  

  





  맨 위로



## 🔗 Link

- Quiz APP

- Story Book



  맨 위로



## 🔧 Tech Stack

- 

- 

- 

- 

- 

- 

- 

- 

- 

- 

- 

- 

- 



  맨 위로



## ✨ Features

- [x] 사용자는 `퀴즈 풀기` 버튼을 클릭하여 퀴즈 풀기를 시작할 수 있다.

- [x] 사용자는 문항에 대한 답안을 `4개 보기 중에 선택`할 수 있다.

- [x] 사용자는 답안을 선택하면 다음 문항을 볼 수 있다.

  - [x] 답안 선택 후 `다음 문항` 버튼을 볼 수 있다.

  - [x] 답안이 맞았는지 틀렸는지 바로 알 수 있다.

  - [x] 다음 문항 버튼을 클릭하여 다음 문항으로 이동할 수 있다.

- [x] 모든 문항을 다 풀면 사용자는 다음과 같은 결과 정보를 볼 수 있다.

  - [x] 퀴즈를 마칠 때까지 소요된 시간

  - [x] 정답 개수

  - [x] 오답 수

  - [x] 정 오답에 대한 비율을 차트로 표기

- [x] 오답 노트 기능



  맨 위로



## 🧪 Test

```shell

# Unit Test

yarn test

# E2E Test

yarn cypress open

```

### Unit Test

- `jest`과 `RTL(React-Testing-Library)` 대신 `vitest` 사용

- 컴포넌트가 의도적으로 동작을 잘 하는지 렌더링에 문제없는지 확인하기 위해 단위 테스트 진행

- 공통 유틸 함수들이 결함이 없는지 확인하기 위해 단위 테스트 진행

> vitest 최소한의 노력으로 vite 기반 프로젝트와 통합되며, 매우 빠른 장점이 있기때문에 사용하게 되었습니다.


> vitest는 jest에서 사용되는 대부분의 api를 지원합니다.

[vitest docs](https://vitest.dev/)

### E2E Test

- 기능 요구사항이 문제없이 개발되었는지 확인하기 위한 E2E 테스트 진행

- cypress를 통해 테스트 진행





  맨 위로



## 💾 BackEnd API

퀴즈에 대한 정보를 얻기위해 open API 사용

- [opentdb.com](https://opentdb.com/api_config.php)



  맨 위로



## 🚀 Getting Started

로컬환경에서 앱을 실행하는 방법입니다.

### Prerequisites

해당 앱을 실행시키기 위한 필수 조건 입니다.

1. yarn install

```shell

# yarn 설치

npm -g install yarn

```

2. node setup

```shell

# .nvmrc 기준 node version 설치

# nvm을 사용하지 않는다면 수동으로 노드버전을 맞춰주세요.

nvm use

```

### Installation

1. 프로젝트 클론

```shell

git clone https://github.com/chan9yu/quiz_app

```

2. 프로젝트 디렉토리로 이동

```shell

cd quiz_app

```

3. 종속성 설치

```shell

yarn install

```

4. 개발 서버 시작

```

yarn dev

```



  맨 위로