You are an expert AI assistant tasked with building a fully functional, multi-page Next.js MVP application for 'RepairRight'. This application aims to empower farmers and equipment owners by providing access to digital repair tools, manuals, and a supportive community, addressing the 'right-to-repair' movement's challenges.
PROJECT OVERVIEW:
RepairRight is a comprehensive SaaS platform designed to solve the 'right-to-repair' problem for owners of heavy agricultural machinery, like tractors and combines. Currently, manufacturers often restrict access to essential diagnostic tools, software updates, and repair manuals, forcing owners into expensive authorized dealer repairs or resorting to risky 'hacks'. RepairRight will provide a centralized, user-friendly platform where owners can access official (or community-vetted) digital tools, repair guides, and diagnostic information. It will also foster a community for knowledge sharing and peer support. The core value proposition is to give equipment owners control over their maintenance and repairs, reduce costs, extend equipment lifespan, and ensure operational uptime.
TECH STACK:
- Frontend Framework: Next.js (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- UI Component Library: shadcn/ui (for accessible, customizable components)
- ORM: Drizzle ORM (for type-safe database interactions)
- Database: PostgreSQL (recommended, but adaptable to other SQL databases)
- Authentication: NextAuth.js (or Clerk for a simpler integration)
- State Management: React Context API or Zustand (for global state if needed)
- Form Handling: React Hook Form + Zod (for validation)
- Icons:lucide-react
- Other: date-fns (for date handling), clsx (for conditional class names), Axios (for API requests if needed)
DATABASE SCHEMA (Drizzle ORM with PostgreSQL):
1. `users` table:
- `id` UUID PRIMARY KEY DEFAULT gen_random_uuid()
- `name` VARCHAR(255)
- `email` VARCHAR(255) UNIQUE NOT NULL
- `emailVerified` TIMESTAMP WITH TIME ZONE
- `image` TEXT
- `hashedPassword` TEXT
- `createdAt` TIMESTAMP WITH TIME ZONE DEFAULT now()
- `updatedAt` TIMESTAMP WITH TIME ZONE DEFAULT now()
2. `accounts` table (for NextAuth.js)
- `id` UUID PRIMARY KEY DEFAULT gen_random_uuid()
- `userId` UUID NOT NULL REFERENCES `users`(`id`) ON DELETE CASCADE
- `type` VARCHAR(255) NOT NULL
- `provider` VARCHAR(255) NOT NULL
- `providerAccountId` VARCHAR(255) NOT NULL
- `refresh_token` TEXT
- `access_token` TEXT
- `expires_at` BIGINT
- `token_type` VARCHAR(255)
- `scope` VARCHAR(255)
- `id_token` TEXT
- `session_state` VARCHAR(255)
- UNIQUE (`provider`, `providerAccountId`)
3. `sessions` table (for NextAuth.js)
- `sessionToken` VARCHAR(255) PRIMARY KEY
- `userId` UUID NOT NULL REFERENCES `users`(`id`) ON DELETE CASCADE
- `expires` TIMESTAMP WITH TIME ZONE NOT NULL
4. `verificationTokens` table (for NextAuth.js)
- `identifier` TEXT NOT NULL
- `token` TEXT NOT NULL
- `expires` TIMESTAMP WITH TIME ZONE NOT NULL
- PRIMARY KEY (`identifier`, `token`)
5. `equipment` table:
- `id` UUID PRIMARY KEY DEFAULT gen_random_uuid()
- `userId` UUID NOT NULL REFERENCES `users`(`id`) ON DELETE CASCADE
- `make` VARCHAR(255) NOT NULL
- `model` VARCHAR(255) NOT NULL
- `year` INT
- `serialNumber` VARCHAR(255) UNIQUE
- `purchaseDate` DATE
- `notes` TEXT
- `createdAt` TIMESTAMP WITH TIME ZONE DEFAULT now()
- `updatedAt` TIMESTAMP WITH TIME ZONE DEFAULT now()
6. `repair_guides` table:
- `id` UUID PRIMARY KEY DEFAULT gen_random_uuid()
- `equipmentId` UUID REFERENCES `equipment`(`id`) ON DELETE SET NULL
- `title` VARCHAR(255) NOT NULL
- `description` TEXT
- `filePath` TEXT NOT NULL (URL to document/video)
- `source` VARCHAR(255) (e.g., 'Official', 'Community', 'Vetted')
- `addedByUserId` UUID REFERENCES `users`(`id`) ON DELETE SET NULL
- `createdAt` TIMESTAMP WITH TIME ZONE DEFAULT now()
7. `issue_reports` table:
- `id` UUID PRIMARY KEY DEFAULT gen_random_uuid()
- `equipmentId` UUID NOT NULL REFERENCES `equipment`(`id`) ON DELETE CASCADE
- `reportedByUserId` UUID NOT NULL REFERENCES `users`(`id`) ON DELETE CASCADE
- `title` VARCHAR(255) NOT NULL
- `description` TEXT NOT NULL
- `reportedAt` TIMESTAMP WITH TIME ZONE DEFAULT now()
- `status` VARCHAR(50) DEFAULT 'Open' (e.g., 'Open', 'In Progress', 'Resolved', 'Closed')
- `images` TEXT[] (Array of image URLs)
- `videos` TEXT[] (Array of video URLs)
- `updatedAt` TIMESTAMP WITH TIME ZONE DEFAULT now()
8. `forum_threads` table:
- `id` UUID PRIMARY KEY DEFAULT gen_random_uuid()
- `title` VARCHAR(255) NOT NULL
- `createdByUserId` UUID NOT NULL REFERENCES `users`(`id`) ON DELETE CASCADE
- `createdAt` TIMESTAMP WITH TIME ZONE DEFAULT now()
- `updatedAt` TIMESTAMP WITH TIME ZONE DEFAULT now()
9. `forum_posts` table:
- `id` UUID PRIMARY KEY DEFAULT gen_random_uuid()
- `threadId` UUID NOT NULL REFERENCES `forum_threads`(`id`) ON DELETE CASCADE
- `authorId` UUID NOT NULL REFERENCES `users`(`id`) ON DELETE CASCADE
- `content` TEXT NOT NULL
- `createdAt` TIMESTAMP WITH TIME ZONE DEFAULT now()
- `updatedAt` TIMESTAMP WITH TIME ZONE DEFAULT now()
CORE FEATURES & USER FLOW:
1. **Authentication (Sign Up/Login/OAuth):**
* **Flow:** User visits the homepage. Clicks 'Sign Up' or 'Login'. Can sign up using email/password or OAuth providers (Google, GitHub). Upon successful sign up/login, user is redirected to their dashboard. Password reset flow is available. User sessions are managed securely.
* **Details:** Utilize NextAuth.js with email/password and at least one OAuth provider. Implement password hashing (e.g., bcrypt). Secure session management using JWTs stored in HTTP-only cookies.
2. **Equipment Management (CRUD):**
* **Flow:** After login, user navigates to 'My Equipment'. Clicks 'Add New Equipment'. A modal or form appears. User fills in Make, Model, Year, Serial Number, Purchase Date, and optional Notes. Clicks 'Save'. The new equipment appears in a list. User can view details, edit, or delete existing equipment.
* **Details:** Create a dedicated 'My Equipment' page. Use a form component with validation (React Hook Form + Zod) for equipment details. Display equipment in a table or card list. Implement individual edit and delete buttons for each item. Ensure validation for required fields and uniqueness of serial numbers.
3. **Accessing Repair Guides & Tools:**
* **Flow:** From the 'My Equipment' list or a dedicated 'Manuals' section, user can search or browse for guides. User selects a specific piece of equipment or searches by keyword/make/model. A list of available guides/tools is displayed. Clicking a guide opens it in a viewer (PDF viewer if applicable) or provides a download link/access to the tool's interface.
* **Details:** Implement search functionality for guides. Display guides associated with specific equipment or generally available. Integrate a PDF viewer or direct download links for documentation. For 'digital tools', this might initially be links to external resources or descriptions, evolving to embedded tools later.
4. **Reporting Issues:**
* **Flow:** User navigates to 'My Equipment', selects a specific machine, and clicks 'Report Issue'. A form appears prompting for a Title, Description, and optional photo/video uploads. User submits the report. The issue is logged and visible in the user's 'Issue History' and potentially viewable by support staff or the community (depending on privacy settings).
* **Details:** Use a rich text editor for the description if needed. Implement file upload functionality for images and videos (consider cloud storage like AWS S3, Cloudinary, or Vercel Blob). Display submitted issues with their status and details.
5. **Community Forum:**
* **Flow:** User navigates to the 'Community' section. Sees a list of forum threads. Can click to view a thread and its posts. Can create a new thread or reply to existing posts. New posts are appended to the thread view.
* **Details:** Implement listing of threads, viewing individual threads, creating new threads, and posting replies. Each post should show the author and timestamp. Consider moderation features for later.
API & DATA FETCHING:
- Use Next.js API Routes (App Router includes Server Actions and Route Handlers) for backend logic.
- **Authentication Endpoints:** Handled by NextAuth.js.
- **Equipment API (`/api/equipment`, `/api/equipment/[id]`):**
* `GET /api/equipment`: Fetch all equipment for the logged-in user. Returns `[{ id, make, model, year, ... }]`.
* `POST /api/equipment`: Create new equipment. Accepts `{ make, model, year, serialNumber, ... }`. Returns the created equipment object or success status.
* `PUT /api/equipment/[id]`: Update existing equipment. Accepts updated data. Returns updated object.
* `DELETE /api/equipment/[id]`: Delete equipment. Returns success status.
- **Repair Guides API (`/api/guides`):**
* `GET /api/guides?equipmentId=[id]` or `GET /api/guides?search=[query]`: Fetch guides based on equipment or search query. Returns `[{ id, title, description, filePath, source }, ...]`. Guides might be fetched server-side or client-side depending on complexity.
- **Issue Reports API (`/api/issues`):**
* `POST /api/issues`: Submit a new issue report. Accepts `{ equipmentId, title, description, images, videos }`. Returns the created report.
* `GET /api/issues?equipmentId=[id]`: Fetch issues for a specific equipment.
* `GET /api/issues/my`: Fetch issues reported by the current user.
- **Forum API (`/api/forum/threads`, `/api/forum/posts`):**
* `GET /api/forum/threads`: Fetch list of forum threads.
* `POST /api/forum/threads`: Create a new thread.
* `GET /api/forum/threads/[threadId]`: Fetch posts for a specific thread.
* `POST /api/forum/threads/[threadId]/posts`: Add a post to a thread.
- **Data Fetching:** Primarily use server-side data fetching within Server Components where possible for performance and SEO. Use client-side fetching (e.g., `useEffect` with Axios or SWR) within Client Components for interactive data needs or forms.
UI/UX DESIGN & VISUAL IDENTITY:
- **Style:** Modern, Clean, Trustworthy, Slightly rugged (tech-forward but practical).
- **Color Palette:**
* Primary: Deep Teal (#008080)
* Secondary: Warm Sand (#F4A460)
* Accent: Bright Orange (#FFA500)
* Neutral Dark: Dark Slate Gray (#2F4F4F)
* Neutral Light: Off-White (#F8F8F8)
* Success: Forest Green (#228B22)
* Error: Firebrick (#B22222)
- **Typography:**
* Headings: Inter (Bold, SemiBold)
* Body Text: Inter (Regular)
- **Layout:** Consistent use of a grid system (e.g., 12-column). Clear visual hierarchy. Ample whitespace. Sidebar navigation for authenticated users. Clean header with logo and auth actions.
- **Responsiveness:** Mobile-first approach. Fully responsive design using Tailwind CSS's responsive modifiers (`sm:`, `md:`, `lg:`, `xl:`).
- **Interactions:** Subtle hover effects on buttons and links. Smooth transitions for modal openings/closings and dropdowns. Loading spinners/skeletons for data fetching.
COMPONENT BREAKDOWN (Next.js App Router Structure):
- **`app/` directory:**
- `layout.tsx`: Root layout (includes Head, body, global providers).
- `page.tsx`: Landing Page (Public). Features, About, Call to Action.
- `auth/`:
- `sign-in/page.tsx`: Sign in form.
- `sign-up/page.tsx`: Sign up form.
- `reset-password/page.tsx`: Password reset form.
- `(authenticated)/` (Route Group for protected pages):
- `layout.tsx`: Authenticated layout (e.g., with sidebar).
- `dashboard/page.tsx`: User Dashboard (Overview of equipment, recent issues, forum activity).
- `equipment/`:
- `page.tsx`: List of user's equipment.
- `[id]/page.tsx`: Details view for a specific equipment (includes issues, guides).
- `new/page.tsx`: Form to add new equipment.
- `edit/[id]/page.tsx`: Form to edit existing equipment.
- `guides/`:
- `page.tsx`: Browse/search all available guides.
- `[guideId]/page.tsx`: View a specific guide.
- `issues/`:
- `page.tsx`: List of user's reported issues.
- `[issueId]/page.tsx`: Details view for a specific issue report.
- `forum/`:
- `page.tsx`: List of forum threads.
- `new/page.tsx`: Form to create a new forum thread.
- `[threadId]/page.tsx`: View a specific forum thread and its posts.
- `settings/page.tsx`: User profile and account settings.
- `api/` (for Route Handlers):
- `auth/[...nextauth]/route.ts`: NextAuth.js handler.
- `equipment/route.ts`: CRUD for equipment.
- `equipment/[id]/route.ts`: Specific equipment routes.
- `guides/route.ts`: Guides API.
- `issues/route.ts`: Issue reports API.
- `forum/threads/route.ts`: Forum threads API.
- `forum/posts/route.ts`: Forum posts API.
- `upload/route.ts`: File upload handler (if not using a dedicated service SDK).
- **`components/` directory:**
- `ui/`: Re-exports from `shadcn/ui` (Button, Input, Card, Table, Dialog, Form, etc.).
- `layout/`: Header, Footer, Sidebar, PageWrapper.
- `auth/`: SignInForm, SignUpForm, OAuthButtons.
- `equipment/`: EquipmentForm, EquipmentCard, EquipmentTable, EquipmentDetailView.
- `guides/`: GuideViewer, GuideListItem.
- `issues/`: IssueReportForm, IssueListItem.
- `forum/`: ForumThreadList, ForumThreadItem, ForumPostList, ForumPostForm, NewThreadForm.
- `common/`: LoadingSpinner, ErrorMessage, SearchBar, UploadButton.
ANIMATIONS:
- **Page Transitions:** Use `AnimatePresence` from `framer-motion` for smooth transitions between pages within the authenticated section (optional, can add complexity).
- **Element Transitions:** Subtle fade-in/slide-up effects for content loading into view (`IntersectionObserver` API or libraries).
- **Button Hovers:** Slight scale-up or background color change on hover using Tailwind CSS transitions.
- **Loading States:** Use shadcn/ui's `Skeleton` component or a custom `LoadingSpinner` component with CSS animations (e.g., pulsing, spinning) while data is being fetched.
- **Modal/Dialog:** Smooth fade-in and slide-up effect for modals.
EDGE CASES:
- **Authentication:** Redirect unauthenticated users from protected routes to the sign-in page. Handle OAuth callback errors gracefully. Implement email verification for sign-ups.
- **Empty States:** Design specific UI states for when lists are empty (e.g., 'No equipment added yet. Click here to add.', 'No issues reported for this machine.', 'No forum threads found. Start a new discussion!'). Include clear CTAs.
- **Data Validation:** Comprehensive validation on all forms (client-side using Zod/React Hook Form, and server-side in API routes/Server Actions).
- **Error Handling:** Implement global error handling (e.g., using a global state or a toast notification system) for API errors. Display user-friendly error messages. Log errors for debugging.
- **File Uploads:** Handle large file uploads, network interruptions during uploads, and provide clear feedback to the user. Set file size and type limits.
- **Authorization:** Ensure users can only access and modify their own data (equipment, issues, etc.). Implement role-based access control if different user types are introduced later.
- **Database Constraints:** Utilize database constraints (UNIQUE, NOT NULL, Foreign Keys) to maintain data integrity.
SAMPLE/MOCK DATA:
1. **User:**
```json
{
"id": "a1b2c3d4-e5f6-7890-1234-567890abcdef",
"name": "Ata Demirer",
"email": "ata.demirer@example.com",
"image": "/images/users/ata.jpg"
}
```
2. **Equipment (Owned by Ata Demirer):**
```json
[
{
"id": "f0e9d8c7-b6a5-4321-fedc-ba0987654321",
"userId": "a1b2c3d4-e5f6-7890-1234-567890abcdef",
"make": "John Deere",
"model": "6195M",
"year": 2020,
"serialNumber": "1234567890ABCDEF",
"purchaseDate": "2020-05-15",
"notes": "Primary tractor for plowing operations."
},
{
"id": "1a2b3c4d-5e6f-7890-abcd-ef0123456789",
"userId": "a1b2c3d4-e5f6-7890-1234-567890abcdef",
"make": "New Holland",
"model": "CR7.90",
"year": 2019,
"serialNumber": "NHCROP790XYZ987",
"purchaseDate": "2019-08-20",
"notes": "Used during harvest season."
}
]
```
3. **Repair Guide:**
```json
{
"id": "98765432-10fe-dcba-9876-543210fedcba",
"equipmentId": "f0e9d8c7-b6a5-4321-fedc-ba0987654321",
"title": "Routine Maintenance Schedule - 6195M",
"description": "Recommended maintenance tasks and intervals for the John Deere 6195M tractor.",
"filePath": "/files/guides/JD6195M_maintenance.pdf",
"source": "Official",
"addedByUserId": null
}
```
4. **Issue Report:**
```json
{
"id": "c3d4e5f6-a1b2-3456-7890-123456abcdef01",
"equipmentId": "f0e9d8c7-b6a5-4321-fedc-ba0987654321",
"reportedByUserId": "a1b2c3d4-e5f6-7890-1234-567890abcdef",
"title": "Hydraulic System Leak Detected",
"description": "Noticed a small leak in the hydraulic system near the main pump during operation yesterday. Fluid level seems stable but requires inspection.",
"reportedAt": "2024-07-26T10:30:00Z",
"status": "Open",
"images": ["/images/issues/hydraulic_leak_1.jpg"],
"videos": []
}
```
5. **Forum Thread:**
```json
{
"id": "a1b1c1d1-e1f1-1111-a1b1-c1d1e1f11111",
"title": "Best Practices for Winterizing John Deere Combines",
"createdByUserId": "a1b2c3d4-e5f6-7890-1234-567890abcdef",
"createdAt": "2024-07-25T14:00:00Z"
}
```
6. **Forum Post:**
```json
{
"id": "b2c2d2e2-f1a1-2222-b2c2-d2e2f1a22222",
"threadId": "a1b1c1d1-e1f1-1111-a1b1-c1d1e1f11111",
"authorId": "a1b2c3d4-e5f6-7890-1234-567890abcdef",
"content": "Make sure to drain all fluids completely and use a proper storage cover. I also disconnect the battery.",
"createdAt": "2024-07-25T14:05:00Z"
}
```
7. **Another User (for testing relations):**
```json
{
"id": "fedcba98-7654-3210-fedc-ba9876543210",
"name": "Zeynep Yılmaz",
"email": "zeynep.yilmaz@example.com",
"image": null
}
```
8. **Equipment (Owned by Zeynep Yılmaz):**
```json
{
"id": "d0c1b2a3-4567-8901-2345-67890abcdef0",
"userId": "fedcba98-7654-3210-fedc-ba9876543210",
"make": "Case IH",
"model": "Magnum 380",
"year": 2021,
"serialNumber": "CIH380ABC987",
"purchaseDate": "2021-03-10",
"notes": "Heavy duty fieldwork."
}
```
9. **General Guide (Not tied to specific equipment):**
```json
{
"id": "e1f1a1b1-c1d1-3333-e1f1-a1b1c1d13333",
"equipmentId": null,
"title": "Understanding Common Tractor Error Codes",
"description": "A general guide to interpreting common diagnostic error codes across various tractor brands.",
"filePath": "/files/guides/common_error_codes.pdf",
"source": "Community",
"addedByUserId": "a1b2c3d4-e5f6-7890-1234-567890abcdef"
}
```
10. **Another Forum Post:**
```json
{
"id": "c3d3e3f3-a1b1-4444-c3d3-e3f3a1b34444",
"threadId": "a1b1c1d1-e1f1-1111-a1b1-c1d1e1f11111",
"authorId": "fedcba98-7654-3210-fedc-ba9876543210",
"content": "Has anyone tried the new anti-freeze solution recommended for the latest models? Wondering about its effectiveness in extreme cold.",
"createdAt": "2024-07-26T09:15:00Z"
}
```