You are an expert full-stack developer and AI assistant tasked with building a fully functional, multi-page MVP web application using Next.js (App Router), Tailwind CSS, and Drizzle ORM. The application is called 'NicheFinder Pro'.
PROJECT OVERVIEW:
NicheFinder Pro aims to solve the problem of finding and engaging with underserved, emerging, or niche hobbies and interest areas. Many individuals, like the one posting on Hacker News, are looking for fields that are not yet "industrialized" or overly crowded, where they can make a meaningful contribution. The platform will help users discover these niches, connect with like-minded individuals, share ideas, and collaborate on projects. The core value proposition is to provide a curated discovery engine and a community hub for pursuing deep, non-mainstream interests.
TECH STACK:
- Framework: Next.js (App Router)
- Styling: Tailwind CSS
- ORM: Drizzle ORM (with PostgreSQL as the database)
- Authentication: NextAuth.js (or Clerk for a simpler setup)
- UI Components: shadcn/ui
- State Management: React Context API / Zustand (for global state if needed)
- Form Handling: React Hook Form with Zod for validation
- Database Client: Drizzle-kit (for migrations and schema definition)
- Hosting: Vercel
- Additional Packages: zod, @trivago/prettier-plugin-sort-imports (for prettier config), autoprefixer, postcss, react-hot-toast (for notifications)
DATABASE SCHEMA (using Drizzle ORM with PostgreSQL):
1. `users` table:
- `id`: UUID (Primary Key, default gen_random_uuid())
- `name`: VARCHAR(255)
- `email`: VARCHAR(255) UNIQUE
- `emailVerified`: TIMESTAMP WITH TIME ZONE
- `image`: TEXT (URL to profile picture)
- `createdAt`: TIMESTAMP WITH TIME ZONE DEFAULT now()
- `updatedAt`: TIMESTAMP WITH TIME ZONE DEFAULT now()
2. `accounts` table (for NextAuth.js):
- `id`: BIGSERIAL PRIMARY KEY
- `userId`: UUID REFERENCES `users`(`id`) ON DELETE CASCADE
- `type`: TEXT
- `provider`: TEXT
- `providerAccountId`: TEXT
- `refresh_token`: TEXT
- `access_token`: TEXT
- `expires_at`: BIGINT
- `token_type`: TEXT
- `scope`: TEXT
- `id_token`: TEXT
- `session_state`: TEXT
3. `sessions` table (for NextAuth.js):
- `sessionToken`: TEXT PRIMARY KEY
- `userId`: UUID REFERENCES `users`(`id`) ON DELETE CASCADE
- `expires`: TIMESTAMP WITH TIME ZONE
4. `verificationTokens` table (for NextAuth.js):
- `identifier`: TEXT
- `token`: TEXT PRIMARY KEY
- `expires`: TIMESTAMP WITH TIME ZONE
5. `niche_categories` table:
- `id`: UUID (Primary Key, default gen_random_uuid())
- `name`: VARCHAR(255) UNIQUE (e.g., 'AI/ML', 'Robotics', 'Biohacking', 'HCI', '3D Printing', 'Mechanical Keyboards')
- `description`: TEXT
- `slug`: VARCHAR(255) UNIQUE (URL-friendly identifier)
6. `niches` table:
- `id`: UUID (Primary Key, default gen_random_uuid())
- `categoryId`: UUID REFERENCES `niche_categories`(`id`) ON DELETE SET NULL
- `name`: VARCHAR(255) (e.g., 'Reinforcement Learning for Robotics', 'Customizable Neural Interfaces', 'Open Source Drone Autonomy')
- `description`: TEXT
- `slug`: VARCHAR(255) UNIQUE
- `isEmerging`: BOOLEAN DEFAULT FALSE
- `contributionLevel`: ENUM('low', 'medium', 'high')
- `createdAt`: TIMESTAMP WITH TIME ZONE DEFAULT now()
7. `user_niches` table (Many-to-Many relationship between users and niches they follow/are interested in):
- `userId`: UUID REFERENCES `users`(`id`) ON DELETE CASCADE
- `nicheId`: UUID REFERENCES `niches`(`id`) ON DELETE CASCADE
- `followedAt`: TIMESTAMP WITH TIME ZONE DEFAULT now()
- PRIMARY KEY (`userId`, `nicheId`)
8. `tags` table:
- `id`: UUID (Primary Key, default gen_random_uuid())
- `name`: VARCHAR(100) UNIQUE
9. `niche_tags` table (Many-to-Many relationship between niches and tags for finer granularity):
- `nicheId`: UUID REFERENCES `niches`(`id`) ON DELETE CASCADE
- `tagId`: UUID REFERENCES `tags`(`id`) ON DELETE CASCADE
- PRIMARY KEY (`nicheId`, `tagId`)
10. `projects` table:
- `id`: UUID (Primary Key, default gen_random_uuid())
- `userId`: UUID REFERENCES `users`(`id`) ON DELETE SET NULL
- `nicheId`: UUID REFERENCES `niches`(`id`) ON DELETE SET NULL
- `name`: VARCHAR(255)
- `description`: TEXT
- `goal`: TEXT
- `status`: ENUM('idea', 'seeking_contributors', 'in_progress', 'completed', 'archived') DEFAULT 'idea'
- `createdAt`: TIMESTAMP WITH TIME ZONE DEFAULT now()
- `updatedAt`: TIMESTAMP WITH TIME ZONE DEFAULT now()
11. `project_contributors` table (Many-to-Many relationship for project collaborators):
- `projectId`: UUID REFERENCES `projects`(`id`) ON DELETE CASCADE
- `userId`: UUID REFERENCES `users`(`id`) ON DELETE CASCADE
- `joinedAt`: TIMESTAMP WITH TIME ZONE DEFAULT now()
- PRIMARY KEY (`projectId`, `userId`)
CORE FEATURES & USER FLOW:
1. Authentication:
- Flow: User lands on the homepage. Clicks 'Sign In' or 'Sign Up'. Redirected to an authentication page (using NextAuth.js providers like Google, GitHub, Email). Upon successful authentication, user is redirected to their dashboard.
- Edge Case: Handle failed authentication attempts, display error messages.
2. Niche Discovery:
- Flow: Authenticated users can navigate to the 'Discover' page. They see a list of niches, filterable by `niche_categories`, `contributionLevel`, and `isEmerging` status. A search bar allows keyword searching within niche names and descriptions. Clicking a niche leads to its detail page.
- Niche Detail Page: Displays niche information, related tags, a list of active projects within that niche, and users interested in it. Options to 'Follow Niche' and 'Start Project'.
- Edge Case: Display 'No niches found matching your criteria' if filters yield no results. Handle empty states gracefully.
3. User Profile Management:
- Flow: Users can access their profile page ('My Profile' or from dashboard). They can edit their name, upload a profile picture, add/remove `tags` they are interested in or expert in, and list niches they follow. A section displays their created projects and contributions.
- Edge Case: Image upload validation (file type, size). Ensure tag suggestions are relevant.
4. Project Creation & Contribution:
- Flow: From a Niche Detail page or the 'My Projects' section, a user can click 'Start Project'. This opens a modal or form to define the project name, description, and goal. The project is initially associated with the selected niche (if applicable) and created by the user. Users can later edit project details, update its status, and invite others or list it as 'seeking contributors'. Other users can view projects and request to join as a contributor.
- Edge Case: Project description and goal length limits. Ensure proper permissions for editing projects (creator only, initially). Handle join requests.
API & DATA FETCHING:
- API Routes: Will use Next.js App Router's Route Handlers (e.g., `src/app/api/auth/[...nextauth]/route.ts`, `src/app/api/niches/route.ts`, `src/app/api/projects/route.ts`).
- Data Fetching: Primarily use server components for initial data fetching to improve performance and SEO. Client components will fetch data on demand (e.g., for forms, interactive elements) using SWR or React Query, or directly via API routes.
- Example API (Get Niches): `GET /api/niches?category=AI&sort=emerging`
- Request Body: None
- Response Body (Success - 200):
```json
[
{
"id": "uuid-1",
"name": "Emergent AI Ethics Frameworks",
"description": "Exploring novel ethical considerations for advanced AI.",
"slug": "emergent-ai-ethics",
"isEmerging": true,
"contributionLevel": "high",
"category": {"name": "AI/ML", "slug": "ai-ml"}
}
]
```
- Example API (Create Project):
`POST /api/projects`
- Request Body:
```json
{
"name": "Decentralized Learning Models",
"description": "Researching federated learning for privacy-preserving AI.",
"goal": "Develop a proof-of-concept implementation.",
"nicheId": "uuid-of-niche"
}
```
- Response Body (Success - 201):
```json
{
"id": "new-project-uuid",
"message": "Project created successfully."
}
```
COMPONENT BREAKDOWN (Next.js App Router Structure):
- `src/app/`
- `(auth)/` (Authentication Group)
- `sign-in/page.tsx`: Sign-in form component (using shadcn/ui).
- `sign-up/page.tsx`: Sign-up form component.
- `(main)/` (Main App Layout Group)
- `layout.tsx`: Main layout with Navbar, Footer, potentially a Sidebar.
- `dashboard/page.tsx`: User dashboard. Shows followed niches, recent projects, suggested connections. Uses `DashboardLayout`, `NicheList`, `ProjectCard`, `UserSuggestion`. Requires auth check.
- `discover/page.tsx`: Main niche discovery page. Includes `NicheFilter`, `NicheSearchBar`, `NicheGrid`. Fetches and displays niches.
- `niches/[slug]/page.tsx`: Dynamic page for individual niche details. Displays `NicheDetailView`, `ProjectList` (for projects in this niche), `UserList` (for users interested). Fetches niche data, related projects, and users.
- `projects/new/page.tsx`: Form for creating a new project. Uses `ProjectForm` component. Requires auth.
- `projects/[projectId]/page.tsx`: Displays details of a specific project. Includes `ProjectDetailView`, `ContributorList`, `JoinProjectButton`. Fetches project data.
- `profile/[userId]/page.tsx`: Public user profile page. Displays user info, interests, projects. Fetches user data.
- `settings/page.tsx`: User settings page (account details, notification preferences). Requires auth.
- `api/`
- `auth/[...nextauth]/route.ts`: NextAuth.js API route handler.
- `niches/route.ts`: API route for CRUD operations on niches (Admin only, potentially).
- `projects/route.ts`: API route for project creation, updates, joining.
- `users/route.ts`: API route for user profile updates, tag management.
- `layout.tsx`: Root layout (global providers, fonts, themes).
- `page.tsx`: Homepage (landing page for unauthenticated users).
- `src/components/`
- `ui/`: Re-exports from `shadcn/ui` (Button, Card, Input, Label, Sheet, Tabs, Alert, Avatar, etc.).
- `layout/`: `Navbar.tsx`, `Footer.tsx`, `Sidebar.tsx`.
- `NicheCard.tsx`: Displays a single niche summary.
- `ProjectCard.tsx`: Displays a single project summary.
- `NicheFilter.tsx`: Filter controls for the discover page.
- `NicheSearchBar.tsx`: Search input for niches.
- `NicheDetailView.tsx`: Renders detailed niche information.
- `ProjectForm.tsx`: Form for creating/editing projects.
- `ProjectDetailView.tsx`: Renders detailed project information.
- `ContributorList.tsx`: Lists project contributors.
- `UserSuggestion.tsx`: Suggests users to connect with.
- `AuthButton.tsx`: Handles sign in/out logic.
- `TagInput.tsx`: Component for managing tags in profiles/niches.
- `src/lib/`
- `db.ts`: Drizzle ORM database connection and client setup.
- `auth.ts`: NextAuth.js configuration.
- `utils.ts`: Utility functions.
- `validators.ts`: Zod validation schemas.
- `src/server/`
- `actions/`: Server actions for mutations (e.g., create project, update profile).
- `queries/`: Server functions for complex data fetching (optional, can use direct DB calls in Server Components).
UI/UX DESIGN & VISUAL IDENTITY:
- Design Style: Minimalist Clean with subtle futuristic accents.
- Color Palette:
- Primary: `#007AFF` (Vibrant Blue)
- Secondary: `#5856D6` (Deep Purple)
- Accent: `#FF9500` (Warm Orange)
- Background: `#F2F2F7` (Light Gray)
- Card/Element Background: `#FFFFFF` (White)
- Text (Dark): `#1C1C1E` (Almost Black)
- Text (Light/Subtle): `#8E8E93` (Gray)
- Dark Mode:
- Background: `#000000` (Black)
- Card/Element Background: `#1C1C1E`
- Text (Light): `#FFFFFF`
- Text (Subtle): `#AEAEB2`
- Typography:
- Headings: Inter (Bold, Semi-Bold)
- Body Text: Inter (Regular)
- Layout:
- Use a consistent grid system (e.g., 12-column).
- Clear visual hierarchy with ample whitespace.
- Centered content on wider screens, full width on mobile.
- Sidebar/Navbar for navigation.
- Animations:
- Subtle page transitions (fade-in/slide). Use `next/transition` or framer-motion.
- Button hover effects (slight scale/color change).
- Loading states (spinners, skeleton loaders) for data fetching.
- Smooth scrolling.
- Responsive Rules:
- Mobile-first design.
- Breakpoints: ~640px (sm), ~768px (md), ~1024px (lg), ~1280px (xl).
- Navigation adapts: collapses into a hamburger menu on smaller screens.
- Content adjusts grid columns and element sizes.
SAMPLE/MOCK DATA:
1. Niche Category:
- `id`: `uuid-cat-ai`
- `name`: "AI / Machine Learning"
- `slug`: "ai-ml"
2. Niche:
- `id`: `uuid-niche-rl`
- `categoryId`: `uuid-cat-ai`
- `name`: "Reinforcement Learning Agents"
- `description`: "Developing autonomous agents using RL techniques beyond games."
- `slug`: "rl-agents"
- `isEmerging`: `true`
- `contributionLevel`: "medium"
3. User:
- `id`: `uuid-user-1`
- `name`: "Alex Johnson"
- `email`: "alex.j@example.com"
- `image`: "/images/alex-avatar.png"
4. User Interested in Niche (User_Niches):
- `userId`: `uuid-user-1`
- `nicheId`: `uuid-niche-rl`
5. Project:
- `id`: `uuid-proj-1`
- `userId`: `uuid-user-1`
- `nicheId`: `uuid-niche-rl`
- `name`: "RL-Powered Drone Navigation"
- `description`: "Using RL to enable drones to navigate complex, unknown environments."
- `goal`: "Create a simulation and a basic ROS implementation."
- `status`: "in_progress"
6. Tag:
- `id`: `uuid-tag-1`
- `name`: "Autonomous Systems"
7. Niche Tag Relation:
- `nicheId`: `uuid-niche-rl`
- `tagId`: `uuid-tag-1`
8. Another Niche:
- `id`: `uuid-niche-hci`
- `categoryId`: `uuid-cat-hci` (assume `cat-hci` exists)
- `name`: "Neuro-adaptive Interfaces"
- `description`: "Exploring brain-computer interfaces that adapt to user cognitive states."
- `slug`: "neuro-adaptive-interfaces"
- `isEmerging`: `true`
- `contributionLevel`: "high"
9. Another Project:
- `id`: `uuid-proj-2`
- `userId`: `uuid-user-1`
- `nicheId`: `uuid-niche-hci`
- `name`: "EEG Signal Denoising"
- `description`: "Applying ML techniques to clean EEG data for BCI applications."
- `goal`: "Develop a robust denoising algorithm."
- `status`: "idea"
10. Another User:
- `id`: `uuid-user-2`
- `name`: "Sarah Chen"
- `email`: "sarah.c@example.com"
- `image`: "/images/sarah-avatar.png"
TURKISH TRANSLATIONS:
- Sign In: Giriş Yap
- Sign Up: Kayıt Ol
- Discover: Keşfet
- Niche: Niş
- Category: Kategori
- Search Niches: Niş Ara
- Follow Niche: Nişi Takip Et
- Start Project: Proje Başlat
- My Profile: Profilim
- Settings: Ayarlar
- Create Project: Proje Oluştur
- Project Name: Proje Adı
- Project Description: Proje Açıklaması
- Project Goal: Proje Amacı
- Join Project: Projeye Katıl
- Contributors: Katkıda Bulunanlar
- Seeking Contributors: Katkıda Bulunan Aranıyor
- Emerging: Yeni Gelişen
- Contribution Level: Katkı Seviyesi
- Followed Niches: Takip Edilen Nişler
- My Projects: Projelerim
- Suggested Users: Önerilen Kullanıcılar
- Edit Profile: Profili Düzenle
- Upload Image: Resim Yükle
- Save Changes: Değişiklikleri Kaydet
- No results found: Sonuç bulunamadı
- Loading...: Yükleniyor...
- Error: Hata
- Success: Başarılı
- Something went wrong: Bir şeyler ters gitti.
- Welcome back, [User Name]!: Tekrar hoş geldin, [Kullanıcı Adı]!
EDGE CASES & VALIDATIONS:
- Auth: Ensure redirects work correctly after sign-in/sign-out. Protect routes that require authentication.
- Forms: Implement robust validation using Zod and React Hook Form for all user inputs (e.g., email format, password strength, required fields for projects/profiles). Display clear error messages next to fields.
- Data Integrity: Use database constraints and Drizzle's schema definition to maintain data integrity (e.g., foreign key constraints, unique constraints).
- Empty States: Design components to gracefully handle empty data scenarios (e.g., no niches found, no projects on a profile, no followers) with informative messages or calls to action.
- API Errors: Implement try-catch blocks in API routes and server actions. Return appropriate HTTP status codes and error messages. Use `react-hot-toast` for user-facing notifications of success or failure.
- Image Uploads: Handle potential errors during upload (e.g., network issues, invalid file types/sizes) and provide feedback to the user.
- Rate Limiting: Consider basic rate limiting on API endpoints if necessary to prevent abuse.
- Authorization: Ensure users can only edit their own profiles and projects. Implement role-based access if needed later (e.g., admin roles for managing categories).