← 기술 목록으로
ReactTypeScriptViteTailwindCSSi18nSupabaseCanvasThree.js
0작업자의 메모
Vibekits는 큰 기능 하나보다 작은 도구를 실제 서비스 형태로 끝까지 다듬어보는 프로젝트입니다. 랜덤 도구와 게임은 가벼워 보이지만 다국어·상태 관리·공유·랭킹을 붙이면 생각보다 운영 경계가 많아집니다.
React/Vite 구조와 게임 로직 분리, Supabase-ready 경계를 포트폴리오에서 볼 수 있게 했습니다.
1무엇을 만든 프로젝트인가
vibekits는 랜덤 결정 도구와 캐주얼 웹게임을 하나의 다국어 웹 서비스로 묶는 프로젝트입니다. README 기준 MVP에는 한국어·영어 라우트, roulette 도구, Flappy Bird 게임, Supabase Auth hook, 랭킹·광고·공유 placeholder가 포함됩니다.
2아키텍처
Experience
사용자언어별 route에서 도구·게임 실행
React Router · i18n한국어/영어 route와 리소스 분기
Product Surface
Random toolsroulette 등 결정 도구 UI와 공유 흐름
Game pagesReact가 화면, 광고, 랭킹, lifecycle을 담당
Pure game enginesloop, input, collision, scoring, rendering은 React 밖에서 관리
Service Layer
Supabase-ready auth로그인 hook과 랭킹 연동 준비
Ranking · Ads · Share랭킹 placeholder, 광고 영역, 공유 버튼
Testsroute, i18n, ranking, game engine 경계 검증
핵심 경계는 React UI와 순수 게임 엔진을 분리해 게임 로직을 독립적으로 테스트·교체할 수 있게 둔 점입니다.
3기술 구조
- React 19, TypeScript, Vite, TailwindCSS, React Router 기반 웹 앱
- react-i18next 기반 다국어 라우팅과 리소스 구성
- Supabase-ready auth, ranking, share, ads 관련 컴포넌트와 테스트
- Canvas 게임과 3D/physics 의존성까지 확장 가능한 게임 구조
4엔지니어링 포인트
저장소 규칙은 React UI와 순수 게임 엔진 로직을 분리합니다. UI는 라우팅, 광고, 랭킹, 공유, 로그인 상태와 lifecycle을 담당하고 게임 엔진은 loop, input, collision, scoring, rendering, resource cleanup, local high score를 담당합니다.
5검증 기준
- 저장소에는 app routes, lazy loading, ads, analytics, i18n, ranking, Supabase config, game pages, pure game engine 관련 테스트가 확인됩니다.
- 게임 로직 파일은 React를 import하지 않는 구조가 유지되어야 합니다.
- 브라우저에 노출되는
VITE_* 변수에는 Supabase service-role secret을 넣지 않는 것이 안전 기준입니다.