A premium full-stack e-commerce web application for browsing, purchasing, and managing plants, built with React, Node.js, Express, and MongoDB. Created by TechBire. 🎯 Live Demo: https://bloomcart-wheat.vercel.app/

• Plant Catalog: Browse through a beautiful grid of plants with images, names, prices, and categories
• Search & Filter:
  • Search by plant name, category, or description (case-insensitive)
  • Filter by category (Indoor, Outdoor, Succulent, Air Purifying, Favorites, etc.)
  • Filter by availability (In Stock/Out of Stock)
  • Sort by date, name, or price
• Shopping Cart: Add plants to cart, manage quantities, and proceed to checkout
• Favorites Collection: Save your favorite plants for easy access
• Plant Details: Detailed view with pricing, descriptions, and care instructions
• Add Plant (Admin): Add new plants with comprehensive validation
• Responsive Design: Glass morphism UI that works seamlessly on desktop, tablet, and mobile devices
• Loading States: Beautiful loading animations and error handling
• SEO Optimized: Complete meta tags, Open Graph, and Twitter Card support

• RESTful API: Clean, scalable API with proper error handling
• Database Integration: MongoDB with Mongoose ODM
• Data Validation: Server-side validation with Joi
• Security: CORS, Helmet, and rate limiting
• Search: Advanced text search with indexing
• Payment Integration: Razorpay payment gateway integration
• Image Management: Google Images API integration for plant photos
• Seeding: Pre-populated with 50+ plant records

• React 18 with functional components and hooks
• React Router for navigation
• Axios for API calls
• React Icons for beautiful icons
• React Toastify for notifications
• CSS3 with modern styling and animations

• Node.js with Express.js framework
• MongoDB with Mongoose ODM
• Joi for data validation
• CORS for cross-origin requests
• Helmet for security headers
• Express Rate Limit for API protection

BloomCart/ ├── backend/ # Node.js Express API │ ├── models/ │ │ └── Plant.js # Plant data model │ ├── routes/ │ │ ├── plants.js # Plant API routes │ │ ├── payments.js # Payment processing │ │ ├── images.js # Image management │ │ └── scraper.js # Web scraping utilities │ ├── validators/ │ │ └── plantValidator.js # Input validation │ ├── scripts/ │ │ └── seedData.js # Database seeding │ ├── services/ │ │ └── GoogleImagesService.js # Image API integration │ ├── server.js # Express server setup │ ├── package.json │ └── .env # Environment variables ├── frontend/ │ ├── public/ # Static assets, favicon, manifest │ ├── src/ │ │ ├── components/ │ │ │ ├── Header.js # Navigation header │ │ │ ├── Footer.js # Site footer │ │ │ ├── PlantCard.js # Individual plant display │ │ │ ├── SearchAndFilter.js # Search and filter UI │ │ │ ├── LoadingSpinner.js # Loading component │ │ │ ├── ErrorMessage.js # Error display │ │ │ └── Cart.js # Shopping cart │ │ ├── pages/ │ │ │ ├── Home.js # Main catalog page │ │ │ ├── AddPlant.js # Add plant form │ │ │ ├── PlantDetail.js # Plant details view │ │ │ ├── Checkout.js # Checkout process │ │ │ └── OrderSuccess.js # Order confirmation │ │ ├── context/ │ │ │ └── CartContext.jsx # Shopping cart state │ │ ├── utils/ │ │ │ ├── api.js # API integration │ │ │ └── imageAPI.js # Image utilities │ │ ├── App.js # Main app component │ │ └── index.js # React entry point │ └── package.json ├── .github/ # GitHub configurations ├── README.md # Project documentation ├── start.ps1 # Quick start script ├── DEPLOYMENT_GUIDE.md # Comprehensive deployment guide └── DEPLOYMENT_CHECKLIST.md # Quick deployment checklist 

• Node.js (v14 or higher)
• MongoDB (local installation or MongoDB Atlas)
• npm or yarn

1. Navigate to backend directory:

   cd backend

2. Install dependencies:

   npm install

3. Environment Configuration: Create a .env file in the backend directory:

   PORT=5000 MONGODB_URI=mongodb://localhost:27017/plantstore FRONTEND_URL=http://localhost:3000 NODE_ENV=development

4. Start MongoDB: Make sure MongoDB is running on your system

5. Seed the database:

   npm run seed

6. Start the backend server:

   npm run dev

   The backend will run on http://localhost:5000

1. Navigate to frontend directory:

   cd frontend

2. Install dependencies:

   npm install

3. Environment Configuration (Optional): Create a .env file in the frontend directory:

   REACT_APP_API_URL=http://localhost:5000/api

4. Start the frontend:

   npm start

   The frontend will run on http://localhost:3000

• GET /api/plants - Get all plants with optional filters
• GET /api/plants/:id - Get single plant by ID
• POST /api/plants - Add new plant
• PUT /api/plants/:id - Update plant
• DELETE /api/plants/:id - Delete plant
• GET /api/plants/meta/categories - Get all categories

• search - Search by name, category, or description
• category - Filter by category
• availability - Filter by availability (true/false)
• page - Page number for pagination
• limit - Items per page
• sortBy - Sort field (createdAt, name, price)
• sortOrder - Sort order (asc, desc)

{ name: String (required, 2-100 characters), price: Number (required, >= 0), categories: [String] (required, enum values), availability: Boolean (default: true), description: String (max 500 characters), image: String (URL), care_instructions: String (max 300 characters), stock_quantity: Number (>= 0, default: 0), createdAt: Date, updatedAt: Date }

• Indoor
• Outdoor
• Succulent
• Air Purifying
• Home Decor
• Low Light
• Pet Friendly
• Flowering
• Medicinal
• Hanging
• Large
• Small

• Grid layout with responsive design
• Beautiful plant cards with hover effects
• Category tags and availability badges
• Price display with Indian Rupee symbol

• Real-time search with debouncing
• Category dropdown with all available categories
• Availability filter
• Sorting options (date, name, price)
• Clear filters functionality

• Comprehensive form with validation
• Category suggestions and custom category input
• Image preview functionality
• Character count for text fields
• Success/error notifications

• Mobile-first approach
• Tablet and desktop optimizations
• Touch-friendly interface
• Flexible grid layouts

This project is ready for production deployment! Choose from multiple deployment options:

• Frontend: Vercel (Free tier)
• Backend: Railway (Free tier)
• Database: MongoDB Atlas (Free tier)

• 📋 DEPLOYMENT_CHECKLIST.md - Quick checklist for immediate deployment
• 📖 DEPLOYMENT_GUIDE.md - Comprehensive step-by-step deployment guide

# Frontend REACT_APP_API_URL=https://your-backend-url.com REACT_APP_RAZORPAY_KEY=rzp_test_your_key # Backend NODE_ENV=production MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/bloomcart RAZORPAY_KEY_ID=rzp_test_your_key_id RAZORPAY_KEY_SECRET=your_razorpay_secret JWT_SECRET=your_super_secret_jwt_key FRONTEND_URL=https://your-frontend-url.com

• CORS protection
• Helmet for security headers
• Rate limiting (100 requests per 15 minutes)
• Input validation and sanitization
• Error handling without exposing sensitive data

• Database indexing for faster searches
• Pagination to limit data transfer
• Debounced search to reduce API calls
• Optimized images with fallback
• Lazy loading components

The application includes:

• Form validation
• Error boundary handling
• API error handling
• Responsive design testing

• Mobile: < 480px
• Tablet: 480px - 768px
• Desktop: > 768px

• User authentication and authorization
• User profiles and order history
• Plant care reminders and notifications
• Reviews and ratings system
• Advanced filtering (price range, plant size, difficulty level)
• Plant care guides and tutorials
• Community features (plant sharing, forums)
• Real-time inventory management
• Multi-language support
• Mobile app development

This project was built as a comprehensive plant e-commerce solution. Contributions are welcome! Please feel free to submit a Pull Request.

Developer: TechBire
Email: anshhtechnical@gmail.com
LinkedIn: https://www.linkedin.com/in/techbire/

For any queries, suggestions, or collaboration opportunities, feel free to reach out!

• Thanks to all plant lovers who inspired this project
• Special thanks to the open-source community for amazing libraries and tools

Built with ❤️ for plant lovers everywhere 🌱
Transform your space with nature's beauty 🏡