비전문 개발자가 Claude AI와 Claude Code를 사용해 GitHub Codespaces에서 실시간 MLB 대시보드를 구축합니다

비개발자가 기능성 MLB 대시보드를 구축한 방법

최소한의 코딩 경험(고등학교 HTML/CSS 지식만 있음)을 가진 Reddit 사용자가 Claude AI 도구를 사용하여 실시간 MLB 대시보드를 성공적으로 만들었습니다. 이 사용자는 GitHub, 저장소, 배포, 프레임워크 또는 npm install과 같은 기본 명령에 대한 지식 없이 시작했습니다.

Claude 도구를 통한 개발 과정

사용자는 두 가지 Claude 제품을 결합했습니다: 아이디어 구상을 위한 Claude 채팅과 구현을 위한 GitHub Codespaces의 Claude Code. 작업 흐름은 다음과 같았습니다:

• Claude Code에 직접 붙여넣을 수 있는 전체 빌드 지침 페이지를 생성하기 위해 Claude 채팅 사용
• Claude가 Node.js 설정을 안내하고 터미널이 무엇인지 설명하도록 함
• 개발 중 무언가 고장났을 때 자동 수정 사항 받기
• 저장소 설정 및 Claude Code를 GitHub Codespaces에 연결하는 지침 따르기
• 웹사이트 데이터를 스크래핑하기 위해 GitHub Actions 설정
• 호스팅을 위해 Vercel 연결

대시보드 기능

mlbhq.vercel.app에 있는 결과 대시보드에는 다음이 포함됩니다:

• 경기가 활성화되었을 때 실시간 경기 점수
• 팀의 다음 예정 경기 표시
• 드롭다운 경기 통계가 포함된 최근 5경기
• 이전 시즌의 팀 통계 및 투수 통계(새 시즌이 시작되면 업데이트됨)
• 순위 및 로스터 정보
• 각 팀의 부상 보고서 페이지를 스크래핑하여 선수 상태 및 예상 복귀 날짜를 보여주는 부상 보고서

사용자는 이 사이트가 양키스에 대한 모든 정보를 포함한 대시보드를 만들기 위해 특별히 구축되었지만, 여러 팀을 다루는 것으로 보인다고 언급합니다. 그들은 MLB 데이터 및 API 접근 사용에 대한 잠재적 법적 문제를 인정합니다.

개발 환경 고려 사항

사용자는 GitHub Codespaces만 계속 사용할지 VS Code를 다운로드할지 고려 중이며, 사전 경험이 없음에도 Codespaces가 이 프로젝트에 충분한 개발 환경을 제공했다고 제안합니다.