500개 이상의 AI 도구를 큐레이션한 무료 디렉토리 'BroFindAI'를 만들었습니다
I built a free AI tools directory with 500+ curated tools — brofindai.com
핵심 요약
500개 이상의 AI 도구를 모아놓은 무료 디렉토리 사이트 'BroFindAI'를 직접 개발하여 공유함.
- 기술 스택 — Next.js 14, TypeScript, Tailwind, Firebase, Cloudflare Pages를 활용해 구축함.
- 데이터 수집 — Python과 BeautifulSoup을 사용하여 GitHub Awesome 리스트에서 도구 정보를 자동 수집함.
- UI 디자인 — Linear.app 스타일의 다크 모드와 마우스 추적 스포트라이트 효과를 구현함.
- 개발 도구 — Claude Code와 Cursor를 사용하여 대부분의 기능을 효율적으로 개발함.
안녕 r/vibecoding,
500개 이상의 도구를 큐레이션한 AI 도구 디렉토리 'BroFindAI'를 만들었어.
어떻게 만들었는지 알려줄게:
스택:
- Next.js 14 + TypeScript + Tailwind
- Firebase (Firestore + Google Auth)
- Cloudflare Pages
구현 방식:
데이터 — Python 스크레이퍼와 BeautifulSoup을 사용해 GitHub Awesome 리스트에서 정보를 가져옴. 이름과 설명을 키워드로 매칭해 도구를 자동 분류하고 tools.json으로 출력함.
UI — Linear.app 스타일의 다크 모드. onMouseMove와 CSS 변수를 ::before radial-gradient에 전달해 카드에 마우스 추적 스포트라이트 효과를 줌.
검색 — tools.json을 대상으로 클라이언트 사이드 필터링. 검색 상태는 useSearchParams를 통해 URL에 저장되어 공유 가능함.
인증 및 북마크 — Firebase Google Auth 사용. 북마크는 사용자별 savedTools 필드에 arrayUnion / arrayRemove를 사용해 Firestore에 저장함.
가장 큰 문제 — Firebase Admin SDK가 Cloudflare의 엣지 런타임에서 실행되지 않음. 서비스 계정 자격 증명을 사용하는 클라이언트 SDK로 전환해 해결함.
대부분 Claude Code와 Cursor를 사용해 개발함.
피드백 환영해!
