Full-Stack Agricultural E-Commerce Platform
A comprehensive portfolio project demonstrating modern web development skills, database management, and responsive design.
Farm Fresh is a comprehensive portfolio project showcasing a modern agricultural e-commerce platform. This project demonstrates full-stack development skills, from database design to responsive UI implementation, highlighting proficiency in modern web technologies.
- 🚀 Full-Stack Development - Next.js 15 with App Router and TypeScript
- 🎨 Modern UI/UX - Responsive design with Tailwind CSS and shadcn/ui components
- 🗄️ Database Management - MongoDB Atlas with comprehensive data modeling
- 🔍 Search & Filtering - Real-time product search with advanced filtering
- 🛒 E-commerce Features - Complete shopping cart and product catalog system
- 📱 Responsive Design - Mobile-first approach with modern layouts
- ⚡ Performance Optimization - Fast loading and modern web practices
- ☁️ Cloud Deployment - Professional deployment pipeline with Vercel
- Product Catalog - Browse 20+ organic products across 4 categories
- Real-time Search - Instant product search with suggestions
- Shopping Cart - Add, remove, and manage items with persistent state
- Product Details - Comprehensive product information and high-quality images
- Responsive Design - Seamless experience across desktop, tablet, and mobile
- Order Management - Track and update order statuses in real-time
- Product Management - Add, edit, and organize product catalog
- Analytics Dashboard - View sales metrics and business insights
- User Management - Handle customer accounts and permissions
- Modern Stack - Next.js 15 with App Router, TypeScript, Tailwind CSS
- Database - MongoDB Atlas with optimized queries and data modeling
- Authentication - Secure JWT-based authentication system
- API Design - RESTful APIs with proper error handling and validation
- Performance - Optimized images, lazy loading, and fast page transitions
- Framework: Next.js 15 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS + shadcn/ui
- Icons: Lucide React
- State Management: React Hooks + Context API
- Runtime: Node.js with Next.js API Routes
- Database: MongoDB Atlas
- Authentication: JWT + bcryptjs
- Validation: Custom validation with TypeScript
- Package Manager: npm
- Version Control: Git + GitHub
- Deployment: Vercel
- Environment: Environment variables for secure configuration
src/
├── app/ # Next.js App Router
│ ├── (auth)/ # Authentication pages
│ ├── admin/ # Admin dashboard
│ ├── api/ # API routes
│ ├── products/ # Product pages
│ └── globals.css # Global styles
├── components/ # Reusable components
│ ├── ui/ # shadcn/ui components
│ ├── layout/ # Layout components
│ └── cart-sheet.tsx # Shopping cart
├── lib/ # Utilities and data
├── types/ # TypeScript definitions
├── context/ # React Context providers
└── hooks/ # Custom React hooks
- Node.js 18+
- MongoDB Atlas account (optional - uses demo data)
- Git
- Clone the repository
git clone https://github.com/Knights24/Farms-Fresh.git
cd FreshFarm- Install dependencies
npm install- Environment setup
cp .env.example .env.local
# Add your MongoDB connection string (optional)- Start development server
npm run dev- Access the application
- Frontend: http://localhost:3000
- Admin: http://localhost:3000/admin
This project is professionally deployed on Vercel with full production configuration:
- Production URL: https://fresh-farm-awxpwtz76-knight-igris-projects.vercel.app
- Project Name:
fresh-farm - Environment: MongoDB Atlas + JWT Authentication
- Status: ✅ Live and fully functional
- Performance: Optimized for production with static generation
Deployment Features:
- Automatic deployments from GitHub
- Environment variables securely configured
- MongoDB Atlas cloud database integration
- Professional domain and SSL certificate
- Global CDN distribution for optimal performance
✅ Full-Stack Implementation - Complete CRUD operations with database integration
✅ Responsive Design - Mobile-first approach with modern UI patterns
✅ Performance Optimization - Fast loading times and efficient data fetching
✅ Type Safety - Comprehensive TypeScript implementation
✅ Modern Architecture - Clean code structure with separation of concerns
✅ E-commerce Workflow - Complete shopping experience from browse to cart
✅ Admin Operations - Comprehensive dashboard for business management
✅ Search & Filter - Advanced product discovery features
✅ Data Management - Efficient database design and query optimization
- Browse 20+ organic products across 4 categories
- Test real-time search and filtering functionality
- Experience responsive design on all devices
- Complete shopping cart and checkout workflow
- View admin dashboard capabilities
- Modern UI with Tailwind CSS and shadcn/ui components
- Live Production Deployment on Vercel
- MongoDB Atlas Integration for data management
- JWT Authentication for secure admin access
- Optimized Performance with Next.js 15
- Professional Portfolio Showcase ready for LinkedIn
Vivek Vishwakarma
Full-Stack Developer
📍 Location: Ahmedabad, Gujarat, India
📱 Phone: +91 9327597697
This project is licensed under the MIT License - see the LICENSE file for details.
⭐ If you found this project interesting, please give it a star! ⭐
Built with ❤️ by Vivek Vishwakarma