Shade Paradise: My Bachelor’s E-commerce Project

For my Bachelor’s final project, I built an e-commerce website called Shade Paradise. This project taught me a lot about web development, databases, and even Docker. Let me share what I learned!

What is Shade Paradise?

Shade Paradise is an e-commerce website where people can buy sunglasses online. I built it from scratch using:

• HTML, CSS, and JavaScript for the frontend
• PHP for the backend
• MySQL for the database

The Technology Stack

Here’s a breakdown of the technologies I used and what each one does:

Key Features of Shade Paradise

The website includes several features that you’d expect from a real e-commerce store:

User Features

Admin Features

Database Design

The database was one of the most challenging and educational parts of the project. Here’s a simplified version of the database schema:

“A well-designed database makes everything else in your application easier. Spend time getting it right!” - My professor

Challenges and Solutions

Building Shade Paradise wasn’t always smooth sailing. Here are some challenges I faced:

Challenge 1: Shopping Cart Persistence

Problem: When users refreshed the page, their shopping cart would empty.

Solution: I learned about PHP sessions and how to store cart data server-side, making it persist across page loads.

// Initialize the session
session_start();
// Add item to cart
if (!isset($_SESSION['cart'])) {
    $_SESSION['cart'] = array();
}
$_SESSION['cart'][$product_id] = $quantity;

Challenge 2: Responsive Design

Problem: The website looked good on desktop but broke on mobile devices.

Solution: I implemented a mobile-first approach using CSS media queries and flexible layouts.

/* Mobile first design */
.product-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
/* Tablet */
@media (min-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* Desktop */
@media (min-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

Challenge 3: Development Environment Consistency

Problem: The website worked on my computer but had issues when I showed it to my professor on his machine.

Solution: This is where Docker came in and changed everything (more on that below).

How Docker Saved Our Project

Before learning about Docker, we faced a common problem in development: “It works on my machine!” Docker solved this by creating consistent environments.

What is Docker?

Docker is a tool that packages your application and all its dependencies into a standardized unit called a container. Think of it like a shipping container for code.

How Docker Helped Us

Our Docker Setup

We created a docker-compose.yml file that defined our entire development environment:

version: '3'
services:
  # PHP and Apache server
  web:
    build: .
    ports:
      - "8080:80"
    volumes:
      - ./src:/var/www/html
    depends_on:
      - db
  # MySQL database
  db:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: rootpassword
      MYSQL_DATABASE: shade_paradise
      MYSQL_USER: user
      MYSQL_PASSWORD: password
    volumes:
      - db_data:/var/lib/mysql
  # phpMyAdmin for database management
  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    ports:
      - "8081:80"
    environment:
      PMA_HOST: db
    depends_on:
      - db
volumes:
  db_data:

With this setup, anyone could clone our repository and run docker-compose up to have an identical development environment in minutes!

Lessons Learned

Building Shade Paradise taught me many valuable lessons:

1. Plan your database carefully - A good database design makes everything else easier
2. User experience matters - Even small details like form validation improve the site
3. Version control is essential - Git saved us many times when we broke something
4. Responsive design from the start - It’s harder to add mobile support later
5. Docker is amazing for development - Consistent environments save time and frustration

Future Improvements

If I were to continue developing Shade Paradise, here’s what I’d add:

Conclusion

Building Shade Paradise was challenging but incredibly rewarding. I learned not just about individual technologies like PHP and MySQL, but how to integrate them into a complete application. Most importantly, I discovered the power of tools like Docker that solve real-world development problems.

“The best way to learn is by building something real. Theory only takes you so far.” - My own realization during this project

I’m excited to continue learning and building on these skills in my future career!