Back to Projects

Mobile Web Service / Price Data Platform

Gogisise

축산물 시세를 모니터링하는 모바일 전용 실시간 가격 정보 서비스

Live Service2026Frontend / Backend API / Crawler / Database Design

바이브코딩 개발자 과정을 통해 기획·구현된 서비스입니다. React/TypeScript 기반 모바일 UI, NestJS API, Prisma, Supabase PostgreSQL, Python 크롤러를 분리 설계하고 Vercel 및 클라우드 환경에 실제 배포를 완료했습니다.

Live Demo (Vercel)

Repository Architecture

4개 레포지토리로 분리한 서비스 구조

화면, API, 데이터 수집, 데이터베이스를 독립된 책임 단위로 나누어 구현과 배포 흐름을 명확히 정리했습니다.

Frontend

gogisise_FE

React 기반 모바일 Web UI 구현 및 Vercel 배포

ReactMobile WebVercel
Backend

gogisise_BE

NestJS 기반 Market API, Crawler API, 데이터 검증·가공·상태 동기화 구현

NestJSPrismaREST APIVercel
Crawler

gogisise_crawler

Python 기반 금천미트 카테고리·상품·가격 수집 및 BE API 적재

PythonCrawlerCheckpoint
카테고리별 체크포인트와 finalize 수집 흐름 구현GitHub Repo
Database

gogisise_DB

Supabase PostgreSQL 데이터 모델, 상품 상태, 가격 이력, 사용자 데이터 관리

SupabasePostgreSQLPrisma
Category Tree, Raw Records, Market Items, Price History 스키마 관리GitHub Repo

Problem

도매 사이트의 축산물 상품은 카테고리, 등급, 재고, 판매 상태가 계속 바뀌기 때문에 사용자가 모바일에서 한우/한돈, 냉장/냉동, 부위 조건을 빠르게 선택하고 최신 가격과 최근 가격 추이를 함께 확인하기 어렵습니다.

Solution

경기도일자리재단 바이브코딩 개발자 과정에서 Gemini Pro 기반 기획과 구현 흐름을 활용해 모바일 전용 React/TypeScript 화면, NestJS API 서버, Prisma 기반 데이터 접근, Supabase PostgreSQL 저장소, Python 크롤러를 역할별로 분리했습니다. 크롤러는 도매 사이트에서 카테고리와 상품을 수집해 BE API로 전달하고, BE는 RawRecord, MarketItem, MarketItemPrice를 UPSERT한 뒤 KST 기준 ACTIVE 상품과 가격 이력을 FE에 제공합니다.

Architecture Flow

  1. 사용자가 FE에서 한우/한돈, 냉장/냉동, 부위, 등급 조건으로 시세를 조회
  2. React/TypeScript FE가 NestJS Market API로 현재 상품과 계산 데이터를 요청
  3. Python Crawler가 금천미트 도매 사이트의 카테고리 트리와 581개 말단 카테고리 상품을 수집
  4. Crawler가 category-tree, ingest, finalize API로 수집 결과를 BE에 전달
  5. NestJS BE가 Prisma를 통해 Supabase에 RawRecord, MarketItem, MarketItemPrice를 UPSERT
  6. 전체 수집 완료 후 BE가 판매 가능 상품은 ACTIVE, 품절·판매 종료 상품은 INACTIVE로 동기화
  7. Supabase가 ACTIVE 상품, 날짜별 가격 이력, 즐겨찾기와 사용자 데이터를 저장
  8. BE가 최근 7일 priceHistory와 평균가, 최저가, 최고가, 참여 상품 수를 계산해 FE에 응답
  9. FE는 Vercel에 배포되어 실제 라이브 데모로 접근 가능

Technical Highlights

  • 바이브코딩 개발자 과정 최종 시연/배포 프로젝트로 기획부터 라이브 배포까지 완성
  • FE, BE, Crawler, Supabase 데이터 모델을 독립 레포지토리로 분리해 책임과 배포 단위를 명확히 구성
  • 한우/한돈, 냉장/냉동, 부위/등급 필터와 가격 정렬, 즐겨찾기, 상세 모달을 모바일 UI로 구현
  • 크롤러가 Supabase에 직접 쓰지 않고 NestJS BE API를 거쳐 검증·가공·상태 동기화를 수행
  • 품절, 재고 0, 판매 종료, 비노출, 유효하지 않은 상품번호·가격·중량, 한우 등급/월령 조건 미일치 상품을 수집에서 제외
  • KST 시장 기준일로 MarketItemPrice를 저장하고 가격이 없는 날짜는 보간하지 않고 없음으로 표시
  • 체크포인트 기반 수집으로 중간 장애 시 미완료 카테고리부터 재시작하고 전체 완료 후 finalize 수행
  • Vercel 배포 완료 상태의 실제 서비스 URL을 포트폴리오에서 바로 연결

Tech Stack

ReactTypeScriptVercelNestJSPythonSupabasePrismaPostgreSQL

Results

  • 경기도일자리재단 미래융합전문교육 바이브코딩 개발자 과정에서 60시간 동안 최종 시연 가능한 서비스로 구현
  • 모바일 전용 웹 UI부터 Market API, Crawler API, Supabase 저장소, Python 수집기까지 서비스 전체 흐름을 구현
  • GET /api/v1/market/items, calculations, price-history, categories와 crawler ingest/finalize API 흐름을 연결
  • RawRecord 기반으로 평균가, 최저가, 최고가, 참여 상품 수를 계산하고 최근 7일 가격 추이를 화면에 제공
  • 프론트엔드를 Vercel에 배포해 포트폴리오 방문자가 실제 서비스 화면을 바로 확인 가능
  • 데이터 수집, 저장, 조회, 화면 표시 흐름을 분리해 유지보수와 확장 기준을 확보

Retrospective

  • Gemini Pro와 AI 개발 도구를 활용해 아이디어 도출, UI/UX 설계, 구현 우선순위 정리, 배포 검증을 빠르게 반복했습니다.
  • 실서비스 형태로 배포해 보며 화면 구현뿐 아니라 데이터 수집, API 계약, DB 변경 관리가 함께 맞물려야 한다는 점을 확인했습니다.
  • 작은 모바일 서비스라도 레포지토리별 책임을 분리하면 장애 지점과 개선 범위를 더 명확하게 판단할 수 있었습니다.
Live Demo (Vercel)View Frontend RepoRead Study Log