GitHub 항공 구축

GitHub Airlines 구축: 2시간 만에 만드는 재미있는 사이드 프로젝트 ✈️

안녕하세요 여러분! 오늘 저는 제가 단 몇 시간 만에 완성한 재미있는 작은 프로젝트를 공유하고 싶습니다. GitHub 프로필을 멋진 탑승권으로 바꿔주는 웹 앱인 GitHub Airlines입니다. 항공을 주제로 한 GitHub 통계가 왜 지루해야 할까요? ?️

영감 ✨

GitHub에서 통계를 백만 번째로 보느라 미루던 순간을 아시나요? 글쎄요, 저는 "이 숫자가 탑승권처럼 보이면 정말 멋지지 않을까?"라고 생각했습니다. 그리하여 GitHub Airlines가 탄생했습니다!

우리가 만든 것 ?️

GitHub Airlines는 다음을 수행하는 React 앱입니다.

• REST API를 사용하여 GitHub 통계를 가져옵니다
• 귀하의 데이터로 멋진 탑승권을 생성합니다
• 다양한 테마(또는 "티켓 클래스"라고 부름)가 포함되어 있습니다.
• 모바일과 데스크톱 모두에서 작동
• 프로필에 연결되는 적절한 QR 코드가 포함되어 있습니다

기술 스택 ?️

단순하면서도 현대적으로 유지했습니다.

• Vite React(아무도 느린 빌드를 할 시간이 없기 때문에)
• TypeScript(성가신 버그를 잡기 위해)
• Tailwind CSS(멋쟁이 없이도 예쁘게 만들기)
• GitHub REST API(모든 멋진 데이터의 소스)
• Lucide React(멋진 아이콘을 위한)

빌드 프로세스?

1. 재단 설립

먼저 Vite React TypeScript 프로젝트를 시작하고 실행했습니다. Vite는 빠른 개발에 탁월합니다. 속도가 적절합니다!

2. GitHub API 통합

REST API를 사용하여 단순함을 유지했습니다. 인증이 필요 없고 바로 공개 데이터를 가져오기만 하면 됩니다.

const fetchGitHubData = async (username: string) => {
  const [userResponse, reposResponse] = await Promise.all([
    fetch(`https://api.github.com/users/${username}`),
    fetch(`https://api.github.com/users/${username}/repos`)
  ]);
  // Transform the data into boarding pass format
};

3. 탑승권 디자인

이거 재미있었어요! Tailwind CSS를 사용하여 적절한 항공권 모양을 만들었습니다.

• 상단 배너 이동(왜 안되나요?)
• 프로필에 연결되는 QR 코드
• 다양한 GitHub 통계에 대한 다양한 섹션
• 선택할 수 있는 다양한 테마

4. 반응형으로 만들기

휴대폰에 맞지 않는 탑승권을 좋아하는 사람은 없겠죠?

배운 교훈?

1. 간단하게: 더 많은 기능을 추가할 수 있었지만 때로는 적은 것이 더 좋습니다
2. 디자인 우선: 디자인에 대한 명확한 비전이 있으면 개발이 훨씬 원활해집니다
3. 모바일 우선: 처음부터 항상 모바일 사용자를 생각하세요

직접 시도해 보세요! ?

GitHub 프로필을 탑승권으로 보고 싶으십니까? 라이브 데모를 확인하거나 소스 코드를 받아보세요.

다음은 무엇입니까? ?

이 작업은 2시간 밖에 걸리지 않았지만 추가할 수 있는 내용이 훨씬 더 많습니다.

• 더 많은 티켓 클래스(테마)
• 애니메이션 전환
• 업적 배지
• 비행 이력(커밋 이력)

참여하세요! ?

이 프로젝트는 완전한 오픈 소스이므로 여러분의 참여를 환영합니다! 새로운 기능 추가, 버그 수정, 피드백 제공 등 모든 것이 도움이 됩니다!

---

GitHub API로 재미있는 프로젝트를 구축해 보셨나요? 아니면 GitHub Airlines을 더욱 좋게 만들기 위한 아이디어가 있나요? 아래에 의견을 남겨주세요. 여러분의 생각을 듣고 싶습니다!

코딩에는 한계가 없다는 점을 기억하세요! ✈️

webdev #typescript #react #github #오픈소스

위 내용은 GitHub 항공 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!