실시간 암호화폐 데이터 시각화 웹 서비스 - CryptoGraph📊

• 부스트캠프 멤버십 웹 7기 그룹 프로젝트 Web35-teamMars

• 배포 URL: 배포 URL 바로가기
• 팀 Notion:Notion 바로가기
• 팀 Wiki: Wiki 바로가기

프로젝트 소개

• CryptoGraph는 Upbit Open API, CoinMarketCap API를 이용하여 암호화폐 데이터들을 차트로 시각화하는 서비스입니다.
  
• 트리맵 차트, 러닝 바 차트를 통해 전체적인 코인 시황을 파악할 수 있습니다. 각 코인을 선택하여 그 코인의 가격 추이를 캔들 차트로 확인할 수 있습니다.
  
• 반응형 디자인을 적용하여 여러 크기의 디바이스에 대응합니다.

🥈팀원 소개 🧑‍💻

### J006 강재민 ### 뱃살과 실력이 비례하고 싶은 프론트엔드 개발자 [이력서 바로가기](https://www.notion.so/010dc5a42f8b4c08a2f2592682eba48c) [깃헙 바로가기 💻](http://github.com/rkdwoals159)

### J013 공윤배 ### 항상 즐겁게 개발하는 개발자 [이력서 바로가기](https://kongyb.notion.site/d9ecf75afb6245b9b558e3e7db6dc1dd) [깃헙 바로가기 💻](https://github.com/kongyb)

### J038 김상훈 ### 불편함을 불편해할 줄 아는 프론트엔드 개발자 [이력서 바로가기](https://www.notion.so/009309ae05974be68be9ad7beded7285) [깃헙 바로가기 💻](https://github.com/baldwinIV)

### J054 김준태 ### 같이의 가치를 아는 프론트엔드 개발자 [이력서 바로가기](https://www.notion.so/438ec182c25847df84ef53186a387fde) [깃헙 바로가기 💻](https://github.com/sronger)

👨‍💻 역할

📈 주요 기능

차트

1. 캔들차트

• 1분봉/5분봉/../1시간봉/일봉/주봉 등 캔들 기간을 변경할 수 있습니다.
  
• 차트를 일정 이상 드래그(패닝)하면 필요한 데이터를 prefetch합니다.
  
• 데스크탑에서는 마우스 휠로, 모바일에서는 핀치 줌을 통해 한 화면에 렌더되는 봉 갯수를 조절할 수 있습니다.

2. 트리맵 차트

• coinmarketcap API 정보를 전달하는 백엔드 서버 및 업비트 서버에 데이터를 요청하여, 실시간으로 데이터가 렌더링됩니다.
  
• 시가총액, 24시간 등락률(절댓값 내림차순, 내림차순, 오름차순), 거래량 등의 데이터를 트리맵 차트로 렌더링할 수 있습니다.
  
• 원하는 코인만 선택하여 그래프로 렌더링하는 것도 가능하며, 그래프의 코인 요소를 선택하면, 캔들 차트 페이지로 이동할 수 있습니다.

3. 러닝 바 차트

• coinmarketcap API 정보를 전달하는 백엔드 서버 및 업비트 서버에 데이터를 요청하여, 실시간으로 데이터가 렌더링됩니다.
  
• 시가총액, 24시간 등락률(절댓값 내림차순, 내림차순, 오름차순), 거래량 등의 데이터를 바 차트로 렌더링할 수 있습니다.
  
• 원하는 코인만 선택하여 그래프로 렌더링하는 것도 가능하며, 그래프의 코인 요소를 선택하면, 캔들 차트 페이지로 이동할 수 있습니다.

4. 반응형 지원 & 모바일 대응

• 적응형이 아닌 반응형을 지원해 모든 크기의 브라우저 사이즈에 대응합니다.
• 일정 width 이하로 줄어들면, 컴포넌트 배치가 모바일 모드로 변경됩니다.

📚 프로젝트 구조

📚 기술 스택

Environment setup

1. git clone https://github.com/boostcampwm-2022/Web35-CryptoGraph.git CryptoGraph

2. cd CryptoGraph

3. npm i api_server

4. npm i client

5. touch client/.env

6. NEXT_PUBLIC_SERVER_URL=http://localhost:{클라이언트 포트번호}

7. touch api_server/.env

8. COINMARKETCAP_API_KEY={코인마켓캡 API 키} (https://coinmarketcap.com/api/)

9. CLIENT_URL=http://localhost:{서버 포트번호}

10. 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