Geliştirici Araçları

Glyph Explorer Pro

warningProblem

"Charcuterie – Visual similarity Unicode explorer"

psychologyPotansiyel Çözüm

Unicode karakterlerinin görsel benzerliklerini keşfetmek, ilgili glifleri bulmak ve karakterler arasındaki ilişkileri anlamak için güçlü bir platform. Özellikle tasarımcılar, yazılımcılar ve tipografi meraklıları için Unicode dünyasını görsel ve sezgisel bir yolla erişilebilir kılmayı hedefler. Gelişmiş bir arama ve filtreleme mekanizması ile birlikte, karakterlerin tarihçesi ve kullanım alanları hakkında zengin bilgiler sunar.

groupHedef Kitle

Yazılım geliştiriciler (özellikle front-end ve UI/UX odaklı olanlar), grafik tasarımcılar, tipografi uzmanları, dilbilimciler, araştırma görevlileri ve Unicode standartları ile ilgilenen herkes. Kendi projelerinde benzersiz veya benzer karakterlere ihtiyaç duyanlar, karakter kodlaması sorunlarıyla karşılaşanlar veya farklı yazı tiplerinin evrimini ve ilişkilerini merak edenler bu platformdan faydalanacaktır.

paymentsGelir Modeli

Freemium modeli. Temel arama ve keşif özellikleri ücretsiz sunulur. Gelişmiş filtreleme, API erişimi, sınırsız koleksiyon oluşturma, yüksek çözünürlüklü glif indirme ve takım özellikleri gibi premium özellikler için aylık/yıllık abonelik satışı. Ayrıca, kurumsal müşteriler için özel entegrasyonlar ve destek seçenekleri sunulabilir.

Aksiyon Planı

Görsel Benzerlik Araması: Yüklenen bir glifin veya seçilen bir karakterin görsel olarak benzer tüm Unicode karakterlerini listeleyen gelişmiş arama motoru.

Kapsamlı Unicode Veritabanı: Tüm Unicode karakterlerini (genel, özel semboller, emojiler vb.) içeren, script, blok, kategori ve ad bazında aranabilir veritabanı.

Karakter Detay Sayfası: Her karakter için glif önizlemesi, Unicode adı, kod noktası, kategori, blok, yönlendirme bilgisi (bidi), açıklama, ilgili karakterler ve kullanım örnekleri.

İlgili Karakter Keşfi: Seçilen bir karakterin aynı script, benzer şekil veya kullanım amacına sahip diğer karakterlerle görsel ve yapısal olarak ilişkilendirilmesi.

Kişisel Koleksiyonlar: Kullanıcıların favori karakterlerini kaydetmeleri ve özel koleksiyonlar oluşturmaları için basit bir sistem.

Pazar Analizi

7.8Puan

Kaynak: Hacker Newsopen_in_new

AI Prompt

Generate a fully functional, multi-page Next.js MVP application for 'Glyph Explorer Pro' based on the provided concept and requirements. The application should be a SaaS platform enabling users to visually explore Unicode characters and their similarities.

PROJECT OVERVIEW:
'Glyph Explorer Pro' is a SaaS application designed to revolutionize how developers, designers, and typographers interact with the Unicode character set. It addresses the challenge of finding visually similar characters, understanding their relationships, and accessing detailed information about them. The core value proposition lies in providing an intuitive, visually driven interface powered by advanced AI (SigLIP 2) for similarity comparisons, making the vast Unicode standard more accessible and manageable. It solves the problem of tedious manual searching and the difficulty of identifying visually alike characters across different scripts and symbols.

TECH STACK:
- Framework: Next.js (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- UI Library: shadcn/ui (for pre-built components like buttons, dialogs, tables, input fields)
- ORM: Drizzle ORM (for type-safe database interactions)
- Database: PostgreSQL (or any compatible SQL database supported by Drizzle)
- Authentication: NextAuth.js (or Clerk for simpler integration)
- State Management: React Context API / Zustand (for global state if needed, otherwise component local state)
- API Layer: Next.js API Routes or Route Handlers
- Utility Libraries: `zod` for schema validation, `react-hook-form` for form management.
- AI/ML: Utilize a pre-trained model or an API for visual similarity. For this MVP, we'll simulate the visual similarity aspect by pre-calculating embeddings or using a placeholder logic, assuming SigLIP 2 integration would be a follow-up.

DATABASE SCHEMA:
We'll need at least three core tables:
1.  `users`:
    - `id` (UUID, Primary Key)
    - `name` (VARCHAR)
    - `email` (VARCHAR, Unique)
    - `emailVerified` (TIMESTAMP)
    - `image` (VARCHAR, nullable)
    - `createdAt` (TIMESTAMP)
    - `updatedAt` (TIMESTAMP)

2.  `unicode_characters`:
    - `id` (SERIAL, Primary Key)
    - `codePoint` (INTEGER, Unique, Indexed)
    - `character` (VARCHAR(1))
    - `name` (VARCHAR)
    - `category` (VARCHAR)
    - `block` (VARCHAR)
    - `script` (VARCHAR)
    - `bidirectionalCategory` (VARCHAR)
    - `generalCategory` (VARCHAR)
    - `decompositionMapping` (TEXT, nullable)
    - `numericValue` (TEXT, nullable)
    - `joiningGroup` (VARCHAR, nullable)
    - `lineBreak` (VARCHAR, nullable)
    - `eastAsianWidth` (VARCHAR, nullable)
    - `uppercaseMapping` (VARCHAR(1), nullable)
    - `lowercaseMapping` (VARCHAR(1), nullable)
    - `titlecaseMapping` (VARCHAR(1), nullable)
    - `description` (TEXT, nullable) - For custom notes or richer descriptions.
    - `visualSimilarityVector` (VECTOR, nullable) - Placeholder for SigLIP embeddings.
    - `createdAt` (TIMESTAMP)
    - `updatedAt` (TIMESTAMP)

3.  `user_collections`:
    - `id` (SERIAL, Primary Key)
    - `userId` (UUID, Foreign Key to `users.id`, Indexed)
    - `name` (VARCHAR)
    - `description` (TEXT, nullable)
    - `createdAt` (TIMESTAMP)
    - `updatedAt` (TIMESTAMP)

4.  `collection_characters` (Many-to-Many relationship between `user_collections` and `unicode_characters`):
    - `collectionId` (INTEGER, Foreign Key to `user_collections.id`, Indexed)
    - `characterId` (INTEGER, Foreign Key to `unicode_characters.id`, Indexed)
    - `addedAt` (TIMESTAMP)
    - Primary Key (`collectionId`, `characterId`)

CORE FEATURES & USER FLOW:

1.  Authentication Flow:
    - User lands on the homepage.
    - Options: 'Sign Up', 'Log In', or 'Explore as Guest'.
    - Guest users have limited access (e.g., cannot save collections).
    - Sign Up: Using email/password or OAuth (Google/GitHub).
    - Login: Using email/password or OAuth.
    - Post-authentication redirects to the dashboard or explore page.
    - Uses NextAuth.js with session management.

2.  Unicode Explorer Page (`/explore`):
    - Main interface for browsing and searching characters.
    - **Search Bar:** Primary input for searching by character, name, code point, or block.
    - **Filters:** Sidebar/dropdowns for filtering by Script, Category, Block, General Category, Bidirectional Category.
    - **Character Grid/List:** Displays matching characters. Each item shows the character, its code point, and name. On hover, shows a tooltip with more details.
    - **Visual Similarity Integration (Simulated for MVP):** A button on each character item or a dedicated section. When clicked, it should ideally trigger a search for visually similar characters. For MVP, this could be a placeholder feature showing characters from the same block or script as visually similar.
    - **Pagination:** For handling large result sets.

3.  Character Detail Page (`/explore/[codePoint]`):
    - Accessible by clicking a character in the grid/list or via direct URL.
    - Displays comprehensive details: Character, Code Point, Name, Category, Block, Script, Bidi, Description, Mappings, etc.
    - **'Add to Collection' Button:** If logged in, allows users to add the character to one of their existing collections or create a new one.
    - **'Find Similar' Button:** Triggers the visual similarity search (placeholder in MVP).

4.  Collections Management Page (`/collections`):
    - Accessible only to logged-in users.
    - Displays a list of the user's created collections.
    - Each collection item shows its name, description, and number of characters.
    - Options: View Collection, Edit Collection, Delete Collection.

5.  View Collection Page (`/collections/[collectionId]`):
    - Displays all characters within a specific collection.
    - Similar interface to the main Explore page but filtered to the collection's characters.
    - Allows removal of characters from the collection.
    - Edit collection details (name, description).

API & DATA FETCHING:
- **Backend:** Next.js API Routes / Route Handlers in the `app/api/` directory.
- **Data Fetching:** Utilize Server Components for initial data loading (e.g., listing characters on `/explore`) and Client Components with `fetch` or a library like `SWR` for dynamic data loading/updates (e.g., adding to collection, search results).
- **API Endpoints (Examples):
    - `GET /api/characters`: Fetch characters with filtering and pagination. Query params: `search`, `filter[script]`, `filter[category]`, `page`, `limit`.
    - `GET /api/characters/[codePoint]`: Fetch details for a specific character.
    - `GET /api/collections`: Fetch user's collections (requires auth).
    - `POST /api/collections`: Create a new collection (requires auth).
    - `GET /api/collections/[collectionId]`: Fetch characters in a specific collection (requires auth).
    - `POST /api/collections/[collectionId]/characters`: Add a character to a collection (requires auth).
    - `DELETE /api/collections/[collectionId]/characters/[characterId]`: Remove a character from a collection (requires auth).
    - `POST /api/auth/...`: Handled by NextAuth.js.
- **Request/Response:** Use JSON for request/response bodies. Validate requests using `zod` on the backend.
- **Data Structure:** Consistent JSON structure for character data, collection data, and API responses.

COMPONENT BREAKDOWN (Next.js App Router Structure):
- `app/layout.tsx`: Root layout (HTML, Body, Global Providers, Tailwind CSS config).
- `app/page.tsx`: Homepage (Marketing, Value Proposition, CTA to explore/signup).
- `app/explore/page.tsx`: Main exploration page. Contains `SearchBar`, `FilterSidebar`, `CharacterGrid`, `Pagination` components. Fetches initial character list server-side.
- `app/explore/[codePoint]/page.tsx`: Character Detail Page. Fetches character data server-side. Contains `CharacterDetailView`, `AddToCollectionButton` components.
- `app/collections/page.tsx`: User's Collections List page. Fetches collections server-side. Contains `CollectionList`, `CreateCollectionForm` components.
- `app/collections/[collectionId]/page.tsx`: Specific Collection View page. Fetches collection details and characters server-side. Contains `CollectionDetailView`, `RemoveFromCollectionButton` components.
- `app/auth/[...nextauth]/route.ts`: NextAuth.js handler.
- `app/api/.../route.ts`: API route handlers for CRUD operations.

Reusable UI Components (using shadcn/ui):
- `components/ui/button`: For CTAs, actions.
- `components/ui/input`: For search and form inputs.
- `components/ui/card`: For displaying character previews in the grid.
- `components/ui/dialog`: For confirmation modals (e.g., delete collection).
- `components/ui/dropdown-menu`, `components/ui/select`: For filter options.
- `components/ui/table`: Potentially for detailed character lists or collection management.
- `components/ui/skeleton`: For loading states.
- `components/ui/tooltip`: For quick info on hover.
- `components/ui/pagination`: For navigating through results.
- `components/ui/form`: Using `react-hook-form` and shadcn/ui integration for forms.

State Management:
- Server Components fetch data directly.
- Client Components manage local UI state (e.g., dropdown open/closed, form inputs).
- Global state (e.g., user authentication status, maybe search filters) managed with Zustand or Context API if complexity increases.

UI/UX DESIGN & VISUAL IDENTITY:
- **Design Style:** Minimalist Clean with subtle interactive elements.
- **Color Palette:**
    - Primary: `#6366F1` (Indigo-500) - For primary actions, highlights.
    - Secondary: `#8B5CF6` (Violet-500) - For secondary actions, accents.
    - Background: `#FFFFFF` (White) - Clean, spacious background for content.
    - Surface: `#F9FAFB` (Gray-100) - Slightly off-white for cards, sidebars.
    - Text: `#1F2937` (Gray-900) - Dark, readable text.
    - Muted Text: `#6B7280` (Gray-500) - For secondary information.
    - Accent/Hover: `#A78BFA` (Violet-400) - Subtle highlights on hover.
- **Typography:** Inter font family (from Google Fonts). Use variable weights for hierarchy (e.g., 700 for headings, 500 for subheadings, 400 for body text).
    - Headings: `font-bold text-3xl` (e.g., `<h1>`)
    - Subheadings: `font-medium text-lg`
    - Body: `font-normal text-base`
- **Layout:** Use a responsive grid system (Tailwind CSS). Clear separation of concerns: Header (Nav/Auth), Main Content Area (Explore Grid/Details), Sidebar (Filters).
- **Responsive Rules:** Mobile-first approach. Ensure usability on small screens with collapsible sidebars/menus. Desktop view can utilize wider layouts.
- **Visual Elements:** Focus on clear display of glyphs. Use subtle borders and shadows to define UI elements without cluttering. Ensure high contrast for readability.

ANIMATIONS:
- **Page Transitions:** Subtle fade-in/out using Next.js `AnimatePresence` or similar library for route transitions.
- **Hover Effects:** Slight scale-up or background color change on interactive elements (buttons, character cards).
- **Loading States:** Use `Skeleton` components from shadcn/ui while data is fetching. Spinners for ongoing operations (e.g., adding to collection).
- **Micro-interactions:** Smooth opening/closing of filter menus, subtle transitions when adding items to collections.

EDGE CASES:
- **Authentication:** Handle logged-in vs. guest user states gracefully. Protect routes requiring authentication.
- **Empty States:** Display user-friendly messages and potential CTAs when no characters match a search, or when a user has no collections (`/collections` page).
- **Error Handling:** Implement robust error handling for API requests. Display user-friendly error messages (e.g., 'Could not load characters', 'Failed to add to collection'). Use `try...catch` blocks and zod validation errors.
- **Validation:** Client-side and server-side validation for all user inputs (search queries, collection names, etc.) using `zod`.
- **Data Integrity:** Ensure database constraints (unique keys, foreign keys) are maintained.
- **Rate Limiting:** Consider for API routes if expecting heavy usage in the future.
- **Visual Similarity Accuracy:** Clearly indicate that the MVP's visual similarity is a simulation or placeholder.

SAMPLE/MOCK DATA:

1.  **User (for testing auth):**
    ```json
    {
      "id": "d290f1ee-6c54-4b0b-8b9d-abcb77376669",
      "name": "Test User",
      "email": "test@example.com",
      "image": "/images/default-avatar.png"
    }
    ```

2.  **Unicode Character (A):**
    ```json
    {
      "id": 1,
      "codePoint": 65,
      "character": "A",
      "name": "LATIN CAPITAL LETTER A",
      "category": "Lu",
      "block": "Basic Latin",
      "script": "Latn",
      "bidirectionalCategory": "L",
      "description": "The first letter of the basic Latin alphabet."
    }
    ```

3.  **Unicode Character (Alpha):**
    ```json
    {
      "id": 2,
      "codePoint": 913,
      "character": "Α",
      "name": "GREEK CAPITAL LETTER ALPHA",
      "category": "Lu",
      "block": "Greek and Coptic",
      "script": "Grek",
      "bidirectionalCategory": "L",
      "description": "The first letter of the Greek alphabet."
    }
    ```

4.  **Unicode Character (Emoji - Smiling Face):**
    ```json
    {
      "id": 3,
      "codePoint": 128512,
      "character": "😀",
      "name": "GRINNING FACE",
      "category": "So",
      "block": "Emoticons",
      "script": "Zyyy",
      "bidirectionalCategory": "L",
      "description": "A classic smiling face emoji."
    }
    ```

5.  **User Collection:**
    ```json
    {
      "id": 101,
      "userId": "d290f1ee-6c54-4b0b-8b9d-abcb77376669",
      "name": "My Favorite Symbols",
      "description": "A collection of frequently used symbols."
    }
    ```

6.  **Character in Collection (linking Character ID 1 to Collection ID 101):**
    ```json
    {
      "collectionId": 101,
      "characterId": 1,
      "addedAt": "2023-10-27T10:00:00Z"
    }
    ```

7.  **Unicode Character (Similar to A, e.g., Cyrillic A):**
    ```json
    {
      "id": 4,
      "codePoint": 1040,
      "character": "А",
      "name": "CYRILLIC CAPITAL LETTER A",
      "category": "Lu",
      "block": "Cyrillic",
      "script": "Cyrl",
      "bidirectionalCategory": "L",
      "description": "Visually similar to Latin 'A' but part of the Cyrillic script."
    }
    ```

8.  **Placeholder Visual Similarity Result:** (This would be dynamically generated or queried)
    - For Code Point 65 ('A'): [
        {"characterId": 4, "similarityScore": 0.92}, // Cyrillic A
        {"characterId": 2, "similarityScore": 0.85}  // Greek Alpha
      ]

TURKISH TRANSLATIONS:
- Homepage Title: Glyph Explorer Pro
- Homepage Subtitle: Unicode Dünyasını Görsel Keşfedin
- Explore Button: Keşfet
- Sign Up Button: Kaydol
- Log In Button: Giriş Yap
- Guest Explore: Misafir Olarak Keşfet
- Search Placeholder: Karakter, İsim, Kod Noktası Ara...
- Filters Title: Filtreler
- Filter by Script: Script'e Göre Filtrele
- Filter by Category: Kategoriye Göre Filtrele
- Filter by Block: Bloka Göre Filtrele
- Add to Collection: Koleksiyona Ekle
- Create New Collection: Yeni Koleksiyon Oluştur
- Collection Name Label: Koleksiyon Adı
- Collection Description Label: Açıklama
- Save Collection Button: Kaydet
- My Collections: Koleksiyonlarım
- View Collection Button: Koleksiyonu Görüntüle
- Edit Collection Button: Düzenle
- Delete Collection Button: Sil
- Character Detail Title: Karakter Detayları
- Code Point Label: Kod Noktası
- Name Label: Ad
- Category Label: Kategori
- Block Label: Blok
- Script Label: Script
- Description Label: Açıklama
- No results found: Sonuç bulunamadı.
- Add to Collection Success: Koleksiyona başarıyla eklendi.
- Remove from Collection Button: Koleksiyondan Çıkar
- Confirm Deletion Title: Silme Onayı
- Confirm Deletion Message: Bu koleksiyonu silmek istediğinizden emin misiniz?
- Yes, Delete: Evet, Sil
- Cancel Button: İptal
- Loading...: Yükleniyor...
- Saved: Kaydedildi.
- Error Loading Data: Veri yüklenemedi.
- Login Required: Giriş Gerekli.
- Add to Collection (Logged Out): Koleksiyona eklemek için lütfen giriş yapın.
- Similar Characters: Benzer Karakterler (Simülasyon)