Sunny's Computer Service & Repair Website

A comprehensive computer repair business website with e-commerce functionality, repair tracking, and admin management system.

🚀 Features

✅ Authentication System

• Phone-only Authentication: Customers sign up/sign in using phone number + OTP
• Twilio Integration: SMS OTP verification for secure authentication
• Session Management: Persistent user sessions with NextAuth.js

✅ E-commerce Platform

• Product Catalog: Browse laptops, desktops, components from multiple brands
• Shopping Cart: Add to cart, modify quantities, persistent storage
• Checkout System: Complete order placement with shipping details
• Order Management: Track order status and history

✅ Repair Service System

• Repair Requests: Multi-step form for device information and issue details
• Photo Uploads: Upload device photos for better diagnosis
• Repair Tracking: Real-time status updates with technician information
• Timeline View: Complete repair history and progress tracking

✅ Admin Dashboard

• Business Analytics: Revenue, orders, repairs statistics with charts
• Product Management: Add, edit, manage inventory and stock levels
• Order Management: Process orders, update status, view details
• Repair Management: Assign technicians, update repair status, manage workflow
• Customer Management: View customer information and history

✅ Marketing Pages

• Services Page: Complete service offerings and pricing
• About Page: Business story, team information, certifications
• Contact Page: Contact form, business information, FAQ

🛠 Tech Stack

• Framework: Next.js 16.0.0 with App Router
• Language: TypeScript
• Authentication: NextAuth.js 5.0 + Twilio SMS OTP
• Database: MongoDB + Mongoose ODM
• State Management: Zustand for client-side state
• UI Components: ShadCN/UI (449+ components)
• Styling: Tailwind CSS
• File Uploads: Cloudinary (ready for integration)

🚀 Getting Started

Prerequisites

• Node.js 18+ or Bun
• MongoDB database
• Twilio account (for SMS OTP)
• Cloudinary account (for image uploads)

Installation

1. Clone the repository

   git clone <repository-url>
   cd computer-repair

2. Install dependencies

   npm install
   # or
   bun install

3. Setup environment variables

   cp .env.example .env.local

   Fill in your environment variables:

   MONGODB_URI=mongodb://localhost:27017/computer-repair
   NEXTAUTH_SECRET=your-secret-key
   TWILIO_ACCOUNT_SID=your-twilio-sid
   TWILIO_AUTH_TOKEN=your-twilio-token
   TWILIO_PHONE_NUMBER=your-twilio-phone

4. Start MongoDB

   # Using MongoDB locally
   mongod
   
   # Or use MongoDB Atlas (cloud)

5. Run the development server

   npm run dev
   # or
   bun run dev

6. Open in browser Navigate to http://localhost:3000

📱 Authentication Flow

1. Customer visits website → Sign up/Sign in with phone number
2. Phone number entered → OTP sent via Twilio SMS
3. OTP verification → Account created/logged in automatically
4. Session created → User can access dashboard and place orders

🛒 E-commerce Flow

1. Browse products → Filter by brand, category, price
2. Add to cart → Products stored with Zustand persistence
3. Checkout → Enter shipping information
4. Place order → Order saved to MongoDB with tracking number
5. Track order → Real-time status updates in user dashboard

🔧 Repair Service Flow

1. Request repair → Multi-step form with device details
2. Upload photos → Device condition documentation
3. Receive quote → Admin provides estimate and timeline
4. Track progress → Real-time updates from technician
5. Completion → Notification and pickup/delivery arrangement

👨‍💼 Admin Features

• Dashboard Overview: Business metrics and recent activity
• Product Management: Inventory, pricing, stock levels
• Order Processing: Status updates, shipping labels
• Repair Workflow: Technician assignment, progress tracking
• Customer Support: View customer history and communications

🧪 Testing Authentication

1. Visit http://localhost:3000/auth/sign-in
2. Enter a phone number (use Twilio test numbers for development)
3. Enter the OTP received via SMS
4. Access the dashboard at http://localhost:3000/dashboard

📁 Key Pages

• Homepage: / - Hero, product showcase, features
• Products: /products - Product catalog with filtering
• Cart: /cart - Shopping cart and checkout
• Repair Request: /repair - Multi-step repair form
• Services: /services - Service offerings and pricing
• About: /about - Company information and team
• Contact: /contact - Contact form and business info
• Admin Dashboard: /admin - Complete admin interface
• User Dashboard: /dashboard - Customer account area

🔧 Admin Access

The admin dashboard is accessible at /admin. Currently, any authenticated user can access it. In production, you should implement proper role-based access control.

📞 Support & Contact

For questions about this implementation:

• Business: Sunny's Computer Service & Repair
• Developer: GitHub Copilot Implementation
• Tech Stack: Next.js 16, NextAuth.js, MongoDB, Twilio, ShadCN/UI

---

✅ Complete computer repair business website with authentication, e-commerce, repair tracking, and admin management!