유튭 쇼츠보다가 '어...?' 하면서 만들어봤습니다.

거창한 사업소개서 마냥 그런건 없습니다.

멍 때리면서 유튜브 보는데 바이러스, 감염, 확진자 이런게 보이는거에요. (알고리즘)

보다보니 '어...?' 하면서 기존의 것들 있겠지만

전세계 통틀어서 현재 인기있는 바이러스 감염병 리스트를 정하고

• 그것의 발원지로 부터 퍼저나가는 형태

• 국가별로 확진자(감염자) 숫자는 어떤지

그래서 단순한 Virus Dashboard랍시고 보여주는 걸 만들었습니다.

그리고 우측 패널에서 특정 국가를 클릭하면 해당 국가가 부드럽게 줌인 되면서

해당 바이러스가 유입(파란색), 전파(주황)를 알 수 있습니다.

URL : https://virus-dashboard-bay.vercel.app/

관련 스크린샷

그리고 아래는 어드민 대시보드인데요,

일일이 DB로 확인하기 귀찮아서 DB의 해당 컬럼을 어드민 페이지 따로 만들고 각각 연결해서 간편하게 확인할 용도로 만들었습니다. (편하긴 하네요.)

[ 향후 과제 ]

지도에서의 저 선들이 로컬에서는 흐르는 듯한 애니메이션 적용이 되는데 실제 라이브에서는 적용이 안되서 몇번 삽질하다가 일단 홀드 했으나 ㅠㅠ 어떻게든 구현은 해놓을 생각;;;

다른거 추가할게 뭐 있는지는..조금 더 생각해봐야죠 =ㅂ=;;;

여기서 스스로 생각하기에 확장성이

1. 여행안전점수랍시고 꾸며서 이것을 API형태로 제공할 수 있다면?

2. 임베드 위젯 형태로도 제공이 가능하다면?

3. 이것을 템플릿화 해서 누군가에게 제공하거나?? (판매도 기대...해볼 수 있음직 하지만 뭐 별로 대단한게 아닌지라;;;

사용한 스킬

1. React(Router, styled-component)

2. Next.js

3. Leaflet(원래 mapbox 사용할려고 했으나 유료라서 일단 패스했습니다;;)

4. Lucide

5. Vercel

6. Recharts

7. Tailwind

8. Python

9. GSAP(아주 약간)

10. Supabase

제작에 걸린시간은 8시간 정도 되는거 같습니다.
(해외에 거주중이라 애들 아침에 등교 시켜주러 차로 모셔다 드리고, 점심셔틀 해주고, 하교시간에 또 데리러 가드려야 하고 저녁에 공부 봐주고 해서 시간이 좀 소요 되었어요. (애가 3명. ㅎㅎ))

=== 내용추가

현재 어느정도 생각한 그림이 나와서...여튼 나오면, 기술먼서 작성하는 버릇이 있습니다.

https://www.notion.so/Virus-Dashboard-Widget-Pro-Technical-Specification-a2a4da106f984cff8f8b69721bb4beaf?source=copy_link