Honey Shop
E-Commerce & CRM

A. The Storefront (User Experience)

• • SEO-Optimized Server Components: Product catalogs, blogs, and marketing pages (Philanthropy, Partnerships, Services) are rendered on the server, ensuring instant load times and perfect SEO indexing.
• • Interactive 3D Product Viewer: Utilizing React Three Fiber to allow users to interact, spin, and zoom into high-fidelity 3D models of honey jars directly in their browser.
• • Dynamic Cart & Checkout Flow: Real-time cart state management with complex checkout functionality, including Google reCAPTCHA verification to prevent bot orders.
• • Robust Form Handling: Complex, multi-step forms (e.g., Beekeeping Service Requests, Job Applications, Contact Forms) are validated strictly via Zod schemas before being processed by Server Actions.

B. The Custom CRM (Admin Dashboard)

Instead of relying on WordPress or Shopify, a completely custom CRM was built at the /dashboard route, protected by Next.js Middleware checking for ADMIN roles in the JWT.

• • Product & Inventory Management: Full CRUD capabilities for core "Honey" products and "Other Products". Admins can define variants, sizes, seasonal availability dates (availableFrom, availableTo), and custom promotional tags.
• • Order Fulfillment: A dedicated orders table allowing admins to view pending purchases, track shipping details (city, zip, payment method), and update order statuses (Processing, Shipped, Delivered).
• • Content Management (CMS): Admins can write, edit, tag, and publish SEO-friendly blog posts with images uploaded directly to UploadThing. They also manage media appearances tracking video links and press mentions.
• • Dynamic Carousel: A drag-and-drop sortable interface (powered by @dnd-kit) to manage the images that appear on the storefront's hero carousel.
• • Inbox & Analytics: A unified dashboard to manage incoming requests alongside utilizing amCharts 5 to process and visualize real-time sales data, user geodata, and product performance metrics directly from PostgreSQL.

C. Security & Integrations

• • Middleware Protection: Next.js middleware specifically intercepts /dashboard/* routes, verifying the user's role via the JWT secret before rendering the page, redirecting unauthorized users to /auth/signin.
• • File Upload Security: UploadThing is configured with secure endpoints (/api/uploadthing) ensuring only authenticated admins can upload or modify media assets.
• • Email Automation: Configured SMTP endpoints (/api/contact, /api/job-application, /api/bee-requests) using Nodemailer to send instant administrative alerts when users submit forms on the site.