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

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

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

프로젝트 소개

---

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

🥈팀원 소개 🧑‍💻

J006 강재민 뱃살과 실력이 비례하고 싶은 프론트엔드 개발자 이력서 바로가기 깃헙 바로가기 💻

J013 공윤배 항상 즐겁게 개발하는 개발자 이력서 바로가기 깃헙 바로가기 💻

J038 김상훈 불편함을 불편해할 줄 아는 프론트엔드 개발자 이력서 바로가기 깃헙 바로가기 💻

J054 김준태 같이의 가치를 아는 프론트엔드 개발자 이력서 바로가기 깃헙 바로가기 💻

👨‍💻 역할

---

아이디	이름	역할	해결 이슈
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

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