Skip to content

techbire/BloomCart

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
backend
backend
 
 
frontend
frontend
 
 
.env.example
.env.example
 
 
.gitignore
.gitignore
 
 
DEPLOYMENT_GUIDE.md
DEPLOYMENT_GUIDE.md
 
 
README.md
README.md
 
 

Repository files navigation

BloomCart

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/

📸 Screenshots

Dashboard

Dashboard

🌱 Features

Frontend Features

  • 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

Backend Features

  • 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

🚀 Tech Stack

Frontend

  • 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

Backend

  • 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

📁 Project Structure

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

🛠 Installation & Setup

Prerequisites

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

Backend Setup

  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

Frontend Setup

  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

🌐 API Endpoints

Plants

  • 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

Query Parameters for GET /api/plants

  • 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)

💾 Database Schema

Plant Model

{
  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
}

Available Categories

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

🎨 Features Showcase

Plant Catalog

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

Search & Filter

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

Add Plant Form

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

Responsive Design

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

� Deployment

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

Quick Deployment (Recommended)

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

Deployment Files

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

Environment Variables Required

# 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

�🔒 Security Features

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

🚀 Performance Optimizations

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

🧪 Testing

The application includes:

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

📱 Responsive Breakpoints

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

🌟 Future Enhancements

  • 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

👥 Contributing

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

📞 Contact

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!

🌟 Acknowledgments

  • 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 🏡

About

A premium full-stack e-commerce web application for browsing, purchasing, and managing plants, built with React, Node.js, Express, and MongoDB.

bloomcart-wheat.vercel.app

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages