Generate a fully functional, multi-page Next.js MVP application for 'DS Dev Hub', a centralized platform for Nintendo DS homebrew developers. The application should serve as a project management hub, resource library, and community forum for developers working with the Nintendo DS platform, specifically leveraging the 'libnds' library.
**PROJECT OVERVIEW:**
DS Dev Hub aims to solve the problem of fragmented resources and community interaction for Nintendo DS homebrew developers. The platform will provide a single place for developers to showcase their projects, manage their development lifecycle, access essential documentation and tools, and connect with other like-minded individuals. The core value proposition is to streamline the DS homebrew development process by fostering a supportive and organized community.
**TECH STACK:**
- **Framework:** Next.js (App Router)
- **Language:** TypeScript
- **Styling:** Tailwind CSS
- **ORM:** Drizzle ORM (PostgreSQL with Neon.tech or similar)
- **UI Components:** shadcn/ui
- **Authentication:** NextAuth.js (using GitHub and/or Google providers)
- **State Management:** React Context API / Zustand (for global state)
- **Form Handling:** react-hook-form
- **Validation:** Zod
- **Database:** PostgreSQL
- **Deployment:** Vercel (recommended)
- **Other:** React Hook Form, Zod for validation.
**DATABASE SCHEMA:**
1. **`users`**
- `id` (uuid, primary key)
- `name` (varchar)
- `email` (varchar, unique)
- `emailVerified` (timestamp, null)
- `image` (varchar, null)
- `createdAt` (timestamp, default now())
- `updatedAt` (timestamp, default now())
2. **`accounts`** (for NextAuth.js)
- `id` (bigint, primary key)
- `userId` (uuid, foreign key to users.id)
- `type` (varchar)
- `provider` (varchar)
- `providerAccountId` (varchar)
- `refresh_token` (text, null)
- `access_token` (text, null)
- `expires_at` (bigint, null)
- `token_type` (varchar, null)
- `scope` (varchar, null)
- `id_token` (text, null)
- `session_state` (varchar, null)
3. **`sessions`** (for NextAuth.js)
- `id` (bigint, primary key)
- `sessionToken` (varchar, unique)
- `userId` (uuid, foreign key to users.id)
- `expires` (timestamp)
4. **`verificationTokens`** (for NextAuth.js)
- `identifier` (varchar)
- `token` (varchar, unique)
- `expires` (timestamp)
5. **`projects`**
- `id` (uuid, primary key)
- `userId` (uuid, foreign key to users.id)
- `title` (varchar, not null)
- `description` (text, not null)
- `status` (varchar, default 'Ongoing') -- e.g., 'Ongoing', 'Completed', 'On Hold'
- `repositoryUrl` (varchar, null) -- Link to GitHub/GitLab repo
- `demoUrl` (varchar, null) -- Link to demo video/page
- `tags` (varchar array, null) -- e.g., ['libnds', 'game', 'utility']
- `createdAt` (timestamp, default now())
- `updatedAt` (timestamp, default now())
6. **`resources`**
- `id` (uuid, primary key)
- `userId` (uuid, foreign key to users.id)
- `title` (varchar, not null)
- `description` (text, not null)
- `url` (varchar, not null) -- Link to the resource (document, tool, etc.)
- `type` (varchar) -- e.g., 'Documentation', 'Tool', 'Tutorial', 'Example Code'
- `tags` (varchar array, null)
- `createdAt` (timestamp, default now())
- `updatedAt` (timestamp, default now())
7. **`forum_topics`**
- `id` (uuid, primary key)
- `userId` (uuid, foreign key to users.id)
- `title` (varchar, not null)
- `content` (text, not null)
- `createdAt` (timestamp, default now())
- `updatedAt` (timestamp, default now())
8. **`forum_posts`**
- `id` (uuid, primary key)
- `topicId` (uuid, foreign key to forum_topics.id)
- `userId` (uuid, foreign key to users.id)
- `content` (text, not null)
- `createdAt` (timestamp, default now())
- `updatedAt` (timestamp, default now())
**CORE FEATURES & USER FLOW:**
1. **Authentication (Sign Up/Log In):**
- User lands on the homepage.
- Clicks 'Sign Up' or 'Log In'.
- Redirected to NextAuth.js provider page (e.g., GitHub OAuth).
- Upon successful authentication, user is redirected to the dashboard.
- User profile is created/retrieved in the `users` table.
- User session is managed via cookies.
2. **User Profile Management:**
- Logged-in user navigates to 'Profile' page.
- Can view/edit their name, profile picture (upload functionality to be added in later versions, initially use provider image).
- User can add/edit/delete their listed projects.
- User can view resources they've submitted.
- User can view forum topics/posts they've created.
3. **Project Management:**
- **Creating a Project:**
- Navigate to 'My Projects' -> 'Add New Project'.
- Fill out the form: Title, Description, Status, Repository URL (optional), Demo URL (optional), Tags.
- Use `react-hook-form` and `zod` for validation.
- Submit button triggers API call to `/api/projects` (POST).
- On success, redirect to project list or project detail page.
- **Viewing Projects:**
- **List View:** On 'My Projects' page, display a list of user's projects (cards or table).
- **Detail View:** Click on a project to view its full details on `/projects/[projectId]` page.
- **Editing a Project:**
- On project detail page, click 'Edit'.
- Pre-fill form with existing data.
- Submit button triggers API call to `/api/projects/[projectId]` (PUT).
- Update `updatedAt` timestamp.
- **Deleting a Project:**
- On project detail page, click 'Delete'.
- Confirmation modal appears.
- On confirmation, trigger API call to `/api/projects/[projectId]` (DELETE).
4. **Resource Library:**
- **Viewing Resources:**
- Navigate to 'Resources' page.
- Display resources in a filterable/searchable list (e.g., cards).
- Filter by type ('Documentation', 'Tool', etc.), tags.
- **Adding a Resource:**
- Logged-in users navigate to 'Add Resource'.
- Fill out the form: Title, Description, URL, Type, Tags.
- Use `react-hook-form` and `zod` for validation.
- Submit button triggers API call to `/api/resources` (POST).
- **Resource Detail Page:** (Optional for MVP, could be a modal or link directly to URL)
5. **Forum:**
- **Viewing Topics:**
- Navigate to 'Forum' page.
- Display list of `forum_topics` (sorted by `updatedAt` or `createdAt`).
- Link to create new topic.
- **Viewing Posts in a Topic:**
- Click on a topic title to navigate to `/forum/topics/[topicId]`.
- Display `forum_posts` for that topic, sorted chronologically.
- Logged-in users can reply.
- **Creating a Topic:**
- On Forum page, click 'New Topic'.
- Fill out Title and Content.
- Submit triggers API call to `/api/forum/topics` (POST).
- **Replying to a Topic:**
- On topic detail page, fill out reply content.
- Submit triggers API call to `/api/forum/topics/[topicId]/posts` (POST).
- Update `forum_topics.updatedAt` timestamp.
**API & DATA FETCHING:**
- Use Next.js API Routes (`app/api/...`).
- Employ POST for creating resources, PUT for updating, DELETE for removing, GET for fetching.
- Fetch data in Server Components where possible for SEO and performance.
- Use Client Components with `fetch` or libraries like `swr` for dynamic data and mutations.
- All API routes should be protected and check for user authentication.
- **Example API Routes:**
- `POST /api/projects`: Create a new project.
- `GET /api/projects`: Get all projects for the logged-in user.
- `GET /api/projects/[projectId]`: Get a specific project.
- `PUT /api/projects/[projectId]`: Update a specific project.
- `DELETE /api/projects/[projectId]`: Delete a specific project.
- Similar patterns for `/api/resources` and `/api/forum/*`.
- **Request/Response:** Standard JSON. Use Zod for input validation in API routes.
- **Data Fetching Pattern:** Server Components fetch initial data using `async/await` with Drizzle ORM. Client Components use `fetch` in `useEffect` or mutation functions.
**COMPONENT BREAKDOWN (App Router Structure):**
- **`app/`**
- **`layout.tsx`:** Root layout (html, body, providers, main structure).
- **`page.tsx`:** Homepage (Introduction, Call to Action).
- **`dashboard/page.tsx`:** User dashboard (summary of projects, recent forum activity).
- **`dashboard/layout.tsx`:** Dashboard specific layout.
- **`dashboard/projects/page.tsx`:** List of user's projects.
- **`dashboard/projects/new/page.tsx`:** Form to create a new project.
- **`dashboard/projects/[projectId]/page.tsx`:** Project detail view.
- **`dashboard/projects/[projectId]/edit/page.tsx`:** Form to edit a project.
- **`resources/page.tsx`:** Browse and filter resources.
- **`resources/new/page.tsx`:** Form to add a new resource.
- **`forum/page.tsx`:** List of forum topics.
- **`forum/new/page.tsx`:** Form to create a new forum topic.
- **`forum/topics/[topicId]/page.tsx`:** View posts within a topic and reply.
- **`auth/signin/page.tsx`:** Sign-in page (using NextAuth.js).
- **`api/auth/[...nextauth]/route.ts`:** NextAuth.js handler.
- **`api/projects/route.ts`:** Project API routes (POST, GET).
- **`api/projects/[projectId]/route.ts`:** Project API routes (GET, PUT, DELETE).
- (Similar API routes for resources and forum)
- **`components/ui/`:** Re-usable UI elements from shadcn/ui (Button, Input, Card, Form, etc.).
- **`components/`:** Custom components:
- **`Navbar.tsx`:** Main navigation bar (logo, links, auth status).
- **`Footer.tsx`:** Footer section.
- **`ProjectCard.tsx`:** Card display for projects.
- **`ResourceCard.tsx`:** Card display for resources.
- **`ForumTopicList.tsx`:** Component to render list of topics.
- **`ForumPostList.tsx`:** Component to render posts in a topic.
- **`ProjectForm.tsx`:** Re-usable form component for creating/editing projects.
- **`ResourceForm.tsx`:** Re-usable form component for adding resources.
- **`AuthButton.tsx`:** Button for sign in/out.
- **`DataTable.tsx`:** (Optional) For displaying tabular data if needed.
**UI/UX DESIGN & VISUAL IDENTITY:**
- **Style:** Modern, Clean, Developer-Focused.
- **Color Palette:**
- Primary: `#007AFF` (A vibrant blue, reminiscent of code editors/links)
- Secondary: `#6F42C1` (A deep purple for accents and highlights)
- Background: `#F8F9FA` (Light gray for light mode)
- Surface: `#FFFFFF` (White for cards and content areas)
- Text (Dark): `#212529` (Near black for high contrast)
- Text (Light): `#6C757D` (Gray for secondary text)
- Accent/Status (e.g., orange/red): `#FD7E14`, `#DC3545`
- (Consider a dark mode variant: Background `#121212`, Surface `#1E1E1E`, Text `#E0E0E0`)
- **Typography:**
- Headings: Inter (Bold, Semi-Bold)
- Body Text: Inter (Regular)
- Code/Monospace: SFMono-Regular, Consolas, Monaco
- **Layout:** Use a standard 12-column Tailwind grid system. Max-width container for content (`max-w-7xl` or similar). Clear separation between sections. Sidebar navigation for dashboard pages.
- **Responsiveness:** Mobile-first approach. Ensure usability on various screen sizes.
- **Visual Elements:** Subtle gradients in buttons or headers. Use icons effectively (e.g., from Lucide React). Minimalistic illustrations or abstract background patterns.
**ANIMATIONS:**
- **Page Transitions:** Subtle fade-in/out for page transitions (using Next.js `Suspense` or a routing library plugin if needed).
- **Component Transitions:** Smooth transitions for expanding/collapsing elements (e.g., accordions, dropdowns).
- **Hover Effects:** Subtle scale or background color changes on interactive elements (buttons, links, cards).
- **Loading States:** Use shadcn/ui's `Skeleton` component or spinners (`lucide-react` icons) for data fetching.
- **Form Feedback:** Visual feedback for validation errors (e.g., red borders, small messages).
**EDGE CASES:**
- **Authentication:** Handle logged-out users gracefully (redirect to login, show appropriate messages).
- **Authorization:** Ensure users can only edit/delete their own content.
- **Empty States:** Design informative empty states for project lists, resource library, forum topics when no data exists. Include clear calls to action (e.g., 'Add your first project').
- **Data Validation:** Implement robust validation on all form inputs (client-side with Zod/react-hook-form) and API routes (server-side with Zod).
- **Error Handling:** Implement try/catch blocks in API routes and data fetching functions. Display user-friendly error messages (e.g., using toast notifications).
- **Rate Limiting:** Consider implementing rate limiting on API routes in production.
- **404 Pages:** Custom 404 page.
**SAMPLE DATA (Mock Data):**
**Projects:**
1. `{ id: 'uuid-1', userId: 'user-abc', title: 'DS Asteroids Clone', description: 'A classic Asteroids game remake for the Nintendo DS.', status: 'Ongoing', repositoryUrl: 'https://github.com/user/ds-asteroids', demoUrl: 'https://youtu.be/example1', tags: ['game', 'libnds', 'NES-style'] }`
2. `{ id: 'uuid-2', userId: 'user-def', title: 'DS File Explorer', description: 'A simple file manager for the DS using Slot-1.', status: 'Completed', repositoryUrl: 'null', demoUrl: 'null', tags: ['utility', 'filesystem', 'Slot-1'] }`
3. `{ id: 'uuid-3', userId: 'user-abc', title: 'DS Music Player', description: 'Basic audio playback utility.', status: 'On Hold', repositoryUrl: 'https://github.com/user/ds-music', demoUrl: 'null', tags: ['audio', 'utility', 'libnds'] }`
**Resources:**
1. `{ id: 'uuid-4', userId: 'user-xyz', title: 'libnds 1.3.1 Documentation', description: 'Official documentation for libnds.', url: 'http://example.com/libnds-docs', type: 'Documentation', tags: ['libnds', 'api', 'reference'] }`
2. `{ id: 'uuid-5', userId: 'user-xyz', title: 'DevKitPro Setup Guide', description: 'Step-by-step guide to setting up DevKitPro.', url: 'http://example.com/devkitpro-setup', type: 'Tutorial', tags: ['setup', 'devkitpro', 'getting started'] }`
3. `{ id: 'uuid-6', userId: 'user-pqr', title: 'DS SoundPlayer Example', description: 'Example code demonstrating sound playback.', url: 'http://example.com/ds-sound-example.zip', type: 'Example Code', tags: ['sound', 'libnds', 'example'] }`
4. `{ id: 'uuid-7', userId: 'user-pqr', title: 'GBATA (GBA Asset Tool)', description: 'Tool for extracting GBA assets, useful for DS projects.', url: 'http://example.com/gbata', type: 'Tool', tags: ['tools', 'assets', 'gba'] }`
**Forum Topics:**
1. `{ id: 'topic-a', userId: 'user-abc', title: 'Difficulty with Multiple Sprites', content: 'I am trying to manage multiple sprites in my game but I am facing issues with collision detection...', createdAt: '2024-01-15T10:00:00Z', updatedAt: '2024-01-15T11:30:00Z' }`
2. `{ id: 'topic-b', userId: 'user-def', title: 'Best practices for libnds optimization?', content: 'Looking for tips on how to make my homebrew run faster on the DS.', createdAt: '2024-01-14T09:00:00Z', updatedAt: '2024-01-14T09:00:00Z' }`
**Forum Posts:**
1. `{ id: 'post-1', topicId: 'topic-a', userId: 'user-xyz', content: 'Make sure your sprite objects are properly indexed and use a simple collision check first...', createdAt: '2024-01-15T10:05:00Z' }`
2. `{ id: 'post-2', topicId: 'topic-a', userId: 'user-abc', content: 'Thanks! That helps. I will try adjusting the indexing.', createdAt: '2024-01-15T11:30:00Z' }`
3. `{ id: 'post-3', topicId: 'topic-b', userId: 'user-pqr', content: 'Using fixed-point math and optimizing VRAM transfers can make a big difference.', createdAt: '2024-01-14T09:15:00Z' }`
---
**TURKISH TRANSLATIONS (for UI elements, embedded within components or fetched):**
- **Navbar:** Ana Sayfa, Projelerim, Kaynaklar, Forum, Giriş Yap/Çıkış Yap
- **Homepage:** Hoş Geldiniz, Nintendo DS Homebrew Geliştirme Dünyasına Adım Atın, Projelerinizi Yönetin, Kaynaklara Ulaşın, Toplulukla Bağlantı Kurun, Hemen Başla
- **Projects:** Projelerim, Yeni Proje Ekle, Proje Adı, Açıklama, Durum, Depo URL'si, Demo URL'si, Etiketler, Kaydet, İptal, Düzenle, Sil, Proje Detayları, Oluşturan Kişi
- **Resources:** Kaynak Kütüphanesi, Kaynak Adı, URL, Tür, Kaynak Ekle
- **Forum:** Forum, Yeni Konu Başlat, Konu Başlığı, Mesajınız, Gönder, Yanıtla, Konular
- **Buttons:** Kaydet, Güncelle, Sil, Ekle, Gönder, Yanıtla, Giriş Yap, Çıkış Yap
- **Labels:** Ad Soyad, E-posta, Şifre
- **Placeholders:** Proje adını girin, Açıklamanızı yazın...
- **Status Options:** Devam Ediyor, Tamamlandı, Beklemede
- **Resource Types:** Dokümantasyon, Araç, Eğitim, Örnek Kod