You are a senior full-stack developer tasked with building a complete, production-ready MVP of 'Founder's Compass' using Next.js 14 (App Router), Tailwind CSS, and Drizzle ORM with PostgreSQL. The application will serve as a mentorship and resource platform for early-stage startup founders.
**1. PROJECT OVERVIEW:**
Founder's Compass aims to solve the isolation and lack of structured support faced by early-stage startup founders. Inspired by the challenges of solo founders like the creator of Waterfox, this platform will connect aspiring entrepreneurs with experienced mentors, provide access to curated resources (articles, templates, tools), and foster a supportive community. The core value proposition is to accelerate founder learning, reduce the 'loneliness of the founder,' and increase the chances of startup success by providing guidance, shared knowledge, and networking opportunities within a dedicated ecosystem.
**2. TECH STACK:**
- **Framework:** Next.js 14 (App Router)
- **Styling:** Tailwind CSS v3+
- **ORM:** Drizzle ORM
- **Database:** PostgreSQL (via Vercel Postgres or Supabase)
- **UI Components:** shadcn/ui (for accessible, reusable components)
- **Authentication:** NextAuth.js (for robust email/password and OAuth support - Google, GitHub)
- **State Management:** React Context API or Zustand (for global state if needed, otherwise component state)
- **Form Handling:** React Hook Form + Zod (for validation)
- **Data Fetching:** Server Components, Route Handlers (API routes), and potentially React Query for client-side caching if complex interactions arise.
- **Deployment:** Vercel
- **Other:** ESLint, Prettier, TypeScript
**3. DATABASE SCHEMA (Drizzle ORM - PostgreSQL):**
```sql
-- Users table
users (id, name, email, emailVerified, image, hashedPassword, role ENUM('founder', 'mentor', 'admin'))
-- Accounts table (for NextAuth.js)
accounts (id, userId, type, provider, providerAccountId, refresh_token, access_token, expires_at, token_type, scope, id_token, session_state)
-- Sessions table (for NextAuth.js)
sessions (id, userId, expires, sessionToken)
-- Verification Tokens table (for NextAuth.js)
verificationTokens (identifier, token, expires)
-- Profiles table (Extends User info)
profiles (userId FK to users.id, bio TEXT, website VARCHAR(255), socialLinks JSONB, expertise TEXT[], seekingMentorship BOOLEAN, isSeekingMentors BOOLEAN, mentorSeekingAreas TEXT[], companyName VARCHAR(255), companyStage VARCHAR(50))
-- Mentorship Matches table
mentorshipMatches (id, founderId FK to users.id, mentorId FK to users.id, status ENUM('pending', 'accepted', 'rejected', 'ended'), createdAt TIMESTAMP DEFAULT NOW(), updatedAt TIMESTAMP DEFAULT NOW())
-- Resources table
resources (id, title VARCHAR(255), url VARCHAR(255), description TEXT, category VARCHAR(100), creatorId FK to users.id, createdAt TIMESTAMP DEFAULT NOW())
-- Forum Threads table
forumThreads (id, title VARCHAR(255), content TEXT, authorId FK to users.id, category VARCHAR(100), createdAt TIMESTAMP DEFAULT NOW(), updatedAt TIMESTAMP DEFAULT NOW())
-- Forum Posts table
forumPosts (id, threadId FK to forumThreads.id, content TEXT, authorId FK to users.id, createdAt TIMESTAMP DEFAULT NOW(), updatedAt TIMESTAMP DEFAULT NOW())
-- Messages table (for direct messaging)
messages (id, senderId FK to users.id, receiverId FK to users.id, content TEXT, readAt TIMESTAMP, createdAt TIMESTAMP DEFAULT NOW())
```
**4. CORE FEATURES & USER FLOW:**
* **Authentication (NextAuth.js):**
* **Flow:** Users can sign up with email/password or OAuth (Google/GitHub). Existing users can log in. Password reset functionality. Users are assigned a default role ('founder') upon signup, which can be changed to 'mentor' or 'admin' by an administrator or through a profile setting if they meet criteria.
* **Implementation:** Use NextAuth.js with a PostgreSQL adapter. Protect routes using middleware or Server Component checks.
* **User Profile Management:**
* **Flow:** After login, users are redirected to create/edit their profile. Founders can specify their startup stage, industry, needs, and what they seek in a mentor. Mentors can detail their expertise, experience, and availability.
* **Implementation:** A dedicated `/profile` page with forms (using React Hook Form + Zod) to update `profiles` table linked to the `users` table. Handle image uploads for profile pictures.
* **Mentor Matching:**
* **Flow:** Founders can browse available mentors (filtered by expertise, industry). They can send a mentorship request. Mentors receive requests, can accept or reject them. Accepted matches create a record in `mentorshipMatches` and notify both parties. A 'matching algorithm' can be implemented later, but MVP uses manual browsing and requests.
* **Implementation:** `/mentors` page listing mentors (fetching from `users` and `profiles` tables). `/mentorship/requests` page for founders to see sent requests and `/mentorship/incoming` for mentors. A dedicated page for active mentorships.
* **Resource Library:**
* **Flow:** Users can browse, search, and filter resources by category. Founders can submit new resources (pending admin approval in MVP). Mentors or admins can add/edit/delete resources.
* **Implementation:** `/resources` page displaying resources fetched from the `resources` table. Implement search and filtering logic. A form for resource submission. Admin interface for resource management.
* **Community Forum:**
* **Flow:** Users can view forum threads, create new threads, and post replies within threads. Threads are categorized.
* **Implementation:** `/forum` page listing threads. `/forum/[threadId]` page showing posts for a specific thread. Forms for creating threads and posts, interacting with `forumThreads` and `forumPosts` tables.
**5. API & DATA FETCHING:**
* **Server Components:** Primary data fetching will occur in Server Components for SEO and performance. Example: `async function MentorsPage() { const mentors = await db.query.users.findMany({ where: (u, { eq }) => eq(u.role, 'mentor'), with: { profile: true } }); return <MentorList mentors={mentors} /> }`
* **Route Handlers (API Routes):** Used for actions like form submissions, mutations (creating/updating/deleting data), and handling NextAuth.js callbacks. Example: `POST /api/resources` to create a new resource.
* **Client-side Data Fetching:** Primarily for dynamic UIs like real-time updates in chat or form state. Use `fetch` within `useEffect` or a library like SWR/React Query if necessary, but prioritize Server Components.
* **Data Flow:** Server Components fetch data and pass it as props to Client Components. Mutations trigger revalidation of data using `revalidatePath` or `revalidateTag` from `next/cache`.
**6. COMPONENT BREAKDOWN (App Router Structure):**
* **`app/layout.tsx`:** Root layout (<html>, <body>, TailwindProvider, AuthProvider).
* **`app/page.tsx`:** Landing Page (marketing content, value proposition, CTAs).
* **`app/(auth)/login/page.tsx`:** Login page.
* **`app/(auth)/signup/page.tsx`:** Signup page.
* **`app/(auth)/reset-password/page.tsx`:** Password reset page.
* **`app/dashboard/page.tsx`:** User dashboard (personalized view for founders/mentors).
* **Components:** `DashboardStats`, `RecentActivityFeed`, `QuickLinks`.
* **`app/profile/page.tsx`:** User profile editing page.
* **Components:** `ProfileForm` (dynamic based on role), `AvatarUpload`.
* **`app/mentors/page.tsx`:** Browse mentors page.
* **Components:** `MentorCard`, `FilterSidebar`, `SearchInput`.
* **`app/mentors/[mentorId]/page.tsx`:** Individual mentor profile view.
* **Components:** `MentorProfileDetails`, `RequestMentorButton`.
* **`app/mentorship/requests/page.tsx`:** Incoming mentorship requests for mentors.
* **Components:** `RequestListItem`, `AcceptRejectButtons`.
* **`app/mentorship/active/page.tsx`:** List of active mentorships.
* **Components:** `ActiveMentorshipCard`, `MessageButton`, `EndSessionButton`.
* **`app/resources/page.tsx`:** Resource library page.
* **Components:** `ResourceCard`, `ResourceFilter`, `ResourceSearch`.
* **`app/resources/submit/page.tsx`:** Form to submit a new resource.
* **`app/forum/page.tsx`:** Main forum page listing threads.
* **Components:** `ThreadListItem`, `CreateThreadButton`.
* **`app/forum/[threadId]/page.tsx`:** View a specific forum thread and its posts.
* **Components:** `ThreadView`, `PostListItem`, `CreatePostForm`.
* **`app/settings/page.tsx`:** Account settings page.
* **`app/api/...`:** Route handlers for authentication, mutations, etc.
* **`components/ui/...`:** Reusable shadcn/ui components.
* **`components/layout/...`:** `Navbar`, `Footer`, `Sidebar`.
* **`lib/...`:** Utility functions, DB client setup (Drizzle).
* **`hooks/...`:** Custom React hooks.
* **`styles/globals.css`:** Tailwind CSS base styles.
**7. UI/UX DESIGN & VISUAL IDENTITY:**
* **Style:** "Clean & Professional" with a touch of warmth. Focus on clarity, ease of navigation, and a trustworthy feel.
* **Color Palette:**
* Primary: `#4A90E2` (A calm, professional blue)
* Secondary: `#50E3C2` (A vibrant, encouraging teal/green for accents)
* Background: `#FFFFFF` (Clean white for main content areas)
* Dark Background: `#1F2937` (Dark gray for subtle contrast, e.g., footers, sidebars)
* Text: `#111827` (Near black for primary text), `#6B7280` (Gray for secondary text)
* Alerts: `#F87171` (Red for errors), `#FBBF24` (Yellow for warnings)
* **Typography:**
* Headings: Inter (e.g., Inter-Bold)
* Body Text: Inter (e.g., Inter-Regular)
* **Layout:** Use a 3-column layout on wider screens (sidebar nav, main content, perhaps a contextual panel). Single column on mobile. Consistent padding and margins (based on Tailwind's spacing scale).
* **UI Elements:** Utilize shadcn/ui for consistent, accessible buttons, cards, forms, dialogs, etc. Subtle use of rounded corners.
**8. SAMPLE/MOCK DATA:**
* **User (Founder):** `{ id: 'founder-1', name: 'Alex Johnson', email: 'alex@example.com', role: 'founder', profile: { companyName: 'Innovate Solutions', companyStage: 'Seed', seekingMentorship: true, mentorSeekingAreas: ['Product Strategy', 'Fundraising'] } }`
* **User (Mentor):** `{ id: 'mentor-1', name: 'Dr. Evelyn Reed', email: 'evelyn.reed@email.com', role: 'mentor', profile: { expertise: ['AI', 'SaaS Growth', 'Team Building'], website: 'https://evelynreed.com' } }`
* **Mentorship Match:** `{ id: 'match-1', founderId: 'founder-1', mentorId: 'mentor-1', status: 'accepted' }`
* **Resource:** `{ id: 'res-1', title: 'The Lean Startup Summary', url: 'https://example.com/lean-startup-summary', description: 'Key concepts from Eric Ries's book.', category: 'Methodologies', creatorId: 'mentor-1' }`
* **Forum Thread:** `{ id: 'thread-1', title: 'Best tools for early-stage user research?', authorId: 'founder-1', category: 'Product Development', createdAt: '2023-10-26T10:00:00Z' }`
* **Forum Post:** `{ id: 'post-1', threadId: 'thread-1', content: 'I've been using UserTesting.com and it's quite effective...', authorId: 'founder-1', createdAt: '2023-10-26T10:15:00Z' }`
**9. ANIMATIONS:**
* **Page Transitions:** Subtle fade-in/out using Next.js's default behavior or a simple animation library if needed.
* **Hover Effects:** Slight scale or background color change on buttons and interactive elements.
* **Loading States:** Use Tailwind's CSS spinners or shadcn/ui's `Skeleton` component for data loading placeholders.
* **Micro-interactions:** Smooth transitions for dropdowns, modals, and form feedback.
**10. EDGE CASES & VALIDATION:**
* **Auth:** Handle invalid login credentials, OAuth errors, expired sessions gracefully. Ensure users cannot access protected routes without logging in.
* **Data Validation:** Use Zod with React Hook Form for all form inputs on both client and server sides. Implement checks for uniqueness (e.g., email during signup).
* **Empty States:** Design clear UI states for when lists are empty (no mentors found, no resources, no forum threads, no active mentorships). Provide clear calls to action.
* **Error Handling:** Implement global error handling (e.g., using a toast notification system) for API errors. Display user-friendly error messages. Ensure proper error logging.
* **Authorization:** Implement role-based access control. Mentors shouldn't see founder-specific private data unless relevant (e.g., in a mentorship context). Admins have broader privileges.
* **Resource Submission:** Implement a pending state for submitted resources, requiring admin approval before becoming public.
**11. TURKISH TRANSLATIONS:**
* **App Title:** Kurucu Pusulası (Founder's Compass)
* **Navigation:** Pano (Dashboard), Profilim (My Profile), Mentorlar (Mentors), Kaynaklar (Resources), Forum, Ayarlar (Settings)
* **Buttons:** Oturum Aç (Login), Kaydol (Sign Up), Kaydet (Save), İstek Gönder (Send Request), Kabul Et (Accept), Reddet (Reject), Kaynak Ekle (Add Resource), Konu Aç (Create Thread), Gönder (Post/Send)
* **Placeholders/Labels:** E-posta Adresi (Email Address), Şifre (Password), Uzmanlık Alanları (Expertise Areas), Aranan Mentorluklar (Seeking Mentorships), Kaynak Başlığı (Resource Title), Konu Başlığı (Thread Title), Mesaj (Message)
* **Section Titles:** Aktif Mentorluklarım (My Active Mentorships), Yeni Konular (New Threads), Popüler Kaynaklar (Popular Resources)
* **Notifications:** İstek başarıyla gönderildi (Request sent successfully), Profil güncellendi (Profile updated), Mesaj gönderildi (Message sent).