vccs
Vue 3용 차트 컴포넌트 모음, Recharts에서 포팅
아직 감지된 업데이트가 없습니다. GitHub 릴리스가 나오면 여기에 보입니다.
개인 계정의 공개 저장소 소유자는 GitHub로 로그인해 운영자를 확인하고 소개를 직접 관리할 수 있습니다. 관리자 승인은 필요하지 않습니다.
로그인한 뒤 확인 파일을 만들어 이 저장소의 기본 브랜치에 30분 안에 커밋해 주세요. 다른 브랜치나 포크의 파일은 인정하지 않습니다. 파일을 올린 뒤 아래에서 확인하면 관리자 승인 없이 관리할 수 있습니다. 자격을 유지하려면 파일을 남겨 두세요.
로그인이 필요하면 로그인 화면으로 이동합니다. 로그인 후 이곳으로 돌아와 원하는 확인 버튼을 다시 눌러 주세요.
프로젝트 폴더에서 /nomorevibe verify를 실행하면 소유권을 확인하고 소개를 직접 관리할 수 있습니다.
1분 만에 확인하기Web apps that turn entertainment APIs into interactive dashboards — YouTube channel analyzer, IMDb season ranker, Spotify track explorer. Built with Next.js, TypeScript, Neon Postgres, AI (Gemini/Groq), and Inngest.
저장소 README에서 가져옴
README 전체를 불러오는 중입니다.
README 전문 보기 ↗A monorepo of web apps that turn entertainment and gaming APIs into interactive dashboards -- analyze YouTube channels, rank TV show seasons, explore Spotify artist catalogs, dissect a decade of Last.fm listening, optimize Clash Royale decks, and coach Brawl Stars account progression.
Built with Next.js 16, TypeScript, and shared workspace packages. Each app connects to a public or game API (YouTube, OMDb/TMDB, Spotify, Deezer, Last.fm, Clash Royale, Brawl Stars) and pairs deterministic domain metrics with searchable, sortable, or AI-assisted interfaces.
The most complete app in this repo. A full-stack platform for deep YouTube channel analysis.
Sync an entire channel's video catalog into a Neon Postgres database, then explore it through a 5-tab dashboard: Overview (KPIs, score distribution, top performers), Videos (filterable table with engagement rates), Timeline (chronological trends), Sagas (AI-detected narrative arcs grouping related uploads), and Discover (AI-generated starter packs, evolution timelines, channel DNA profiles).
Every video gets a 0-100 score computed from five weighted components -- reach, engagement, momentum, efficiency, and community -- using sigmoid normalization and duration-aware bucketing so short and long videos are compared fairly.
The sync pipeline runs as background jobs with real-time SSE progress streaming. An AI chat drawer (Cmd+J) lets you ask natural language questions with full channel context. Channels can be compared side-by-side (2-5 at once), and reports can be shared via expiring snapshot links.
Stack: Neon Postgres, Drizzle ORM, NextAuth (Google OAuth), Vercel AI SDK (Gemini 3.5 Flash Lite / Groq), Vitest, PostHog.
Find out which season of any TV series is the best.
Search for a show and the app fetches every episode's rating from OMDb and (optionally) TMDB, computes each season's median score, and presents a ranked table from best to worst. Click any season to see the episode-by-episode breakdown with IMDb links and dual-source ratings. The median-based ranking reduces the impact of single outlier episodes on a season's overall standing.
Both data sources are cached in-memory (24h TTL) and rate-limited. The app includes Playwright E2E tests covering search, navigation, theme toggling, and accessibility.
Stack: OMDb API, TMDB API (optional), Playwright, Vitest, PostHog. Libre Baskerville + JetBrains Mono typography with a gold accent theme.
Deep analysis of a Last.fm scrobble history -- the questions Last.fm's own charts cannot answer.
Last.fm's aggregate endpoints only tell you what you played most. This app imports the entire play-by-play record (225k scrobbles across a decade) into Postgres, then computes things that need the raw stream: an hour-by-weekday heatmap, a per-day calendar going back to the first scrobble, listening sessions detected from gaps between plays, and consecutive-day streaks.
The more interesting half is behavioural. Every artist is classified by how they moved through rotation -- companion, phase, abandoned, recent, or casual -- from their active span and how much of their listening collapsed into a single month. Alongside that: discovery rate over time, comeback detection (a long silence followed by a return that stuck), year-over-year rank movement, one-hit wonders, and concentration measured as both top-10 share and normalised Shannon entropy.
The import is one resumable mechanism for both the initial backfill and ongoing syncs. It pins its upper bound so page numbers stay stable mid-run, works in bounded chunks that save a cursor, and leans on a unique index so a retried page is harmless.
Stack: Last.fm API, Neon Postgres, Drizzle ORM, recharts, TanStack Table, Vitest. Tables live in a dedicated lastfm Postgres schema so the database can be shared safely.
See every track an artist has ever released on Spotify, ranked by popularity score.
Unlike Spotify's own interface (which only shows the top 10), this app traverses the artist's full album catalog -- albums, singles, compilations -- deduplicates tracks, and ranks them all by Spotify's internal popularity metric (0-100). Each track has a 30-second audio preview powered by the Deezer API, with a built-in play/pause player that works directly from the table.
Stack: Spotify Web API (client credentials flow), Deezer Search API, Vitest, PostHog. Geist typography with Spotify's green accent.
Personal Clash Royale deck workshop and collection-aware advisor for player #VGURQ0QQ2.
Evaluates either the active 8-card deck (Improve current deck mode, recommending targeted swaps that preserve the deck's archetype) or the full card collection (Best from collection mode, assembling the strongest legal deck the account can field). Candidate decks are generated across configured AI providers, validated against 2026 special-slot rules (0-2 Evolutions, 0-2 Champions, at most 3 special slots total) and owned cards, scored deterministically across a 123-card role and mechanics knowledge base, and hill-climbed over the collection before an AI explanation pass summarizes matchups, replay notes from recent losses, and level-impact warnings.
Includes one-click "Open in Clash Royale" deep links, a 30-minute server-side analysis cache backed by Neon Postgres, and a rate-limited manual refresh.
Stack: Clash Royale API (proxy.royaleapi.dev), Neon Postgres, Vercel AI SDK (Google Gemini 3.5 Flash Lite / 3.6 Flash, Groq openai/gpt-oss-120b), Zod 4, Vitest. Fraunces + Manrope typography in a "Royal Workshop" aesthetic.
Personal Brawl Stars progression dossier and account coach for player #Y0GLCU0GL.
Fetches the live player profile, full brawler roster, brawler catalog, and recent battle log through the RoyaleAPI proxy, then computes deterministic account metrics: roster unlock coverage, P1-P11 power distribution, peak trophy retention, under-pushed high-power brawlers, and recent win/loss trends by mode. An AI coaching pass with multi-provider fallback produces an account health score, up to 5 upgrade priorities, trophy-push targets, recommended builds strictly cross-checked against owned gadgets, Star Powers, gears, and Hypercharges, battle log diagnosis, low-value investments to avoid, and a three-step next-session action plan.
Stack: Brawl Stars API (bsproxy.royaleapi.dev), Vercel AI SDK (Google Gemini 3.5 Flash Lite / 3.6 Flash, Groq openai/gpt-oss-120b), Zod 4, Vitest. Bungee + Nunito Sans typography in an arcade-dossier aesthetic.
Analytical residential rental radar for Belo Horizonte, Campinas, Rio de Janeiro, and São Paulo.
Evaluates 20 curated neighborhoods across the four Nubank hub cities and over 2,400 rental listings from QuintoAndar, Zap Imóveis, Viva Real, Netimóveis, and Imovelweb. Features a real-time weight calibrator across 5 neighborhood criteria and 7 property criteria, mathematical score auditing, an interactive satellite/street map with hub distance lines, and photo showcases.
Stack: Next.js 16, Neon Postgres, Drizzle ORM, Leaflet, TanStack Query, Zod 4, Vitest.
The four catalog and analytics apps (youtube, imdb-best-season, spotify-popularity, lastfm) share UI primitives and utilities through the monorepo's workspace packages, while clash-deck-advisor and brawl-account-coach are standalone Next.js 16 apps with server-only game API and AI coaching pipelines.
| Layer | Technology | Used by |
|---|---|---|
| Monorepo | Turborepo + pnpm workspaces | All |
| Framework | Next.js 16 (App Router, Turbopack) | All |
| Language | TypeScript 5 | All |
| Styling | Tailwind CSS + CSS variables theming | All |
| UI Components | shadcn/ui + Radix UI + Lucide icons | YouTube, IMDb, Spotify, Listening Habits |
| Data Fetching | TanStack Query v5 | YouTube, IMDb, Spotify, Listening Habits |
| Tables | TanStack Table v9 | YouTube, IMDb, Spotify, Listening Habits |
| Theme | next-themes (dark/light + system) | YouTube, IMDb, Spotify, Listening Habits |
| Analytics | PostHog | YouTube, IMDb, Spotify |
| Deployment | Vercel | All |
| Database | Neon Postgres + Drizzle ORM | YouTube, Listening Habits, Clash Deck Advisor |
| Charts | recharts (heatmaps hand-rolled as CSS grids) | Listening Habits |
| Auth | NextAuth v5 + Google OAuth | YouTube |
| AI | Vercel AI SDK, Google Gemini, Groq | YouTube, Clash Deck Advisor, Brawl Account Coach |
| Unit Tests | Vitest | All |
| E2E Tests | Playwright | IMDb |
Three internal packages keep the apps consistent and reduce duplication:
@data-projects/sharedUtilities and hooks shared across all apps:
cn() -- class name utility (clsx + tailwind-merge)createCache() -- in-memory LRU cache with TTL, max size, and hit/miss statscheckRateLimit() / createRateLimitConfig() -- per-IP rate limiting with sliding windowsapiFetch() / ApiError -- fetch wrapper with structured error handlingcorsHeaders / optionsResponse / withRateLimitHeaders -- HTTP response helperscreateSuggestionsHook() -- factory for building TanStack Query-based autocomplete hookscreateValidator() / getSafeErrorMessage() -- input validation and safe error extraction@data-projects/uiShared React component library:
@data-projects/tailwind-configShared Tailwind preset providing:
class strategy--radius)tailwindcss-animate pluginEach app extends this preset and defines the CSS variables in its own globals.css to create its unique visual identity (gold for IMDb, Spotify green, teal/violet for YouTube).
pnpm install
pnpm dev # run all apps simultaneously
pnpm dev --filter youtube-analyzer # YouTube only (port 3003)
pnpm dev --filter imdb-best-season # IMDb only (port 3001)
pnpm dev --filter spotify-popularity # Spotify only (port 3002)
pnpm dev --filter lastfm-habits # Listening Habits only (port 3004)
pnpm dev --filter clash-deck-advisor # Clash Deck Advisor only (port 3012)
pnpm dev --filter brawl-account-coach # Brawl Account Coach only (port 3013)
pnpm dev --filter housing # Housing only (port 3005)
pnpm build # build all apps (Turborepo-orchestrated)
pnpm lint # lint all apps and packages
pnpm typecheck # type-check all apps and packages
pnpm test # run Vitest unit tests across all apps and packages
pnpm clean # remove .next, dist, and node_modules
Each app requires its own .env.local. See the individual READMEs and .env.example files for the full list:
CLASH_ROYALE_API_KEY required, plus GOOGLE_GENERATIVE_AI_API_KEY and/or GROQ_API_KEY)BRAWL_STARS_API_KEY required, plus GOOGLE_GENERATIVE_AI_API_KEY and/or GROQ_API_KEY)data-projects/
├── apps/
│ ├── youtube/ # YouTube channel analyzer (port 3003)
│ │ ├── src/app/ # 42+ API routes, 6 pages
│ │ ├── src/components/ # 30+ React components
│ │ ├── src/db/ # Drizzle schema (13 tables)
│ │ └── src/lib/ # Scoring, sync, AI, auth
│ ├── imdb-best-season/ # TV show season ranker (port 3001)
│ │ ├── src/app/ # 2 API routes, 2 pages
│ │ ├── src/components/ # 6 React components
│ │ └── e2e/ # Playwright E2E tests
│ ├── spotify-popularity/ # Spotify track explorer (port 3002)
│ │ ├── src/app/ # 3 API routes, 2 pages
│ │ ├── src/components/ # 8 React components
│ │ └── src/lib/spotify/ # Spotify API + auth layer
│ ├── lastfm/ # Last.fm listening analysis (port 3004)
│ │ ├── src/app/ # 7 API routes, 7 pages
│ │ ├── src/components/ # charts and dashboard UI
│ │ └── src/lib/analytics/ # temporal and behavioural analysis
│ ├── clash-deck-advisor/ # Clash Royale deck workshop (port 3012)
│ │ ├── src/app/ # 2 API routes, 1 page
│ │ ├── src/components/ # 8 React components
│ │ └── src/lib/ # Archetype engine, scoring, AI, validation
│ ├── brawl-account-coach/ # Brawl Stars account coach (port 3013)
│ │ ├── src/app/ # 2 API routes, 1 page
│ │ ├── src/components/ # 7 React components
│ │ └── src/lib/ # Account metrics, AI coaching, validation
│ └── housing/ # Residential rental radar (port 3005)
│ ├── src/app/ # 6 API routes, 1 page
│ ├── src/components/ # Interactive radar, map, and photo showcase
│ └── src/lib/ # Multi-criteria scoring engine and geocoding
├── packages/
│ ├── shared/ # Utilities, hooks, API helpers
│ ├── ui/ # Shared component library
│ └── tailwind-config/ # Shared design tokens + preset
├── turbo.json # Turborepo task pipeline
├── pnpm-workspace.yaml # Workspace configuration
└── package.json # Root scripts (dev, build, lint, test, typecheck, clean)