PROJECT OVERVIEW:
The application, named 'Game Dev Hub', is a comprehensive SaaS platform designed to streamline the development workflow for indie game developers using the LÖVE 2D Game Framework with Lua. It addresses the fragmentation of resources and community interaction by providing a centralized hub for project management, documentation access, community engagement, and asset sharing. The core value proposition is to empower LÖVE developers by simplifying project organization, enhancing access to crucial information, and fostering a collaborative environment, ultimately accelerating game development and improving the overall developer experience.
TECH STACK:
- Frontend: Next.js (App Router) with React
- Styling: Tailwind CSS
- ORM: Drizzle ORM for PostgreSQL
- Database: PostgreSQL
- Authentication: NextAuth.js (or Clerk for a simpler setup)
- UI Components: shadcn/ui for accessible and customizable components
- State Management: React Context API or Zustand for global state
- Other: React Hook Form for form handling, React Query for server state management, Sonner for notifications.
DATABASE SCHEMA:
PostgreSQL database with the following core tables:
1. `users`:
- `id` (UUID, Primary Key)
- `name` (VARCHAR(255))
- `email` (VARCHAR(255), Unique)
- `emailVerified` (TIMESTAMP WITH TIME ZONE)
- `image` (VARCHAR(255))
- `createdAt` (TIMESTAMP WITH TIME ZONE, Default: now())
- `updatedAt` (TIMESTAMP WITH TIME ZONE, Default: now())
2. `accounts` (for NextAuth.js):
- `id` (BIGSERIAL, Primary Key)
- `userId` (UUID, Foreign Key to `users.id`)
- `type` (VARCHAR(255))
- `provider` (VARCHAR(255))
- `providerAccountId` (VARCHAR(255))
- `refresh_token` (TEXT)
- `access_token` (TEXT)
- `expires_at` (BIGINT)
- `token_type` (VARCHAR(255))
- `scope` (VARCHAR(255))
- `id_token` (TEXT)
- `session_state` (VARCHAR(255))
3. `sessions` (for NextAuth.js):
- `id` (BIGSERIAL, Primary Key)
- `sessionToken` (VARCHAR(255), Unique)
- `userId` (UUID, Foreign Key to `users.id`)
- `expires` (TIMESTAMP WITH TIME ZONE)
4. `verificationTokens` (for NextAuth.js):
- `identifier` (VARCHAR(255))
- `token` (VARCHAR(255), Unique)
- `expires` (TIMESTAMP WITH TIME ZONE)
5. `projects`:
- `id` (UUID, Primary Key)
- `userId` (UUID, Foreign Key to `users.id`)
- `name` (VARCHAR(255), Not Null)
- `description` (TEXT)
- `repoUrl` (VARCHAR(255)) // Optional link to GitHub/GitLab etc.
- `loveVersion` (VARCHAR(50)) // e.g., '11.4', '12.0'
- `createdAt` (TIMESTAMP WITH TIME ZONE, Default: now())
- `updatedAt` (TIMESTAMP WITH TIME ZONE, Default: now())
6. `projectFiles` (for simple file/asset management if needed later, MVP focuses on metadata):
- `id` (UUID, Primary Key)
- `projectId` (UUID, Foreign Key to `projects.id`)
- `fileName` (VARCHAR(255), Not Null)
- `fileType` (VARCHAR(50)) // e.g., 'image', 'audio', 'code', 'script'
- `storageUrl` (VARCHAR(255)) // URL to stored file (e.g., S3)
- `uploadedAt` (TIMESTAMP WITH TIME ZONE, Default: now())
7. `communityPosts`:
- `id` (UUID, Primary Key)
- `userId` (UUID, Foreign Key to `users.id`)
- `title` (VARCHAR(255), Not Null)
- `content` (TEXT, Not Null)
- `createdAt` (TIMESTAMP WITH TIME ZONE, Default: now())
- `updatedAt` (TIMESTAMP WITH TIME ZONE, Default: now())
8. `postComments`:
- `id` (UUID, Primary Key)
- `postId` (UUID, Foreign Key to `communityPosts.id`)
- `userId` (UUID, Foreign Key to `users.id`)
- `content` (TEXT, Not Null)
- `createdAt` (TIMESTAMP WITH TIME ZONE, Default: now())
- `updatedAt` (TIMESTAMP WITH TIME ZONE, Default: now())
CORE FEATURES & USER FLOW:
1. Authentication Flow:
- User lands on the homepage.
- Options to 'Sign Up' or 'Sign In' are prominent.
- Clicking 'Sign Up'/'Sign In' redirects to a dedicated auth page (or uses a modal).
- Supports email/password and OAuth (e.g., Google).
- Upon successful authentication, user is redirected to their dashboard.
- Middleware protects authenticated routes.
- Sign Out functionality redirects to the homepage or a public landing page.
2. Dashboard (`/dashboard` - Authenticated Route):
- Displays a summary of the user's projects.
- Shows recent community activity (e.g., new posts, replies to their posts).
- Provides quick links to 'Create New Project', 'View All Projects', 'Documentation', 'Community Forum'.
- If no projects exist, displays a "Get Started" message with a call to action to create the first project.
3. Project Management (`/dashboard/projects`, `/dashboard/projects/[projectId]`):
- User can view a list of all their projects on `/dashboard/projects`.
- Each project in the list shows its name, description snippet, and last updated date.
- User can click a project to view its details on `/dashboard/projects/[projectId]`.
- The project detail page allows editing project name, description, and LÖVE version.
- A "Delete Project" button is available, requiring confirmation.
- "Create New Project" flow: A modal or dedicated page prompts for Project Name, Description, and optional LÖVE Version/Repo URL. Upon submission, a new entry is created in the `projects` table.
4. Documentation Viewer (`/docs`):
- Fetches and displays the LÖVE framework documentation.
- Ideally, integrates with the official wiki/documentation source. For MVP, a static rendering of key sections or linking to the official docs is sufficient.
- Includes a search bar to filter documentation topics.
- Sidebar navigation for different sections of the documentation.
5. Community Forum (`/community`):
- Displays a list of recent community posts (`/community`).
- Each post preview shows title, author (username), and creation date.
- Clicking a post navigates to the post detail page (`/community/posts/[postId]`).
- Post detail page shows the full post content, author, date, and a list of comments.
- Users can create new posts via a "New Post" button.
- Users can add comments to existing posts.
- Posts and comments are linked to the `users` table for author information.
API & DATA FETCHING:
- Use Next.js API Routes (App Router `route.ts` files) for backend logic.
- Drizzle ORM will interact with the PostgreSQL database.
- React Query will be used for efficient data fetching, caching, and state synchronization for client-side components.
- Example API Endpoints:
- `POST /api/auth/signup`, `POST /api/auth/signin` (handled by NextAuth.js or similar)
- `GET /api/projects`: Fetch all projects for the logged-in user.
- `POST /api/projects`: Create a new project.
- `GET /api/projects/[projectId]`: Fetch details for a specific project.
- `PUT /api/projects/[projectId]`: Update a specific project.
- `DELETE /api/projects/[projectId]`: Delete a specific project.
- `GET /api/community/posts`: Fetch recent community posts.
- `POST /api/community/posts`: Create a new community post.
- `GET /api/community/posts/[postId]`: Fetch a specific post and its comments.
- `POST /api/community/posts/[postId]/comments`: Add a comment to a post.
- Data will be passed to components via server components (fetching directly) or client components (using `useQuery` from React Query).
COMPONENT BREAKDOWN (Next.js App Router):
- `app/`
- `layout.tsx`: Root layout (includes Head, Providers, Navbar, Footer)
- `page.tsx`: Homepage / Landing Page (Public)
- `auth/`: Authentication pages (Sign In, Sign Up)
- `page.tsx`
- `dashboard/`
- `layout.tsx`: Dashboard layout (sidebar/navbar)
- `page.tsx`: Dashboard overview
- `projects/`
- `page.tsx`: List of user's projects
- `[projectId]/`
- `page.tsx`: Project detail view/edit page
- `new/page.tsx`: Form for creating a new project
- `docs/`
- `page.tsx`: Documentation viewer
- `community/`
- `page.tsx`: Community posts list
- `posts/[postId]/`
- `page.tsx`: Specific post and comments view
- `new-post/page.tsx`: Form for creating a new post
- `api/`: API routes (e.g., `api/projects/route.ts`)
- `components/`
- `ui/`: Re-usable UI components from shadcn/ui (Button, Input, Card, Dialog, etc.)
- `layout/`: Navbar, Footer, Sidebar components
- `auth/`: AuthForm component
- `projects/`: ProjectCard, ProjectForm, ProjectList components
- `community/`: PostCard, PostList, CommentForm, CommentList components
- `common/`: LoadingSpinner, ErrorMessage, Notification components
- `lib/`:
- `db.ts`: Drizzle ORM database connection and configuration
- `auth.ts`: NextAuth.js configuration
- `utils.ts`: Utility functions
- `hooks/`:
- Custom React hooks (e.g., `useProjects`)
- `contexts/`:
- Global context providers (e.g., `AuthContext` if not using NextAuth directly in layout)
- `providers/`:
- NextAuthSessionProvider, QueryProvider (for React Query)
UI/UX DESIGN & VISUAL IDENTITY:
- Style: Minimalist Clean with subtle modern touches.
- Color Palette:
- Primary: #4F46E5 (Indigo-500)
- Secondary: #6366F1 (Indigo-600)
- Accent: #8B5CF6 (Purple-400)
- Background: #F9FAFB (Light Gray)
- Card/Element Background: #FFFFFF (White)
- Text (Dark): #1F2937 (Slate-800)
- Text (Light/Muted): #6B7280 (Gray-400)
- Typography:
- Headings: Inter, Semi-bold
- Body Text: Inter, Regular
- Layout: Clean, spacious layout with clear visual hierarchy. Use cards for distinct content blocks. Sidebar navigation for authenticated sections. Responsive design focusing on mobile-first, scaling gracefully to tablet and desktop.
- Visual Elements: Subtle gradients on buttons or headers, minimalist icons, soft shadows on cards.
ANIMATIONS:
- Page Transitions: Use Next.js's built-in `useRouter` and potentially Framer Motion for smooth cross-fade or slide transitions between pages.
- Button Hovers: Subtle scale or background color change on hover.
- Loading States: Use skeleton loaders (e.g., `react-content-loader`) or spinners (from shadcn/ui) for data fetching.
- Form Interactions: Gentle feedback on input focus and validation states.
EDGE CASES:
- **Empty States**: Dashboard, project list, and community sections should have clear, helpful messages and CTAs when empty (e.g., "You haven't created any projects yet. Create your first project!").
- **Authentication**: Handle unauthorized access gracefully (redirect to login, show appropriate messages). Ensure secure session management.
- **Error Handling**: Implement try-catch blocks in API routes and use React Query's error handling for UI feedback. Display user-friendly error messages (e.g., using Sonner notifications).
- **Validation**: Implement robust client-side and server-side validation for all form inputs (project names, post content, etc.) using libraries like `zod` with `react-hook-form`.
- **Rate Limiting**: Consider basic rate limiting on API endpoints to prevent abuse.
- **Data Integrity**: Ensure database constraints (e.g., `NOT NULL`, `UNIQUE`) are properly defined and handled.
SAMPLE DATA:
1. User:
```json
{
"id": "a1b2c3d4-e5f6-7890-1234-567890abcdef",
"name": "Alex Chen",
"email": "alex.chen@example.com",
"image": "https://avatars.githubusercontent.com/u/12345678?v=4"
}
```
2. Project:
```json
{
"id": "f0e9d8c7-b6a5-4321-fedc-ba9876543210",
"userId": "a1b2c3d4-e5f6-7890-1234-567890abcdef",
"name": "Pixel Platformer",
"description": "A classic 2D platformer game made with LÖVE.",
"repoUrl": "https://github.com/user/pixel-platformer",
"loveVersion": "11.4"
}
```
3. Project (Another User):
```json
{
"id": "1a2b3c4d-5e6f-7890-abcd-ef1234567890",
"userId": "b2c3d4e5-f6a7-8901-2345-67890abcdef1",
"name": "Space Shooter",
"description": "Retro space shooter with "}" && "power-ups.",
"repoUrl": null,
"loveVersion": "12.0"
}
```
4. Community Post:
```json
{
"id": "98765432-10fe-dcba-9876-543210fedcba",
"userId": "a1b2c3d4-e5f6-7890-1234-567890abcdef",
"title": "Struggling with Tilemaps in LÖVE 11.4",
"content": "Hey everyone, I'm having trouble implementing efficient tilemap rendering. Any advice or examples would be greatly appreciated!",
"createdAt": "2023-10-27T10:00:00Z"
}
```
5. Comment:
```json
{
"id": "abcdef12-3456-7890-abcd-ef1234567890",
"postId": "98765432-10fe-dcba-9876-543210fedcba",
"userId": "b2c3d4e5-f6a7-8901-2345-67890abcdef1",
"content": "Try using a quadtree for rendering visible tiles. It significantly improves performance.",
"createdAt": "2023-10-27T10:30:00Z"
}
```
6. Community Post (No Comments Yet):
```json
{
"id": "11223344-5566-7788-aabb-ccddeeff0011",
"userId": "b2c3d4e5-f6a7-8901-2345-67890abcdef1",
"title": "New LÖVE Game Idea: Procedural Dungeon Crawler",
"content": "Thinking about starting a new project based on procedural generation. Anyone interested in collaborating?",
"createdAt": "2023-10-26T15:00:00Z"
}
```
7. Empty Project List State:
*Displayed to the user when `projects` table is empty for their `userId`.*
```
{
"message": "No projects found. Click 'Create New Project' to get started!"
}
```
8. LÖVE Documentation Snippet (Conceptual):
```json
{
"topic": "love.graphics.draw()",
"summary": "Draws an object to the screen.",
"url": "/docs/love.graphics.draw"
}
```
9. Another Project:
```json
{
"id": "c0d1e2f3-a4b5-6789-0123-456789abcdef0",
"userId": "a1b2c3d4-e5f6-7890-1234-567890abcdef",
"name": "Synthwave Runner",
"description": "An endless runner with a synthwave aesthetic.",
"repoUrl": "https://github.com/user/synthwave-runner",
"loveVersion": "11.3"
}
```
10. Yet Another Project:
```json
{
"id": "d1e2f3a4-b5c6-7890-1234-567890abcdef0",
"userId": "b2c3d4e5-f6a7-8901-2345-67890abcdef1",
"name": "Physics Sandbox",
"description": "Experimenting with physics engines in LÖVE.",
"repoUrl": null,
"loveVersion": "12.0"
}
```
This prompt provides a detailed blueprint for building a functional MVP of Game Dev Hub using modern Next.js practices, a robust tech stack, and a clear focus on the developer experience for LÖVE framework users.