🌐 90년대생의 밈 테스트 기능을 제공하는 웹 서비스입니다.
PROJECT PERIOD: 2020.11.21 ~ 2020.11.22, 2021.01.25 ~ 2021.02.09
💡 메인
- [1] 자신의 출생연도를 입력하고 테스트를 시작한다.
💡 테스트
- [1] 90년대 유행했던 짤을 보고 정답을 맞히며 테스트를 진행한다.
💡 결과
-
[1] 테스트 결과에 따라 레벨을 4단계로 나누어 자신의 레벨(점수 및 연령대별 상위 퍼센트)을 보여준다.
-
[2] 레벨에 따른 영상을 추천해준다!
-
[3] 테스트를 처음부터 다시 진행하거나 최종 결과를 공유할 수 있다.
public
┣ images
┃ ┣ Question_1.png
┃ ┣ ...
┃ ┗ result-background.png
┣ favicon.ico
┣ index.html
┗ meta-image.png
src
┣ assets
┃ ┣ icons
┃ ┃ ┣ btn-retry.svg
┃ ┃ ┣ ...
┃ ┃ ┗ result-sketchbook.svg
┃ ┗ images
┃ ┃ ┣ landing.png
┃ ┃ ┣ ...
┃ ┃ ┗ result-sketchbook.png
┣ components
┃ ┣ style
┃ ┃ ┗ Landing.scss
┃ ┗ Background.js
┣ lib
┃ ┣ api
┃ ┃ ┗ Answer.js
┃ ┗ data
┃ ┃ ┗ Question.js
┣ pages
┃ ┣ LandingPage.js
┃ ┣ QuestionPage.js
┃ ┗ ResultPage.js
┣ App.css
┣ App.js
┣ index.css
┣ index.js
┗ reportWebVitals.js
Front-End | Back-End | DataBase | Front-Server | Back-Server | Tool |
---|---|---|---|---|---|
JavaScript React Axios |
JavaScript Node.js |
MySQL | Vercel | AWS EC2 | Git Figma Notion |
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"axios": "^0.21.0",
"node-sass": "4",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"web-vitals": "^0.2.4",
"styled-components": "^5.2.1"
git clone https://github.com/SOPT27-JOB/IN-CYWORLD-FRONT.git
yarn
yarn start
김민지 |
김정욱 |
안채린 |
---|