You are an AI assistant tasked with generating a fully functional, multi-page Next.js MVP application for 'USB Dev Hub'. This application will serve as an integrated platform for software developers to learn, build, and share userspace USB drivers.
**1. PROJECT OVERVIEW:**
'USB Dev Hub' aims to democratize USB driver development for software engineers. Currently, developing userspace USB drivers can be a complex and fragmented process, requiring deep knowledge of hardware interfaces, operating system specifics, and often involving difficult debugging. This platform will provide comprehensive guides, practical code examples, essential debugging tools, and a community forum to streamline this process. The core value proposition is to significantly reduce the learning curve and development time for creating userspace USB drivers, enabling developers to integrate custom hardware more efficiently.
**2. TECH STACK:**
- **Framework:** Next.js (App Router)
- **Language:** TypeScript
- **Styling:** Tailwind CSS
- **ORM:** Drizzle ORM
- **Database:** PostgreSQL (or SQLite for local development/simplicity, Drizzle supports both)
- **Authentication:** NextAuth.js (with credentials provider and Google/GitHub OAuth)
- **UI Components:** shadcn/ui (for accessible, customizable components)
- **Form Handling:** React Hook Form + Zod (for validation)
- **State Management:** React Context API / Zustand (for global state)
- **API Client:** TanStack Query (for efficient data fetching and caching)
- **Deployment:** Vercel (or similar)
**3. DATABASE SCHEMA:**
We will use Drizzle ORM with PostgreSQL.
* **`users` table:**
* `id` (UUID, primary key)
* `name` (VARCHAR)
* `email` (VARCHAR, unique)
* `emailVerified` (TIMESTAMPZ)
* `image` (VARCHAR, optional)
* `hashedPassword` (VARCHAR, optional, for credentials provider)
* `createdAt` (TIMESTAMPZ, default now())
* `updatedAt` (TIMESTAMPZ, default now())
* **`accounts` table (for NextAuth.js):**
* `id` (BIGSERIAL, primary key)
* `userId` (UUID, foreign key to `users.id`, index)
* `type` (VARCHAR, e.g., 'oauth' or 'credentials')
* `provider` (VARCHAR)
* `providerAccountId` (VARCHAR)
* `refresh_token` (TEXT, optional)
* `access_token` (TEXT, optional)
* `expires_at` (BIGINT, optional)
* `token_type` (VARCHAR, optional)
* `scope` (VARCHAR, optional)
* `id_token` (TEXT, optional)
* `session_state` (VARCHAR, optional)
* **`sessions` table (for NextAuth.js):**
* `sessionToken` (VARCHAR, primary key)
* `userId` (UUID, foreign key to `users.id`, index)
* `expires` (TIMESTAMPZ)
* **`verificationTokens` table (for NextAuth.js):**
* `identifier` (VARCHAR)
* `token` (VARCHAR)
* `expires` (TIMESTAMPZ)
* **`guides` table:**
* `id` (UUID, primary key)
* `title` (VARCHAR, not null)
* `slug` (VARCHAR, unique, not null) - for URL generation
* `content` (TEXT, not null) - Markdown content
* `language` (VARCHAR, e.g., 'C', 'Python', 'General')
* `difficulty` (VARCHAR, e.g., 'Beginner', 'Intermediate', 'Advanced')
* `authorId` (UUID, foreign key to `users.id`, optional)
* `createdAt` (TIMESTAMPZ, default now())
* `updatedAt` (TIMESTAMPZ, default now())
* **`codeSnippets` table:**
* `id` (UUID, primary key)
* `title` (VARCHAR, not null)
* `description` (TEXT, optional)
* `code` (TEXT, not null)
* `language` (VARCHAR, e.g., 'C', 'Python', 'Bash')
* `guideId` (UUID, foreign key to `guides.id`, optional)
* `authorId` (UUID, foreign key to `users.id`, optional)
* `createdAt` (TIMESTAMPZ, default now())
* `updatedAt` (TIMESTAMPZ, default now())
* **`forumCategories` table:**
* `id` (UUID, primary key)
* `name` (VARCHAR, unique, not null)
* `slug` (VARCHAR, unique, not null)
* `description` (TEXT, optional)
* **`forumTopics` table:**
* `id` (UUID, primary key)
* `categoryId` (UUID, foreign key to `forumCategories.id`, index)
* `title` (VARCHAR, not null)
* `slug` (VARCHAR, unique, not null)
* `authorId` (UUID, foreign key to `users.id`, index)
* `createdAt` (TIMESTAMPZ, default now())
* `updatedAt` (TIMESTAMPZ, default now())
* **`forumPosts` table:**
* `id` (UUID, primary key)
* `topicId` (UUID, foreign key to `forumTopics.id`, index)
* `authorId` (UUID, foreign key to `users.id`, index)
* `content` (TEXT, not null)
* `createdAt` (TIMESTAMPZ, default now())
* `updatedAt` (TIMESTAMPZ, default now())
**4. CORE FEATURES & USER FLOW:**
* **Authentication (NextAuth.js):**
* **Flow:** Users can sign up using email/password or via Google/GitHub OAuth. They can log in, log out. Password reset functionality for email/password signups.
* **Protected Routes:** Access to certain features (e.g., posting on the forum, submitting code snippets) will require authentication.
* **Guides Section:**
* **User Flow:** Users can browse guides by language, difficulty, or search. Clicking a guide displays its title, author, difficulty, language, and markdown content. Users can also view associated code snippets.
* **Admin Flow (future):** Admins can create, edit, and delete guides and snippets via a protected interface.
* **Code Snippets:**
* **User Flow:** Users can browse code snippets, filter by language, and view them. Snippets are associated with guides or can be standalone. Users can copy code easily.
* **Admin Flow (future):** Admins can manage snippets.
* **USB Device Identifier Tool:**
* **User Flow:** A dedicated page with a simple web interface. When the user clicks 'Scan Devices', the browser uses the WebUSB API (if available and permissions granted) to list connected USB devices. For each device, it displays Vendor ID (VID), Product ID (PID), Manufacturer Name, Product Name, and Class. This is a client-side heavy feature leveraging browser APIs.
* **Edge Cases:** Browser support for WebUSB API, user granting permissions, no USB devices connected.
* **Community Forum:**
* **User Flow:** Users can view a list of categories. Within a category, they see a list of topics. They can view a topic and see all posts. Authenticated users can create new topics and reply to existing posts.
* **Edge Cases:** Empty categories/topics, unauthenticated user attempting to post.
**5. API & DATA FETCHING:**
- Next.js API Routes (App Router `route.ts` files) will handle backend logic.
- TanStack Query will manage data fetching, caching, and synchronization for components.
- Example API Routes:
* `GET /api/guides`: Fetch list of all guides (with filtering options for language/difficulty).
* `GET /api/guides/[slug]`: Fetch a single guide by its slug.
* `GET /api/snippets`: Fetch list of code snippets.
* `GET /api/forum/categories`: Fetch forum categories.
* `GET /api/forum/topics?categoryId=...`: Fetch topics for a category.
* `GET /api/forum/topics/[slug]`: Fetch a single topic and its posts.
* `POST /api/forum/topics`: Create a new topic (requires auth).
* `POST /api/forum/posts`: Create a new post (requires auth).
- Data will be passed to components via server components (for initial render) and client components using TanStack Query hooks.
**6. COMPONENT BREAKDOWN (Next.js App Router):**
* **Layouts:**
* `app/layout.tsx`: Root layout (includes providers, global styles, header, footer).
* `app/(marketing)/layout.tsx`: Marketing layout (for public pages like home).
* `app/(app)/layout.tsx`: Application layout (for authenticated user sections, includes sidebar/dashboard nav).
* **Pages:**
* `app/(marketing)/page.tsx`: Home Page (Introduction, value proposition, featured guides/topics, call to action).
* `app/(marketing)/guides/page.tsx`: Guides Listing Page (Displays filterable list of guides).
* `app/(marketing)/guides/[slug]/page.tsx`: Single Guide Page (Displays guide content and associated snippets).
* `app/(marketing)/tools/usb-identifier/page.tsx`: USB Identifier Tool Page (Implements WebUSB logic).
* `app/(marketing)/forum/page.tsx`: Forum Index Page (Lists categories).
* `app/(marketing)/forum/[categorySlug]/page.tsx`: Forum Category Page (Lists topics within a category).
* `app/(marketing)/forum/topic/[topicSlug]/page.tsx`: Forum Topic Page (Displays topic and posts, allows replies).
* `app/(app)/dashboard/page.tsx`: User Dashboard (Placeholder for authenticated users, shows recent activity, saved items etc.).
* `app/auth/signin/page.tsx`: Sign In Page.
* `app/auth/signup/page.tsx`: Sign Up Page.
* **UI Components (within `components/` directory):**
* `ui/Header.tsx`: Main navigation, logo, auth links/user menu.
* `ui/Footer.tsx`: Footer links and info.
* `ui/Sidebar.tsx`: Navigation for authenticated users (if using app layout).
* `ui/GuideCard.tsx`: Card for displaying guide summaries in lists.
* `ui/CodeBlock.tsx`: Displays code snippets with syntax highlighting and copy button.
* `ui/ForumCategoryCard.tsx`: Card for forum categories.
* `ui/ForumTopicCard.tsx`: Card for forum topics.
* `ui/ForumPost.tsx`: Displays a single forum post.
* `ui/AuthForm.tsx`: Sign in/Sign up form component.
* `ui/Button.tsx`, `ui/Input.tsx`, `ui/Card.tsx`, etc. (from shadcn/ui).
* `tools/WebUSBScanner.tsx`: Component handling the WebUSB logic and display for the identifier tool.
* **State Management:** Use Context API or Zustand for global state like authentication status, user profile. Component-level state managed using `useState` and `useReducer`. TanStack Query for server state.
**7. UI/UX DESIGN & VISUAL IDENTITY:**
- **Style:** "Minimalist Tech Professional"
- **Color Palette:**
* Primary (Dark background): `#121212` (Near black)
* Secondary (Accent): `#0A84FF` (Vibrant blue)
* Tertiary (Subtle highlight): `#333333` (Dark gray)
* Text (Light): `#E0E0E0` (Light gray)
* Text (Muted): `#A0A0A0` (Medium gray)
* Success: `#30D158` (Green)
* Warning: `#FF9F0A` (Orange)
* Error: `#FF4535` (Red)
- **Typography:** Inter font family (for readability and modern feel). Headings: Bold, larger sizes. Body text: Regular weight, comfortable line height.
- **Layout:** Clean, spacious layout with clear visual hierarchy. Use of cards for content blocks. Sidebar navigation for authenticated sections. Responsive design ensuring usability on all devices.
- **Sections:** Consistent header and footer. Content areas are well-defined. Use of subtle dividers or background color changes to delineate sections.
**8. SAMPLE/MOCK DATA:**
* **Guide:**
* `id`: 'uuid-guide-1'
* `title`: 'Getting Started with C for USB Drivers'
* `slug`: 'getting-started-c-usb-drivers'
* `content`: '# Introduction\nThis guide covers the basics...'
* `language`: 'C'
* `difficulty`: 'Beginner'
* **Code Snippet:**
* `id`: 'uuid-snippet-1'
* `title`: 'Basic USB Device Read'
* `code`: 'int read_data(void* buffer, int len) { ... }'
* `language`: 'C'
* `guideId`: 'uuid-guide-1'
* **Forum Category:**
* `id`: 'uuid-cat-1'
* `name`: 'General Discussion'
* `slug`: 'general-discussion'
* **Forum Topic:**
* `id`: 'uuid-topic-1'
* `categoryId`: 'uuid-cat-1'
* `title`: 'Best practices for error handling?'
* `slug`: 'best-practices-error-handling'
* `authorId`: 'uuid-user-1'
* **Forum Post:**
* `id`: 'uuid-post-1'
* `topicId`: 'uuid-topic-1'
* `authorId`: 'uuid-user-1'
* `content`: 'I'm struggling with robust error handling...'
* **USB Device (Mock for Tool):**
* `vendorId`: 0x1234
* `productId`: 0x5678
* `manufacturer`: 'Example Corp'
* `product`: 'Test Device v1'
* `class`: 'Mass Storage'
**9. TURKISH TRANSLATIONS:**
- **App Title:** USB Geliştirici Merkezi
- **Home Page:**
- Title: USB Sürücü Geliştirmenin Yeni Adresi
- Subtitle: Kullanıcı alanı USB sürücüleri yazmayı öğrenin, kod örneklerini keşfedin ve topluluğa katılın.
- CTA Button: Başla
- **Guides:**
- Title: Rehberler
- All Guides: Tüm Rehberler
- Filter by Language: Dile Göre Filtrele
- Filter by Difficulty: Zorluğa Göre Filtrele
- **Code Snippets:**
- Title: Kod Örnekleri
- Copy Code: Kodu Kopyala
- **USB Identifier Tool:**
- Title: USB Cihaz Tanımlayıcı
- Scan Button: Cihazları Tara
- No Devices Found: Hiçbir USB cihazı bulunamadı.
- VID: Üretici ID
- PID: Ürün ID
- Manufacturer: Üretici
- Product: Ürün Adı
- Class: Sınıf
- **Forum:**
- Title: Topluluk Forumu
- Categories: Kategoriler
- New Topic Button: Yeni Konu Aç
- Reply Button: Yanıtla
- Type your reply...: Yanıtınızı yazın...
- Send: Gönder
- **Auth:**
- Sign In: Giriş Yap
- Sign Up: Kayıt Ol
- Email: E-posta
- Password: Şifre
- Continue with Google: Google ile Devam Et
- Continue with GitHub: GitHub ile Devam Et
- Forgot Password?: Şifremi Unuttum?
- Create Account: Hesap Oluştur
**10. ANIMATIONS:**
- **Page Transitions:** Subtle fade-in/fade-out transitions between pages using Next.js's built-in features or a library like `framer-motion` for more complex animations.
- **Hover Effects:** Gentle scaling or background color changes on interactive elements like buttons and links.
- **Loading States:** Skeleton loaders or spinners (using shadcn/ui or Tailwind components) for data fetching operations to provide visual feedback.
- **Form Feedback:** Subtle animations for input validation states (e.g., border color changes).
**11. EDGE CASES:**
- **Authentication:** Handling expired sessions, token refresh, unauthorized access attempts gracefully. Clear error messages for login failures.
- **Data Fetching:** Handling empty states (no guides, no forum posts, no devices found). Implementing error boundaries and retry mechanisms for API requests.
- **Form Validation:** Robust client-side and server-side validation using Zod and React Hook Form for all user inputs (sign up, login, forum posts).
- **WebUSB API:** Graceful degradation if the browser doesn't support WebUSB or if the user denies permission. Clear instructions to the user on how to grant permission or use a compatible browser.
- **Database Errors:** Implementing proper error handling for all database operations.
- **Rate Limiting:** Consider implementing rate limiting on API endpoints, especially for authentication and forum posting, to prevent abuse.