/reactjs-types-midwinter

react와 typescript로 만든 관람 티켓 기록 어플리케이션 (2021. 04-05)

Primary LanguageTypeScript

WinterTicket

프로젝트 주제

  • 공연 관람 기록 서비스

주요 기술 스택

Front-end

  1. ReactJS
  2. TypeScript(JS ES6+)
  3. Redux(Redux-saga)
  4. EmotionJS(css)
  5. HTML

기타 라이브러리

  1. axios
  2. react-router
  3. react-router-dom
  4. craco
  5. dayjs
  6. immer
  7. redux-hook-form
  8. redux-persist
  9. recharts
  10. dev dependencies(eslint, prettier, husky, lint-staged, redux-devtools-extension)

Back-end

  1. NestJS(Node.js 프레임워크)
  2. MongoDB

MVP

  1. 메인(달력) 페이지에서 월별 관람 기록 보기
  2. 관람 티켓 추가, 변경, 삭제 기능
  3. 티켓 추가시 구글 search api 이용하여 포스터 이미지 가져오기
  4. 통계 페이지에서 배우별 통계 / 관람 회수, 금액 별 통계 차트 구현
  5. 로그인 기능 구현

SreenShot

winter ticket 메인화면6월

winter ticket 사이드메뉴

winter ticket 배우 통계

winter ticket 관람횟수와 금액 통계

winter ticket 티켓 화면

winter ticket 티켓 입력 화면

winter ticket 이미지 검색 화면

winter ticket 티켓 수정 화면