r/vibecoding•3개월 전•28•20
FIFA 월드컵을 위한 인터랙티브 실시간 대진표를 직접 만들었습니다. 끔찍한 공식 앱은 이제 안녕.
I vibed an interactive, live updated overview of the FIFA World Cup to try and solve my own problem of not having to use the god-awful FIFA app.
핵심 요약
공식 앱의 불편함을 해결하고자 직접 만든 실시간 월드컵 대진표 웹사이트 공유 및 기술 스택 소개.
- 인터랙티브 기능 — 피그마 스타일의 실시간 이모지 커서와 토너먼트 예측 기능 제공함
- 기술 스택 — 바닐라 자바스크립트, Supabase Realtime, Football-data.org API를 활용함
- 데이터 최적화 — Netlify CDN 캐시를 통해 API 호출을 60초 주기로 제한하여 트래픽 문제 방지함
- 사용자 피드백 — 실시간 데이터 업데이트 오류에 대한 버그 수정 및 성능 개선 논의함
토너먼트 전체를 한눈에 볼 수 있는 괜찮고 사용자 친화적인 방법을 찾을 수 없어서 직접 하나 만들었습니다. 방금 추가한 최신 기능은 실시간 이모지 커서(피그마 스타일)와 각 토너먼트 경기에 대한 크라우드 소싱 예측입니다. 다른 사람이 안 쓰더라도 저는 매일 사용해요 😅 피드백 주시면 감사하겠습니다!
사실 Fable이 나왔을 때(RIP) 이 초기 버전을 한 번에 만들었는데, 거의 90%가 거기서 만들어졌어요!
설정은 아주 기본적인 정적 바닐라 자바스크립트 앱입니다.
- 이모지 커서를 위한 Supabase Realtime (무료 티어가 놀라울 정도로 넉넉함)
- 실시간 데이터와 점수를 위한 Football-data.org
- 호스팅, 함수, 점수 업데이트를 위해 Netlify도 사용했습니다 (네, 올드스쿨인 거 알아요).
https://www.reddit.com/submit/?source_id=t3_1uh4hz7&composer_entry=crosspost_prompt
