Vibekits — 다국어 랜덤 도구·캐주얼 웹게임
랜덤 의사결정 도구와 짧게 즐기는 브라우저 게임을 React·Vite 기반으로 묶은 개인 프로젝트입니다.
기간운영 중
대상 저장소vibekits
역할단독 개발·운영
ReactTypeScriptViteTailwindCSSi18nSupabaseCanvasThree.js
0작업자의 메모
Vibekits는 큰 기능 하나보다 작은 도구를 실제 서비스 형태로 끝까지 다듬어보는 프로젝트입니다. 랜덤 도구와 게임은 가벼워 보이지만 다국어·상태 관리·공유·랭킹을 붙이면 생각보다 운영 경계가 많아집니다.
React/Vite 구조와 게임 로직 분리, Supabase-ready 경계를 포트폴리오에서 볼 수 있게 했습니다.
1무엇을 만든 프로젝트인가
vibekits는 랜덤 결정 도구와 캐주얼 웹게임을 하나의 다국어 웹 서비스로 묶는 프로젝트입니다. README 기준 MVP에는 한국어·영어 라우트, roulette 도구, Flappy Bird 게임, Supabase Auth hook, 랭킹·광고·공유 placeholder가 포함됩니다.
2아키텍처
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을 넣지 않는 것이 안전 기준입니다.
★원본 자료
실서비스: vibekits.org — 운영 중인 서비스에서 직접 확인할 수 있습니다.