<aside> 🕹️

포켓몬 TCG Pocket 유저들을 위한 정보와 커뮤니티 구축

</aside>

🏆 Achievements

• 해당 게임 국내에서 가장 많은 사용자 수를 보유 했던 서비스

  • 활성 사용자 수 1.3만명 및 하루 최대 접속자 수 1300명

    

• 1인 개발부터 운영까지

  • 90+ API 엔드포인트를 포함한 풀스택 서비스를 직접 개발 및 운영
  • 유저들의 피드백 수용과 리텐션을 위한 기능 직접 기획

• 실시간 라이브 서비스에 대한 경험

  • 사내 구성원이 아닌 서비스를 사용해주는 고객들을 만나고 싶었던 갈증 해소
  • PWA와 Push Notification 등 모바일 환경의 UX 개선 경험
  • 채팅 및 알림 기능을 통한 실시간 데이터 전달을 얕게나마 경험

🏗️ System Architecture

프로젝트 구성

graph TB
    subgraph Client["Client (Browser / PWA)"]
        RC["React 19 RC<br/>+ Next.js 15 App Router"]
        RQ["React Query 5<br/>서버 상태 관리"]
        ZS["Zustand 5<br/>클라이언트 상태"]
        SW["Service Worker<br/>PWA + Push"]
    end

    subgraph Vercel["Vercel"]
        SSR["Pages<br/>SSR / CSR"]
        API["API Routes<br/>90+ endpoints"]
        MW["Middleware<br/>Auth Session"]
        AN["Analytics<br/>+ Speed Insights"]
    end

    subgraph Supabase["Supabase"]
        DB["PostgreSQL"]
        AUTH["Auth<br/>Google · Kakao<br/>Discord · Facebook"]
        RT["Realtime<br/>WebSocket"]
        ST["Storage<br/>Card Images"]
        EF["Edge Functions<br/>Webhook"]
    end

    subgraph Firebase["Firebase"]
        FCM["Cloud Messaging<br/>Push Notification"]
    end

    subgraph External["External Services"]
        GA["Google Analytics 4"]
        ADS["Google AdSense"]
    end

    RC --> SSR
    RC --> API
    RQ --> API
    RC --> RT
    SW --> FCM

    MW --> AUTH
    SSR --> DB
    API --> DB
    API --> ST
    API --> RT
    EF --> DB

    RC --> AN
    RC --> GA
    RC --> ADS

랭킹 시스템 플로우

알림시스템 플로우

✨ Key Features

• 덱 빌더

  • 타입 / 확장팩 등 다양한 필터링으로 카드 탐색 → 덱 구성 → html2canvas 기반 스크린샷 제공
  • Session Storage 임시 저장 + DB 영구 저장 방식 구현
  • 구현화면

• 랭크 시스템

  • 시즌제 Elo 레이팅 경쟁 매칭시스템 구현
  • 큐 진입 → 매칭 → 대전 → 결과 제출 → 분쟁 처리까지 상태 관리 플로우 구축
  • 데이터 기반 메타덱 티어 데이터 제공
  • 구현화면
  • pokepoke.gg 비공식 랭크 소개 영상 출처 : 른쿄 & 캔커피 Youtube

• 트레이드 찾기

  • 원하는 카드 / 제공 카드 기반 트레이딩 할 유저 매칭 서비스
  • 매칭 원하는 상대에게 대화 및 알림 서비스 제공
  • 구현화면

• 알림 및 PWA

  • Firebase FCM + Supabase Realtime 이중 알림 아키텍처 (Foreground/Background 채널 분리)
  • PWA 앱 바로가기, iOS Pull-to-Refresh, 설치 프롬프트 제공
  • 구현화면

🚀 Challenges & Troubleshooting