Feat/personal site

.gitignore

@@ -5,3 +5,4 @@ dist/
 *.log
 .DS_Store
 .vercel
+.env*.local

STYLING.md

@@ -0,0 +1,82 @@
+# String Design System
+
+## Color Palette
+
+### Primary Colors
+- **String Mint**: `#75F8CC` (RGB: 117, 248, 204)
+- **String Dark**: `#33373B` (RGB: 51, 55, 59)
+- **String Light**: `#C0F4FB` (RGB: 192, 244, 251)
+- **White**: `#FFFFFF`
+
+### Usage Guidelines
+- **String Mint**: Primary accent, buttons, highlights, active states
+- **String Dark**: Text, backgrounds, headers
+- **String Light**: Secondary accents, subtle backgrounds
+- **White**: Main backgrounds, cards
+
+## Component Patterns
+
+### Buttons
+```tsx
+// Primary Button
+className="bg-string-mint text-string-dark hover:bg-string-mint-light px-4 py-2 rounded-xl font-medium transition-colors"
+
+// Secondary Button
+className="bg-white border border-gray-200 text-string-dark hover:bg-gray-50 px-4 py-2 rounded-xl font-medium transition-colors"
+
+// Text Button
+className="text-string-mint hover:text-string-mint-light font-medium transition-colors"
+```
+
+### Cards
+```tsx
+className="bg-white rounded-xl p-6 shadow-sm border border-gray-100 hover:border-string-mint transition-colors"
+```
+
+### Headers
+```tsx
+// Main Header
+className="text-3xl font-bold text-string-dark"
+
+// Section Header
+className="text-xl font-semibold text-string-dark"
+
+// Card Header
+className="text-lg font-medium text-string-dark"
+```
+
+### Interactive Elements
+- **Hover states**: Use `hover:border-string-mint` for subtle interactions
+- **Active states**: Use `border-string-mint text-string-mint` for selection
+- **Transitions**: Always include `transition-colors` or `transition-all duration-200`
+
+## Layout Standards
+
+### Spacing
+- **Container max-width**: `max-w-4xl` or `max-w-7xl`
+- **Section spacing**: `space-y-6` or `space-y-8`
+- **Card padding**: `p-6` or `p-8`
+- **Button padding**: `px-4 py-2` or `px-6 py-3`
+
+### Border Radius
+- **Cards**: `rounded-xl`
+- **Buttons**: `rounded-xl`
+- **Small elements**: `rounded-lg`
+- **Avatars**: `rounded-2xl`
+
+### Typography
+- **Display**: `text-3xl font-bold`
+- **Heading**: `text-xl font-semibold`
+- **Subheading**: `text-lg font-medium`
+- **Body**: `text-sm` or `text-base`
+- **Caption**: `text-xs`
+
+## Theme Support
+Components should support both light and dark themes using the `t()` helper function:
+
+```tsx
+const t = (light: string, dark: string) => isDark ? dark : light;
+
+// Usage
+className={`${t('bg-white', 'bg-string-dark')} ${t('text-string-dark', 'text-white')}`}
+```

api/submissions.ts

@@ -1,6 +1,6 @@
 import { neon } from '@neondatabase/serverless';
 import { drizzle } from 'drizzle-orm/neon-http';
-import { appSubmissions } from '../src/db/schema';
+import { appSubmissions, users } from '../src/db/schema';
 import { eq, desc } from 'drizzle-orm';
 
 // Edge runtime configuration
@@ -61,18 +61,35 @@ export default async function handler(request: Request) {
         );
       }
 
+      // Ensure user exists in database before creating submission
+      const existingUser = await db
+        .select()
+        .from(users)
+        .where(eq(users.id, submittedByUserId))
+        .limit(1);
+
+      if (existingUser.length === 0) {
+        // Create user if doesn't exist
+        await db.insert(users).values({
+          id: submittedByUserId,
+          email: submittedByEmail,
+          name: null,
+          slug: null,
+        });
+      }
+
+      // Insert submission
       await db.insert(appSubmissions).values({
         name,
         url,
-        description,
-        logoUrl,
-        category,
+        description: description || null,
+        logoUrl: logoUrl || null,
+        category: category || null,
         submittedByUserId,
         submittedByEmail,
         status: 'pending'
       });
 
-
       return new Response(
         JSON.stringify({ success: true, message: 'App submitted for review' }),
         {
@@ -123,7 +140,10 @@ export default async function handler(request: Request) {
   } catch (error) {
     console.error('Database error:', error);
     return new Response(
-      JSON.stringify({ error: 'Internal server error' }),
+      JSON.stringify({
+        error: 'Internal server error',
+        details: error instanceof Error ? error.message : 'Unknown error'
+      }),
       {
         status: 500,
         headers: { ...corsHeaders, 'Content-Type': 'application/json' },

claude.md

@@ -1,7 +1,7 @@
 # String.sg v2 - Development Plan
 
-**Last Updated:** 2026-02-01
-**Status:** Phase 3 Ready - Backend + Frontend Complete
+**Last Updated:** 2026-02-12
+**Status:** Phase 4 Complete + UI Design System Established
 
 ---
 
@@ -43,6 +43,17 @@
 - [x] App submission form for authenticated users
 - [x] User dashboard with profile/submissions/submit tabs
 - [x] Mobile-responsive pin/unpin with long-press interactions
+- [x] **UI Design System**: String brand colors (#75F8CC mint, #33373B dark, #C0F4FB light)
+- [x] **Component Architecture**: Reusable UI components (Button, Card, AppCard, Header)
+- [x] **Profile Components**: Abstracted ProfileHeader, AppsList, ProfileFooter for dev/prod consistency
+- [x] **Profile UX**: Apps ordered by user contributions first, profile info moved to bottom
+- [x] **Development Mode**: DevProfileMock component for local testing without API dependencies
+- [x] **Submission UX Improvements**:
+  - Enhanced empty submissions state with actionable CTA (clickable + icon)
+  - App name autocomplete to prevent duplicate submissions
+  - Fixed modal styling to match String brand guidelines (mint green buttons)
+  - Removed duplicate title in submission form
+  - Submission modal accessible from both homepage and dashboard + buttons
 
 ### 🔲 Phase 5: Personal Profile Pages (NEXT)
 - [ ] Email-prefix slug generation (e.g., `string.sg/lee-kh`)
@@ -68,7 +79,8 @@
 | Layer | Technology | Status |
 |-------|------------|--------|
 | Frontend | React 19 + Vite 7 + TypeScript | ✅ |
-| Styling | Tailwind CSS 4 | ✅ |
+| Styling | Tailwind CSS 4 + String Design System | ✅ |
+| Components | Abstracted UI Library (Button, Card, etc.) | ✅ |
 | Database | NeonDB (PostgreSQL) | ✅ |
 | ORM | Drizzle | ✅ |
 | API | Vercel Edge Functions | ✅ |
@@ -101,6 +113,23 @@ string-v2/
 │   ├── scrape-schools.ts    # School directory scraper ✅
 │   └── seed-apps.ts         # Database seeder ✅
 ├── src/
+│   ├── components/
+│   │   ├── ui/
+│   │   │   ├── Button.tsx       # Reusable button component ✅
+│   │   │   ├── Card.tsx         # Reusable card component ✅
+│   │   │   ├── AppCard.tsx      # App display card ✅
+│   │   │   ├── Header.tsx       # Navigation header ✅
+│   │   │   └── Modal.tsx        # Modal component ✅
+│   │   ├── profile/
+│   │   │   ├── ProfileHeader.tsx # Profile info component ✅
+│   │   │   ├── AppsList.tsx     # Apps grid with sorting ✅
+│   │   │   └── ProfileFooter.tsx # Branded footer ✅
+│   │   ├── dashboard/
+│   │   │   └── MySubmissions.tsx # User submissions tab ✅
+│   │   ├── AppSubmissionForm.tsx # App submission form with autocomplete ✅
+│   │   ├── DevProfileMock.tsx   # Development profile mock ✅
+│   │   ├── PersonalProfile.tsx  # Production profile page ✅
+│   │   └── UserDashboard.tsx    # User dashboard ✅
 │   ├── db/
 │   │   ├── schema.ts        # Drizzle schema (8 tables) ✅
 │   │   └── index.ts         # DB connection ✅
@@ -111,6 +140,7 @@ string-v2/
 │   ├── App.tsx              # Main landing page ✅
 │   ├── main.tsx             # React entry ✅
 │   └── index.css            # Tailwind styles ✅
+├── STYLING.md               # Design system documentation ✅
 ├── drizzle.config.ts        # Drizzle config ✅
 ├── vite.config.ts           # Vite config ✅
 ├── tailwind.config.js       # Tailwind config ✅
@@ -249,11 +279,23 @@ Response: { user: {...}, apps: [...] }
 POST /api/profile/apps { appId, type, isVisible }
 ```
 
-#### Components to Create
+#### Components Architecture ✅ COMPLETE
 ```typescript
-// PersonalLauncherPage.tsx - Public profile view
-// ProfileManagement.tsx - Inline visibility controls
-// PublicPreviewToggle.tsx - WYSIWYG toggle component
+// ProfileHeader.tsx - Profile info display (abstracted) ✅
+// AppsList.tsx - Apps grid with contribution ordering ✅
+// ProfileFooter.tsx - Branded footer with SVG logo ✅
+// DevProfileMock.tsx - Development testing component ✅
+// PersonalProfile.tsx - Production profile page ✅
+
+// UI Components Library ✅
+// Button.tsx, Card.tsx, AppCard.tsx, Header.tsx ✅
+
+// Design Features ✅
+- User contributions ordered first before pinned apps
+- Profile info moved to bottom for content-first UX
+- String dark navbar (#33373B) for better contrast
+- SVG logo in footer for improved readability
+- Abstracted components prevent dev/prod inconsistencies
 ```
 
 #### Implementation Approach
@@ -288,13 +330,35 @@ mkdir extension
 
 ---
 
+## Recent Improvements (2026-02-12)
+
+### App Submission UX Overhaul
+**Problem:** Submission flow was disconnected and modal didn't follow brand guidelines
+**Solution:**
+1. **Enhanced Empty State** - MySubmissions tab now shows actionable CTA with clickable + icon
+2. **Autocomplete for Duplicates** - App name field queries existing apps and warns users about duplicates
+3. **Brand Consistency** - Updated all modal styling to use String mint (#75F8CC) instead of generic blue
+4. **Unified Access** - Submission modal accessible from both homepage + button and dashboard
+5. **Cleaner UI** - Removed duplicate title, modal header now serves as the only title
+
+**Technical Details:**
+- `AppSubmissionForm.tsx`: Added autocomplete dropdown with real-time filtering
+- `MySubmissions.tsx`: Enhanced empty state with interactive + button
+- `App.tsx`: Added modal state and wired + button in header
+- All inputs now use `focus:ring-string-mint` for consistent brand experience
+
+---
+
 ## UGC Workflow
 
-1. User submits app via form
-2. Saved with `status: 'pending'`
-3. **Submitter sees their app immediately**
-4. Admin reviews via Drizzle Studio
-5. Approved → visible globally
+1. User clicks + icon (homepage or dashboard)
+2. Modal opens with app submission form
+3. User types app name → autocomplete suggests existing apps to prevent duplicates
+4. If selecting existing app → yellow warning appears
+5. Form validates and submits with `status: 'pending'`
+6. **Submitter sees their app immediately in dashboard**
+7. Admin reviews via Drizzle Studio
+8. Approved → visible globally in app directory
 
 ---
 

index.html

@@ -3,8 +3,23 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="theme-color" content="#1a1d1f" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="theme-color" content="#33373B" />
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+
+    <!-- Apple Touch Icons -->
+    <link rel="apple-touch-icon" href="/apple-touch-icon-iphone-60x60.png" />
+    <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-ipad-76x76.png" />
+    <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-iphone-retina-120x120.png" />
+    <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-ipad-retina-152x152.png" />
+
+    <!-- Microsoft Tile -->
+    <meta name="msapplication-TileColor" content="#33373B" />
+    <meta name="msapplication-TileImage" content="/mstile-150x150.png" />
+
     <title>String - App Launcher for Educators</title>
 
     <!-- Google Analytics -->