MyShop Product Management System

A full-stack product listing and management system built with Docker, Apache/PHP, MySQL, Express.js API, and vanilla JavaScript frontend. This project demonstrates a complete web application setup using containerization and modern web technologies.

📋 Project Overview

This is a teaching lab project that showcases:

• Docker containerization with Apache, MySQL, and phpMyAdmin
• RESTful API built with Express.js and Node.js
• MySQL database for data persistence
• Responsive frontend with vanilla HTML, CSS, and JavaScript
• CRUD operations for product management

🏗️ Project Structure

lab-setup-product-shop-web/
├── docker-compose.yml          # Docker services configuration
├── apache/
│   └── vhosts/
│       └── myshop.local.conf  # Apache virtual host configuration
├── api/
│   └── product-apis/          # Express.js REST API
│       ├── server.js          # Main API server
│       ├── db.js              # Database connection
│       ├── seeder.js          # Database seeder script
│       ├── package.json       # Node.js dependencies
│       └── README.md          # API documentation
├── htdocs/
│   └── myshop.local/
│       └── index.html         # Frontend application
└── mysql/
    └── data/                  # MySQL data directory (auto-generated)

🚀 Prerequisites

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

For Windows Users:

• Docker Desktop for Windows (version 4.0 or higher)
• Node.js (version 14 or higher)
• Git for Windows (optional, for cloning)

For Mac Users:

• Docker Desktop for Mac (version 4.0 or higher)
• Node.js (version 14 or higher)
• Git (pre-installed on macOS)

📦 Installation & Setup

Step 1: Clone or Download the Project

Option A: Using Git

git clone <repository-url>
cd lab-setup-product-shop-web

Option B: Download ZIP

• Download and extract the project to your preferred location

Step 2: Start Docker Services

Make sure Docker Desktop is running, then open a terminal/command prompt in the project root directory.

For Mac/Linux:

docker-compose up -d

For Windows (Command Prompt):

docker-compose up -d

For Windows (PowerShell):

docker-compose up -d

This command will start three Docker containers:

• Apache/PHP (port 80) - Web server
• MySQL (port 3306) - Database server
• phpMyAdmin (port 8081) - Database management interface

Wait for all containers to start (usually takes 30-60 seconds on first run).

Step 3: Install Node.js Dependencies

Navigate to the API directory and install the required packages:

For Mac/Linux:

cd api/product-apis
npm install

For Windows:

cd api\product-apis
npm install

Step 4: Seed the Database

Create the database and populate it with sample products:

npm run seed

You should see a success message indicating that the database has been initialized with sample products.

Step 5: Start the API Server

Start the Express.js API server:

For development (with auto-reload):

npm run dev

For production:

npm start

The API server will start on http://localhost:3000

Step 6: Access the Application

Open your web browser and navigate to:

• Frontend Application: http://localhost or http://myshop.local
• API Documentation: http://localhost:3000/api/health
• phpMyAdmin: http://localhost:8081
  • Username: root
  • Password: root

🎯 Usage

Frontend Features

The web interface provides:

• Browse all products in a responsive grid layout
• Search products by name or description
• Filter products by category
• View detailed product information
• Responsive design for mobile and desktop

API Endpoints

Products

• GET /api/products - Get all products
  • Query parameters: ?search=keyword or ?category=CategoryName
• GET /api/products/:id - Get a single product by ID
• POST /api/products - Create a new product
• PUT /api/products/:id - Update a product
• DELETE /api/products/:id - Delete a product

Categories

• GET /api/categories - Get all unique categories

Health Check

• GET /api/health - Check API status

Example API Requests

Get all products:

curl http://localhost:3000/api/products

Search products:

curl http://localhost:3000/api/products?search=laptop

Filter by category:

curl http://localhost:3000/api/products?category=Electronics

🔧 Configuration

Database Configuration

The MySQL database is configured with the following credentials (defined in docker-compose.yml):

Host: localhost
Port: 3306
Database: app
Username: app
Password: secret
Root Password: root

API Configuration

The API can be configured using environment variables. Create a .env file in the api/product-apis directory:

PORT=3000
DB_HOST=localhost
DB_USER=app
DB_PASSWORD=secret
DB_NAME=app
DB_PORT=3306

🛠️ Troubleshooting

Port Conflicts

If you encounter port conflicts:

Windows:

# Check what's using port 80
netstat -ano | findstr :80

# Check what's using port 3306
netstat -ano | findstr :3306

Mac/Linux:

# Check what's using port 80
lsof -i :80

# Check what's using port 3306
lsof -i :3306

Solution: Stop the conflicting service or modify the port in docker-compose.yml

Docker Not Starting

1. Ensure Docker Desktop is running
2. Check Docker Desktop for any errors
3. Try restarting Docker Desktop

API Connection Errors

1. Verify Docker containers are running:

   docker ps

2. Check MySQL is ready:

   docker logs mysql_db

3. Ensure the database is seeded:

   cd api/product-apis
   npm run seed

Node Modules Issues

If you encounter dependency issues:

cd api/product-apis
rm -rf node_modules package-lock.json
npm install

🛑 Stopping the Application

To stop all services:

1. Stop the Node.js API server (Ctrl+C in the terminal)
2. Stop Docker containers:

   docker-compose down

To stop and remove all data:

docker-compose down -v

📚 Learning Objectives

This project demonstrates:

• Docker containerization and orchestration
• RESTful API design and implementation
• Database design and CRUD operations
• Frontend-backend integration
• Asynchronous JavaScript and fetch API
• Environment configuration and management
• Version control best practices

🤝 Contributing

This is a teaching project. Feel free to:

• Fork the repository
• Create feature branches
• Submit pull requests
• Report issues

📝 License

This project is created for educational purposes.

👨‍💻 Support

For questions or issues:

1. Check the troubleshooting section above
2. Review the API documentation in api/product-apis/README.md
3. Check Docker and Node.js logs for error messages

---

Happy Coding! 🎉