🌿 Botanical - Plant E-Commerce Platform

A full-stack web application for buying and selling plants, featuring both indoor and outdoor plant categories. Built with modern web technologies to provide a seamless shopping experience with real-time features.

📋 Table of Contents

• Features
• Tech Stack
• Project Structure
• Prerequisites
• Installation
• Configuration
• Running the Application
• API Endpoints
• Project Overview

✨ Features

• Product Catalog: Browse through a wide variety of indoor and outdoor plants
• User Management: User registration, authentication, and profile management
• Shopping Cart & Orders: Complete order management system
• Address Management: Save and manage delivery addresses
• Real-time Features: Live user count tracking using WebSocket (Socket.io)
• Responsive Design: Modern, mobile-friendly UI built with Bootstrap
• Product Categories: Filter plants by indoor/outdoor categories
• Product Details: View plant specifications including size, light requirements, and pricing

🛠 Tech Stack

Backend

• Node.js - Runtime environment
• Express.js - Web framework
• MongoDB - Database (via Mongoose)
• Socket.io - Real-time bidirectional communication
• dotenv - Environment variable management

Frontend

• HTML5/CSS3 - Structure and styling
• JavaScript (ES6+) - Client-side logic
• Bootstrap 5 - UI framework
• jQuery - DOM manipulation
• Font Awesome - Icons
• SCSS - Enhanced CSS with variables and nesting

📁 Project Structure

Botanical/
├── app.js                 # Main server file
├── package.json           # Dependencies and scripts
├── .env                   # Environment variables (create this)
│
├── client/                # Frontend files
│   ├── index.html        # Home page
│   ├── products.html     # Products listing page
│   ├── add-product.html  # Add product page
│   ├── profile.html      # User profile page
│   ├── contact.html      # Contact page
│   ├── style.css         # Main stylesheet
│   ├── style.scss        # SCSS source file
│   ├── index.js          # Home page logic
│   ├── scripts/          # Page-specific JavaScript
│   │   ├── products.js
│   │   ├── add-product.js
│   │   ├── profile.js
│   │   ├── contact.js
│   │   └── weather.js
│   ├── styles/           # Page-specific CSS
│   └── src/              # Image assets
│
├── models/               # Database models
│   ├── product-model.js
│   ├── user-model.js
│   ├── order-model.js
│   └── address-model.js
│
├── controllers/          # Business logic
│   ├── product-controller.js
│   ├── user-controller.js
│   ├── order-controller.js
│   └── address-controller.js
│
└── router/               # API routes
    ├── products-router.js
    ├── users-router.js
    ├── orders-router.js
    └── addresses-router.js

📦 Prerequisites

Before you begin, ensure you have the following installed on your system:

• Node.js (v14 or higher) - Download here
• npm (comes with Node.js) or yarn
• MongoDB - Either:
  • Local MongoDB installation, or
  • MongoDB Atlas account (cloud database) - Sign up here

🚀 Installation

1. Clone the repository (or navigate to the project directory)

   cd Botanical

2. Install dependencies

   npm install

   This will install all required packages:

   • express
   • mongoose
   • socket.io
   • dotenv
   • nodemon

⚙️ Configuration

1. Create a .env file in the root directory of the project:

   touch .env

2. Add your environment variables to the .env file:

   MONGO_URI=your_mongodb_connection_string
   PORT=3000

   For local MongoDB:

   MONGO_URI=mongodb://localhost:27017/botanical
   PORT=3000

   For MongoDB Atlas:

   MONGO_URI=mongodb+srv://username:password@cluster.mongodb.net/botanical?retryWrites=true&w=majority
   PORT=3000

   Note: Replace username and password with your actual MongoDB Atlas credentials.

▶️ Running the Application

1. Start the server

   npm start

   The application uses nodemon for automatic server restarts during development.

2. Open your browser Navigate to:

   http://localhost:3000
   

3. Verify the connection

   • Check the terminal for: connected to MongoDB
   • Check the terminal for: app listening at http://localhost:3000
   • The home page should load in your browser

🔌 API Endpoints

The application provides RESTful API endpoints:

• Users: /api/users
• Products: /api/products
• Orders: /api/orders
• Addresses: /api/addresses

Each endpoint supports standard CRUD operations (Create, Read, Update, Delete).

📖 Project Overview

Backend Architecture

The application follows an MVC (Model-View-Controller) pattern:

• Models (models/): Define database schemas using Mongoose
• Controllers (controllers/): Handle business logic and database operations
• Routers (router/): Define API routes and connect them to controllers
• Server (app.js): Main entry point that sets up Express, MongoDB connection, and Socket.io

Frontend Architecture

• Static Pages: HTML files in the client/ directory
• Client-side Logic: JavaScript files handle user interactions and API calls
• Styling: SCSS compiled to CSS for maintainable styling
• Real-time Updates: Socket.io client connects to server for live features

Key Features Implementation

• Real-time User Count: Socket.io tracks connected users and broadcasts updates
• Product Management: Full CRUD operations for plant products
• User Authentication: Secure user registration and login system
• Order Processing: Complete order lifecycle management
• Address Management: Multiple delivery addresses per user

🎯 Next Steps

After running the application:

1. Explore the home page to see featured plants
2. Browse products by category (Indoor/Outdoor)
3. Create a user account
4. Add products to your cart
5. Place an order with delivery address

📝 Notes

• The application automatically seeds the database with sample products on first run
• Make sure MongoDB is running before starting the server
• The default port is 3000, but you can change it in the .env file
• Socket.io enables real-time features like live user count

🤝 Contributing

This is a learning project. Feel free to explore, modify, and enhance the codebase!

---

Happy Planting! 🌱