실시간 암호화폐 데이터 시각화 웹 서비스 - CryptoGraph📊
- 부스트캠프 멤버십 웹 7기 그룹 프로젝트
Web35-teamMars
프로젝트 소개
- CryptoGraph는 Upbit Open API, CoinMarketCap API를 이용하여 암호화폐 데이터들을 차트로 시각화하는 서비스입니다.
- 트리맵 차트, 러닝 바 차트를 통해 전체적인 코인 시황을 파악할 수 있습니다. 각 코인을 선택하여 그 코인의 가격 추이를 캔들 차트로 확인할 수 있습니다.
- 반응형 디자인을 적용하여 여러 크기의 디바이스에 대응합니다.
🥈팀원 소개 🧑💻
👨💻 역할
아이디 |
이름 |
역할 |
해결 이슈 |
J006 |
강재민 |
Running Bar 차트 개발, 상단바 검색창 자동완성 적용 |
github |
J013 |
공윤배 |
캔들차트 개발, 실시간 코인정보 컴포넌트 개발 |
github |
J038 |
김상훈 |
레이아웃 마크업 제작 및 미디어 쿼리 활용한 반응형 적용, 캔들차트 개발, 프로젝트 리딩 |
github |
J054 |
김준태 |
트리맵 차트 개발, 코인 선택 컴포넌트 개발 |
github |
📈 주요 기능
차트
1. 캔들차트
- 1분봉/5분봉/../1시간봉/일봉/주봉 등 캔들 기간을 변경할 수 있습니다.
- 차트를 일정 이상 드래그(패닝)하면 필요한 데이터를 prefetch합니다.
- 데스크탑에서는 마우스 휠로, 모바일에서는 핀치 줌을 통해 한 화면에 렌더되는 봉 갯수를 조절할 수 있습니다.
2. 트리맵 차트
- coinmarketcap API 정보를 전달하는 백엔드 서버 및 업비트 서버에 데이터를 요청하여, 실시간으로 데이터가 렌더링됩니다.
- 시가총액, 24시간 등락률(절댓값 내림차순, 내림차순, 오름차순), 거래량 등의 데이터를 트리맵 차트로 렌더링할 수 있습니다.
- 원하는 코인만 선택하여 그래프로 렌더링하는 것도 가능하며, 그래프의 코인 요소를 선택하면, 캔들 차트 페이지로 이동할 수 있습니다.
3. 러닝 바 차트
- coinmarketcap API 정보를 전달하는 백엔드 서버 및 업비트 서버에 데이터를 요청하여, 실시간으로 데이터가 렌더링됩니다.
- 시가총액, 24시간 등락률(절댓값 내림차순, 내림차순, 오름차순), 거래량 등의 데이터를 바 차트로 렌더링할 수 있습니다.
- 원하는 코인만 선택하여 그래프로 렌더링하는 것도 가능하며, 그래프의 코인 요소를 선택하면, 캔들 차트 페이지로 이동할 수 있습니다.
4. 반응형 지원 & 모바일 대응
- 적응형이 아닌 반응형을 지원해 모든 크기의 브라우저 사이즈에 대응합니다.
- 일정 width 이하로 줄어들면, 컴포넌트 배치가 모바일 모드로 변경됩니다.
📚 프로젝트 구조
📚 기술 스택
Environment setup
-
git clone https://github.com/boostcampwm-2022/Web35-CryptoGraph.git CryptoGraph
-
cd CryptoGraph
-
npm i api_server
-
npm i client
-
touch client/.env
-
NEXT_PUBLIC_SERVER_URL=http://localhost:{클라이언트 포트번호}
-
touch api_server/.env
-
COINMARKETCAP_API_KEY={코인마켓캡 API 키}
(https://coinmarketcap.com/api/)
-
CLIENT_URL=http://localhost:{서버 포트번호}
-
npm run client/build
실행방법
Web Server Run
터미널 1
cd CryptoGraph
npm run start api_server
Web Client Server Run
터미널 2
cd CryptoGraph
npm run start client