Harvest
Harvest is a production-ready e-commerce platform designed for organic and farm-fresh grocery shopping. Built with Next.js 16 App Router, it features secure authentication with email/password and Google OAuth, a real-time cart system synced with MongoDB, and a premium UI with smooth Framer Motion animations. The platform follows clean 3-layer architecture (Controller → Service → Repository) ensuring maintainability and scalability.
Technology Stack
Development Challenges
Implementing secure authentication with NextAuth.js — configuring both Credentials and Google OAuth providers, handling JWT callbacks, and managing session persistence across routes was initially confusing
Building the cart system with real-time MongoDB sync — ensuring cart data persists for logged-in users while handling optimistic UI updates and preventing race conditions during quantity changes
Form validation with React Hook Form and Zod — creating comprehensive validation schemas for registration (password strength, email format, phone validation) and displaying user-friendly error messages
Understanding Next.js App Router architecture — learning the difference between Server and Client Components, when to use 'use client', and how to properly fetch data in server components
Implementing protected routes with NextAuth middleware — restricting access to cart and dashboard pages for unauthenticated users while maintaining smooth user experience with proper redirects
Future Improvements
Refactored entire codebase to 3-layer architecture (Controller → Service → Repository) for better separation of concerns, making the code more maintainable and testable
Added comprehensive form validation using Zod schemas with real-time error feedback, improving user experience during registration and login
Implemented price change detection in cart — users now get notified when product prices change after adding items to cart, preventing checkout surprises
Enhanced UI/UX with Framer Motion animations, loading skeletons, and toast notifications — creating a premium, responsive shopping experience across all devices
Optimized authentication flow with automatic login after registration — eliminating the need for users to log in separately after creating an account