fix: environment setup and diagnostic analysis - #2
Open
jip9e wants to merge 1 commit into
Open
Conversation
- Fixed: import dynamicMap → dynamic (page.tsx:38) - Fixed: dynamic component usage (page.tsx:66) - Added: .env.local with all required API keys (placeholder values) - Added: DIAGNOSTIC_REPORT.md with priority issues analysis - Map load bug: token validation missing - TSP optimization: performance profiling needed - Instagram/TikTok parsing: well-designed with fallbacks - Dev server running on http://localhost:3000 with HMR enabled
There was a problem hiding this comment.
Pull request overview
This PR bootstraps a full VOYGE.studio Next.js app environment (config, API routes, UI components, and core “location intelligence” libraries) and adds extensive documentation/diagnostics to support local development and troubleshooting.
Changes:
- Adds core app code for scraping → location extraction/verification → map rendering → optimization, exposed via Next.js API routes.
- Introduces Mapbox UI components (globe map + mobile bottom sheet) and supporting shared utilities.
- Adds environment/config scaffolding and comprehensive docs (README/SECURITY/CONTRIBUTING/diagnostic report) plus a TikTok CLI diagnostic script.
Reviewed changes
Copilot reviewed 46 out of 54 changed files in this pull request and generated 11 comments.
Show a summary per file
| File | Description |
|---|---|
| tmp/env_status.md | Environment status snapshot for local setup / next steps. |
| public/window.svg | Updates public asset (currently stored as a data-URI string). |
| public/vercel.svg | Updates public asset (currently stored as a data-URI string). |
| public/next.svg | Updates public asset (currently stored as a data-URI string). |
| public/globe.svg | Updates public asset (currently stored as a data-URI string). |
| public/file.svg | Updates public asset (currently stored as a data-URI string). |
| VOYGE.studio/tsconfig.json | TypeScript compiler configuration for the VOYGE.studio app. |
| VOYGE.studio/src/lib/utils.ts | Adds cn() Tailwind class merge helper (clsx + tailwind-merge). |
| VOYGE.studio/src/lib/optimize.ts | Mapbox Optimization API wrapper (optimizeRoute). |
| VOYGE.studio/src/lib/location/vision.ts | Google Vision landmark detection stage (thumbnail → landmark + coords). |
| VOYGE.studio/src/lib/location/verifier.ts | Wikipedia + Google KG verification stage for candidate places. |
| VOYGE.studio/src/lib/location/index.ts | Public re-export surface for the location pipeline modules. |
| VOYGE.studio/src/lib/geo.ts | Legacy shim to preserve old @/lib/geo API surface. |
| VOYGE.studio/src/lib/flags.ts | Country-name → emoji flag mapping utility. |
| VOYGE.studio/src/lib/firebase.ts | Firebase client initialization and exported auth/db. |
| VOYGE.studio/src/lib/engine.ts | Top-level orchestration (processPost) + Firestore caching. |
| VOYGE.studio/src/lib/ai.ts | GPT-based extraction/enhancement helpers via Azure AI Inference SDK. |
| VOYGE.studio/src/components/MapComponent.tsx | Client-side Mapbox GL globe, markers, routes, style switching. |
| VOYGE.studio/src/components/BottomSheet.tsx | Framer Motion bottom sheet for mobile UX. |
| VOYGE.studio/src/app/layout.tsx | Root layout + metadata/viewport + Geist fonts wiring. |
| VOYGE.studio/src/app/globals.css | Tailwind import + global background/foreground styling. |
| VOYGE.studio/src/app/api/telegram/route.ts | Telegram webhook integration to analyze links and save spots. |
| VOYGE.studio/src/app/api/search/route.ts | Mapbox SearchBox suggest proxy for typeahead search. |
| VOYGE.studio/src/app/api/proxy/route.ts | Server-side image proxy for social CDN images (CORS bypass). |
| VOYGE.studio/src/app/api/optimize/route.ts | POST route exposing optimization wrapper to the frontend. |
| VOYGE.studio/src/app/api/images/route.ts | Pexels image fetch endpoint (query → single photo URL). |
| VOYGE.studio/src/app/api/enhance/route.ts | GPT metadata enrichment endpoint + optional Pexels thumbnail. |
| VOYGE.studio/src/app/api/analyze/route.ts | Main analyze endpoint (URL → processPost → EngineResult). |
| VOYGE.studio/scripts/diagnose-tiktok.mjs | Standalone CLI to diagnose TikTok scraping layers and outputs. |
| VOYGE.studio/postcss.config.mjs | PostCSS config enabling Tailwind v4 plugin. |
| VOYGE.studio/package.json | App dependencies and scripts for Next/Tailwind/Firebase/Mapbox/etc. |
| VOYGE.studio/next.config.ts | Next.js config (currently disables TS/lint build enforcement). |
| VOYGE.studio/next-env.d.ts | Next.js type references (currently imports generated .next types). |
| VOYGE.studio/eslint.config.mjs | ESLint flat config extending Next core-web-vitals + TypeScript. |
| VOYGE.studio/SECURITY.md | Security policy + guidance on secrets and committed config. |
| VOYGE.studio/README.md | Full product/architecture docs + setup + API reference. |
| VOYGE.studio/LICENSE | Proprietary license text. |
| VOYGE.studio/DIAGNOSTIC_REPORT.md | Diagnostic report/action plan for environment + priority issues. |
| VOYGE.studio/CONTRIBUTING.md | Contributor guide (workflow, style, diagnostics). |
| VOYGE.studio/CHANGELOG.md | Changelog entries for releases and pipeline improvements. |
| VOYGE.studio/.gitignore | Ignore rules for node/next/build outputs + env files. |
| VOYGE.studio/.env.local.example | Long-form env template with detailed guidance/links. |
| VOYGE.studio/.env.local | Local env file (currently committed). |
| VOYGE.studio/.env.example | Minimal env template for required/optional keys. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+60
to
+76
| export async function GET(req: NextRequest) { | ||
| const { searchParams } = new URL(req.url); | ||
| const imageUrl = searchParams.get("url"); | ||
|
|
||
| if (!imageUrl) { | ||
| return new NextResponse("Missing URL", { status: 400 }); | ||
| } | ||
|
|
||
| try { | ||
| const response = await axios.get(imageUrl, { | ||
| responseType: "arraybuffer", | ||
| headers: { | ||
| "User-Agent": | ||
| "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36", | ||
| Referer: "https://www.instagram.com/", | ||
| }, | ||
| }); |
Comment on lines
+76
to
+77
| const url = `https://api.mapbox.com/search/searchbox/v1/suggest?q=${encodeURIComponent(q)}&access_token=${MAPBOX_TOKEN}&session_token=voyge_session_123&types=poi,address,place`; | ||
|
|
Comment on lines
+70
to
+71
| viewport: | ||
| "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0", |
Comment on lines
+232
to
+237
| const spotsText = result.travel_spots | ||
| .map( | ||
| (s) => | ||
| `${confidenceEmoji[s.confidence] || "📍"} *${s.name}*\n ${s.city}, ${s.country} · ${s.category}`, | ||
| ) | ||
| .join("\n\n"); |
Comment on lines
+1
to
+60
| # ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ | ||
| # VOYGE.studio — Local Development Environment | ||
| # This file is NOT committed to source control. | ||
| # ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ | ||
|
|
||
| # ── REQUIRED: AI / Location Intelligence ────────────────────────────────────── | ||
| # GitHub Models (GPT-5) — location extraction, spot enhancement, AI agent fallback | ||
| # Get token: https://github.com/settings/tokens (fine-grained with Models access) | ||
| GITHUB_MODELS_TOKEN=ghp_test_token_local_development | ||
|
|
||
| # ── REQUIRED: Scraping ──────────────────────────────────────────────────────── | ||
| # RapidAPI Master Key — covers Instagram & TikTok APIs | ||
| # Get key: https://rapidapi.com/developer/dashboard | ||
| RAPIDAPI_KEY=test_rapidapi_key_local_development | ||
|
|
||
| # ── REQUIRED: Maps ──────────────────────────────────────────────────────────── | ||
| # Mapbox — map rendering, geocoding, route optimization | ||
| # Get token: https://account.mapbox.com/access-tokens/ | ||
| NEXT_PUBLIC_MAPBOX_TOKEN=pk.test_mapbox_token_local_development | ||
|
|
||
| # ── OPTIONAL: Images ────────────────────────────────────────────────────────── | ||
| # Pexels — fallback travel photos | ||
| # Get key: https://www.pexels.com/api/ | ||
| PEXELS_API_KEY=test_pexels_key_local_development | ||
|
|
||
| # ── OPTIONAL: Location Pipeline Fallbacks ───────────────────────────────────── | ||
| # GeoNames — natural features (rivers, lakes, mountains) | ||
| # Register: https://www.geonames.org/login | ||
| GEONAMES_USERNAME=test_geonames_user | ||
|
|
||
| # HERE Geocoding — POI fallback | ||
| # Get key: https://developer.here.com/ | ||
| HERE_API_KEY=test_here_key_local_development | ||
|
|
||
| # OpenCage Geocoding — confidence-scored fallback | ||
| # Get key: https://opencagedata.com/ | ||
| OPENCAGE_API_KEY=test_opencage_key_local_development | ||
|
|
||
| # ── OPTIONAL: Location Verification ─────────────────────────────────────────── | ||
| # Google Knowledge Graph — place verification | ||
| # Enable: https://console.cloud.google.com/apis/library/kgsearch.googleapis.com | ||
| GOOGLE_KG_API_KEY=test_google_kg_key_local_development | ||
|
|
||
| # Google Cloud Vision — landmark detection from thumbnails | ||
| # Enable: https://console.cloud.google.com/apis/library/vision.googleapis.com | ||
| GOOGLE_VISION_KEY=test_google_vision_key_local_development | ||
|
|
||
| # ── OPTIONAL: Telegram Bot ──────────────────────────────────────────────────── | ||
| # Telegram Bot Token — forward reels/tiktoks via Telegram | ||
| # Create: https://t.me/BotFather | ||
| TELEGRAM_BOT_TOKEN=test_telegram_token_local_development | ||
|
|
||
| # ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ | ||
| # FREE APIs (no key required — used automatically): | ||
| # • tikwm.com → TikTok video details (5,000 req/day/IP) | ||
| # • tiktok.com/oembed → TikTok fallback metadata | ||
| # • Wikipedia API → Place verification + GPS | ||
| # • Nominatim (OSM) → Geocoding fallback (1 req/s) | ||
| # • OSM Overpass API → Natural feature queries | ||
| # ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ |
| body { | ||
| background: var(--background); | ||
| color: var(--foreground); | ||
| font-family: Arial, Helvetica, sans-serif; |
Comment on lines
+76
to
+94
| const MAPBOX_TOKEN = process.env.NEXT_PUBLIC_MAPBOX_TOKEN; | ||
|
|
||
| /** | ||
| * Computes the most efficient visiting order for a set of waypoints using | ||
| * the Mapbox Optimization API v1 (driving profile). | ||
| * | ||
| * @param coordinates - An array of `[longitude, latitude]` pairs to optimise. | ||
| * Must contain at least 2 entries; returns `null` immediately for fewer. | ||
| * @returns The optimised route geometry and sorted waypoints, or `null` on | ||
| * any error. | ||
| */ | ||
| export async function optimizeRoute(coordinates: [number, number][]) { | ||
| if (coordinates.length < 2) return null; | ||
|
|
||
| // Mapbox Optimization API v1 (Standard for JS) | ||
| // Optimization v2 is usually for fleet management, v1 is better for simple "Trip Planning" | ||
| const coordsString = coordinates.map((c) => c.join(",")).join(";"); | ||
| const url = `https://api.mapbox.com/optimized-trips/v1/mapbox/driving/${coordsString}?access_token=${MAPBOX_TOKEN}&geometries=geojson&overview=full`; | ||
|
|
Comment on lines
+1
to
+11
| { | ||
| "name": "voyge-studio", | ||
| "version": "1.0.0", | ||
| "private": true, | ||
| "scripts": { | ||
| "dev": "next dev --turbopack", | ||
| "dev:safe": "next dev --no-turbopack", | ||
| "build": "next build", | ||
| "start": "next start", | ||
| "lint": "eslint" | ||
| }, |
Comment on lines
+51
to
+54
| export function getCountryFlag(countryName: string): string { | ||
| const flags: { [key: string]: string } = { | ||
| Afghanistan: "🇦🇫", | ||
| Albania: "🇦🇱", |
Comment on lines
+135
to
+140
| <button | ||
| onClick={onClose} | ||
| className="p-2 text-[#404040] hover:text-white transition-colors" | ||
| > | ||
| <X className="w-6 h-6" /> | ||
| </button> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Completed initial environment setup and diagnostic analysis for VOYGE.studio.
Changes
Fixes
next/dynamicimport typo in page.tsxDocumentation
Status
Next Steps
Phase 1 (Critical)
Phase 2 (Important)
Phase 3 (Nice-to-Have)
Testing