B2C

CityCanvas (Şehir Kanvası)

warningProblem

"A truck driver spent 20 years making a scale model of every building in NYC"

psychologyPotansiyel Çözüm

New York'un her binasının 20 yıl boyunca maketini yapan bir kamyon şoförünün hikayesinden ilham alan bu uygulama, kullanıcılara yaşadıkları veya ziyaret ettikleri şehirlerin 3D modellerini interaktif olarak oluşturma, özelleştirme ve paylaşma imkanı sunan bir platformdur. Kullanıcılar, detaylı yapıları, sokakları ve hatta mahalleleri sanal ortamda inşa edebilir, kendi 'şehirlerini' yaratabilir ve bunları toplulukla paylaşabilir.

groupHedef Kitle

Mimarlar, şehir planlamacıları, şehir sakinleri, hobi olarak şehir modelleriyle ilgilenenler, eğitim amaçlı kullanmak isteyen öğretmenler ve öğrenciler, dijital sanatçılar ve sanal dünya meraklıları. Özellikle detaylara önem veren, yaratıcı ve teknolojiye yatkın kişiler hedeflenmektedir.

paymentsGelir Modeli

Freemium modeli: Temel modelleme araçları ve sınırlı obje kütüphanesi ücretsizdir. Daha gelişmiş modelleme araçları, özel obje paketleri (tarihi binalar, fütüristik yapılar vb.), daha fazla depolama alanı ve projeleri özel (private) yapma imkanı sunan abonelik paketleri (aylık/yıllık) satılacaktır. Ayrıca, popüler modeller için 'NFT'leştirme opsiyonu da değerlendirilebilir.

Aksiyon Planı

Kullanıcıların basit araçlarla (blok ekleme, boyutlandırma, renk verme) 3D şehir blokları oluşturması

Mevcut bina modellerini veya hazır obje kütüphanesini kullanarak şehirleri daha hızlı inşa etme imkanı

Oluşturulan şehir modellerini kaydetme ve kişisel profil sayfasında sergileme

Diğer kullanıcıların modellerini görüntüleme, beğeni ve yorum yapma işlevselliği

Basit kamera kontrolleri ile şehir modeli içinde gezinme

Pazar Analizi

7.8Puan

Kaynak: Hacker Newsopen_in_new

AI Prompt

Generate a fully functional, multi-page Next.js MVP application for 'CityCanvas' (Şehir Kanvası) based on the following detailed instructions. The application should allow users to create, customize, and share interactive 3D models of cities.

**1. PROJECT OVERVIEW:**
CityCanvas is a web application inspired by the dedication of a truck driver who spent 20 years building a scale model of every building in NYC. It empowers users to interactively design, build, customize, and share 3D models of cities. Users can construct detailed buildings, streets, and neighborhoods in a virtual environment, create their own 'cities', and share them with a community. The core value proposition is to provide an accessible and engaging platform for urban creativity, visualization, and community sharing.

**2. TECH STACK:**
- **Framework:** Next.js (App Router)
- **Frontend:** React, TypeScript, Tailwind CSS
- **UI Library:** shadcn/ui
- **3D Rendering:** Three.js (integrated with React Three Fiber for seamless integration)
- **ORM:** Drizzle ORM (with PostgreSQL via Vercel Postgres or Supabase)
- **Authentication:** NextAuth.js (e.g., using Google, GitHub providers)
- **State Management:** Zustand or React Context API for global state, component-local state for UI elements.
- **Form Handling:** React Hook Form with Zod for validation.
- **Deployment:** Vercel
- **Required Packages:** `@react-three/fiber`, `@react-three/drei`, `drizzle-orm/pg-core`, `pg`, `next-auth`, `zod`, `react-hook-form`, `tailwindcss`

**3. DATABASE SCHEMA:**
- **users:**
  - `id`: UUID (Primary Key)
  - `name`: VARCHAR
  - `email`: VARCHAR (Unique)
  - `emailVerified`: TIMESTAMP (Nullable)
  - `image`: VARCHAR (Nullable)
  - `createdAt`: TIMESTAMP (Default: now())
  - `updatedAt`: TIMESTAMP

- **cities:**
  - `id`: UUID (Primary Key)
  - `userId`: UUID (Foreign Key to users.id)
  - `name`: VARCHAR
  - `description`: TEXT (Nullable)
  - `isPublic`: BOOLEAN (Default: true)
  - `createdAt`: TIMESTAMP (Default: now())
  - `updatedAt`: TIMESTAMP

- **buildings:**
  - `id`: UUID (Primary Key)
  - `cityId`: UUID (Foreign Key to cities.id)
  - `name`: VARCHAR (Nullable)
  - `position`: JSONB (e.g., { x: number, y: number, z: number })
  - `rotation`: JSONB (e.g., { x: number, y: number, z: number })
  - `scale`: JSONB (e.g., { x: number, y: number, z: number })
  - `color`: VARCHAR (Hex code, e.g., '#FFFFFF')
  - `modelUrl`: VARCHAR (Nullable, for pre-made models)
  - `createdAt`: TIMESTAMP (Default: now())
  - `updatedAt`: TIMESTAMP

- **cityLikes:**
  - `userId`: UUID (Foreign Key to users.id)
  - `cityId`: UUID (Foreign Key to cities.id)
  - `createdAt`: TIMESTAMP (Default: now())
  - Primary Key (`userId`, `cityId`)

- **cityComments:**
  - `id`: UUID (Primary Key)
  - `userId`: UUID (Foreign Key to users.id)
  - `cityId`: UUID (Foreign Key to cities.id)
  - `commentText`: TEXT
  - `createdAt`: TIMESTAMP (Default: now())

**4. CORE FEATURES & USER FLOW:**

**A. Authentication Flow:**
1. User visits the landing page.
2. Clicks 'Sign Up' or 'Sign In'.
3. Redirected to NextAuth.js provider page (e.g., Google login).
4. Upon successful authentication, user is redirected to their dashboard.
5. Unauthenticated users can view public cities but cannot create or modify.

**B. City Creation & Editing:**
1. User navigates to 'My Cities' or clicks 'Create New City' from the dashboard.
2. Enters a city name and description (optional), sets privacy (Public/Private).
3. User is taken to the 3D Editor Canvas.
4. **Editor Tools:**
   - **Add Building:** User selects 'Add Building'. Clicks on the canvas to place a default cube. A panel appears to adjust size, position, rotation, color, or select a pre-made model.
   - **Select Building:** User clicks on an existing building in the 3D view. Its properties appear in the adjustment panel.
   - **Adjust Properties:** In the panel, user modifies: `position` (drag/drop in 3D or input fields), `scale` (input fields), `rotation` (input fields), `color` (color picker), `modelUrl` (dropdown/search for pre-made assets).
   - **Delete Building:** Select building, click 'Delete'. Confirmation dialog.
   - **Pre-made Models:** User selects a pre-made model from a sidebar. Places it on the canvas.
   - **Save City:** Clicks 'Save'. Changes are persisted to the `cities` and `buildings` tables via API calls.
   - **Exit Editor:** User can save and exit or discard changes.

**C. City Viewing & Community Interaction:**
1. User navigates to the 'Explore' page.
2. A grid/list of public cities is displayed.
3. User clicks on a city card to view the full 3D model in a read-only viewer.
4. **Viewer Controls:** Orbit controls, zoom, pan. Basic stats (creator, name, description, likes count).
5. **Interaction:**
   - **Like:** User clicks a 'Like' button. `cityLikes` table is updated. Like count increments. Button state changes.
   - **Comment:** User types a comment in a text area below the model. Clicks 'Submit'. `cityComments` table is updated. Comments are displayed chronologically.

**D. User Profile:**
1. User navigates to their profile page.
2. Displays user information (name, image).
3. Lists all cities created by the user (both public and private).
4. Each city card links to its editor (if owner) or viewer.

**5. API & DATA FETCHING:**
- **API Routes (App Router):** `app/api/cities/...`, `app/api/buildings/...`, `app/api/auth/...` etc.
- **`POST /api/cities`:** Create a new city. Request Body: `{ name: string, description?: string, isPublic: boolean }`. Response: `{ city: City }`.
- **`PUT /api/cities/[cityId]`:** Update city details. Request Body: `{ name?: string, description?: string, isPublic?: boolean }`.
- **`DELETE /api/cities/[cityId]`:** Delete a city. Response: `204 No Content`.
- **`POST /api/cities/[cityId]/buildings`:** Add a building to a city. Request Body: `{ position: object, rotation: object, scale: object, color: string, modelUrl?: string }`.
- **`PUT /api/buildings/[buildingId]`:** Update a building's properties. Request Body: `{ position?: object, rotation?: object, scale?: object, color?: string, modelUrl?: string }`.
- **`DELETE /api/buildings/[buildingId]`:** Delete a building. Response: `204 No Content`.
- **`POST /api/cities/[cityId]/like`:** Like a city. Response: `{ liked: boolean, likesCount: number }`.
- **`POST /api/cities/[cityId]/comments`:** Add a comment. Request Body: `{ commentText: string }`. Response: `{ comment: Comment }`.
- **Data Fetching:** Use Server Components for initial data loads (e.g., list of cities on explore page, user's cities on profile). Use Client Components with `fetch` or libraries like `swr` or `react-query` for dynamic data updates within the editor or for actions like liking/commenting.
- **3D Data:** Building data (position, scale, rotation, color, modelUrl) will be fetched and passed as props to the `Canvas` component and its children.

**6. COMPONENT BREAKDOWN (App Router Structure):**
- **`app/layout.tsx`:** Root layout (HTML, Body, TailwindProvider, AuthProvider).
- **`app/(marketing)/page.tsx`:** Landing Page (Hero section, feature highlights, testimonials, CTA).
- **`app/auth/signin/page.tsx`:** Sign In page (using NextAuth.js components).
- **`app/(app)/dashboard/page.tsx`:** User Dashboard (Overview of user's cities, quick actions).
- **`app/(app)/my-cities/page.tsx`:** 'My Cities' page (List/grid of user's cities, link to create new).
- **`app/(app)/editor/[cityId]/page.tsx`:** 3D City Editor. Contains:
  - **`EditorCanvas.tsx`:** Main Three.js canvas component. Manages scene, camera, lights, and renders buildings.
  - **`Toolbar.tsx`:** Left sidebar with tools (Add Building, Select, etc.).
  - **`InspectorPanel.tsx`:** Right sidebar to adjust properties of selected building/city.
  - **`BuildingList.tsx`:** List of buildings within the current city (optional).
  - **`AssetLibrary.tsx`:** Modal/sidebar to select pre-made models.
- **`app/(app)/explore/page.tsx`:** 'Explore' page (Grid of public cities).
- **`app/(app)/city/[cityId]/page.tsx`:** City Viewer Page (Read-only 3D view, like/comment section).
- **`app/(app)/profile/[userId]/page.tsx`:** User Profile Page.
- **`app/components/ui/...`:** Reusable UI components from shadcn/ui (Button, Input, Card, Dialog, etc.).
- **`app/components/canvas/...`:** Reusable Three.js related components (e.g., `DraggableBox`, `OrbitControlsWrapper`, `ColorPicker`).
- **`app/components/AuthProvider.tsx`:** Context provider for NextAuth.js session.
- **`app/components/Navbar.tsx`:** Navigation bar.
- **`app/components/Footer.tsx`:** Footer.

**7. UI/UX DESIGN & VISUAL IDENTITY:**
- **Style:** Modern, Clean, Slightly Futuristic.
- **Color Palette:**
  - Primary: `#4A90E2` (Vibrant Blue)
  - Secondary: `#50E3C2` (Teal/Mint)
  - Accent: `#F5A623` (Orange/Gold)
  - Background: `#F8F9FA` (Light Gray)
  - Dark Mode Background: `#1A1A1A` (Very Dark Gray)
  - Text: `#212529` (Dark Gray), `#FFFFFF` (White for dark mode)
- **Typography:** Sans-serif. Use a modern font like 'Inter' or 'Poppins'.
- **Layout:** Use a clear, responsive layout. Main content area, consistent header/footer. Sidebars in the editor should be collapsible.
- **Visuals:** Focus on clean 3D rendering. Subtle ambient occlusion and lighting. Use icons from shadcn/ui or a similar pack.

**8. SAMPLE/MOCK DATA:**

- **User:** `{ id: 'uuid-user-1', name: 'Alice', email: 'alice@example.com', image: 'https://example.com/alice.jpg' }`
- **City (Public):** `{ id: 'uuid-city-1', userId: 'uuid-user-1', name: 'Downtown Alice', description: 'My first city creation!', isPublic: true, createdAt: '2023-10-27T10:00:00Z' }`
- **City (Private):** `{ id: 'uuid-city-2', userId: 'uuid-user-1', name: 'Private Project Alpha', isPublic: false, createdAt: '2023-10-27T11:00:00Z' }`
- **Building 1 (in City 1):** `{ id: 'uuid-building-1', cityId: 'uuid-city-1', position: { x: 0, y: 10, z: 0 }, rotation: { x: 0, y: 0, z: 0 }, scale: { x: 20, y: 40, z: 20 }, color: '#808080' }`
- **Building 2 (in City 1):** `{ id: 'uuid-building-2', cityId: 'uuid-city-1', position: { x: 50, y: 5, z: 20 }, rotation: { x: 0, y: 45, z: 0 }, scale: { x: 15, y: 30, z: 15 }, color: '#FFD700' }`
- **Building 3 (Pre-made Model in City 2):** `{ id: 'uuid-building-3', cityId: 'uuid-city-2', position: { x: -30, y: 0, z: -10 }, rotation: { x: 0, y: -90, z: 0 }, scale: { x: 1, y: 1, z: 1 }, modelUrl: '/models/skyscrapers/towerA.glb' }`
- **Like:** `{ userId: 'uuid-user-1', cityId: 'uuid-city-1' }`
- **Comment:** `{ id: 'uuid-comment-1', userId: 'uuid-user-1', cityId: 'uuid-city-1', commentText: 'Looks amazing!', createdAt: '2023-10-27T10:05:00Z' }`

**9. TURKISH TRANSLATIONS:**
- **App Title:** Şehir Kanvası
- **Landing Page:**
  - Hero Title: Şehrinizi Sanal Ortamda İnşa Edin
  - Hero Subtitle: Hayalinizdeki metropolleri CityCanvas ile gerçeğe dönüştürün.
  - CTA Button: Başla
- **Navigation:** Keşfet, Panolarım, Yeni Şehir Oluştur
- **Editor:**
  - Toolbar: Bina Ekle, Seç, Sil, Kaydet
  - Inspector Panel:
    - Konum: X, Y, Z
    - Boyut: X, Y, Z
    - Döndürme: X, Y, Z
    - Renk
    - Model Seç
- **City Card:** Şehir Adı, Yapan: [Kullanıcı Adı], Beğeni Sayısı: [Sayı]
- **Viewer:**
  - Beğen Butonu
  - Yorum Yap
  - Yorum Yazma Alanı
- **Profile:** Profilim, Şehirlerim
- **Auth:** Giriş Yap / Kayıt Ol

**10. ANIMATIONS:**
- **Page Transitions:** Subtle fade-in/out using Next.js's built-in capabilities or a library like `Framer Motion`.
- **Button Hovers:** Slight scale-up or color change.
- **Loading States:** Use spinners or skeleton loaders for data fetching.
- **3D Scene:** Smooth camera transitions (orbit, pan, zoom). Buildings can have subtle default animations if pre-made.
- **UI Elements:** Smooth expansion/collapse for sidebars and panels.

**11. EDGE CASES:**
- **Auth:** Handle cases where session expires, user is logged out during editing. Prompt to save before logout if unsaved changes exist.
- **Empty States:** Display informative messages and clear CTAs when 'My Cities' is empty, no cities are found in 'Explore', or a city has no buildings.
- **Validation:** Client-side and server-side validation for all form inputs (city name, building properties, comments).
- **Error Handling:** Gracefully handle API errors (e.g., network issues, server errors). Display user-friendly error messages. Implement retry mechanisms for critical operations.
- **3D Rendering:** Fallback for browsers that don't support WebGL. Optimize performance for large cities (e.g., level of detail, instancing). Handle errors during model loading (`modelUrl`).
- **Permissions:** Ensure users can only edit their own cities. Private cities should only be visible to their owner.