Gift Shop

A fully functional e-commerce platform for browsing and purchasing gifts online.

June 2025• Team: Personal Project• Role: Frontend Developer

About this Project

Gift Shop is a modern e-commerce web application built with vanilla HTML, CSS, and JavaScript. It provides a complete shopping experience including product browsing, detailed product views, shopping cart management, user authentication, order tracking, and checkout functionality. The platform demonstrates responsive design, smooth user interactions, and clean frontend architecture — perfect for building scalable web storefronts.

Tech Stack

HTML5

CSS3

JavaScript (ES6+)

Responsive Design

Tools Used

VS Code

GitHub Pages

Git

Chrome DevTools

Key Features

Complete Shopping Experience

▸Product Catalog: Browse through curated gift collections with detailed product information and high-quality images.
▸Product Details: Comprehensive product pages with descriptions, pricing, and customer reviews.
▸Shopping Cart: Add/remove items, update quantities, and see real-time cart totals.
▸Search & Filter: Find products easily with filtering by category, price, and ratings.

User Features & Account Management

▸User Authentication: Secure login and signup system for customer accounts.
▸Order History: Track all past orders with detailed information and status updates.
▸Order Details: View full order summaries, tracking, and receipt information.
▸Profile Management: Update personal information and preferences.

Checkout & Payments

▸Smooth Checkout Flow: Multi-step checkout with address and payment information collection.
▸Order Confirmation: Thank you page with order summary and confirmation details.
▸Error Handling: 404 page and comprehensive error handling throughout the app.
▸Form Validation: Client-side validation for all user inputs and forms.

Design & Performance

▸Responsive Design: Perfectly optimized for desktop, tablet, and mobile devices.
▸Modern UI/UX: Clean interface with smooth transitions and interactive elements.
▸Fast Loading: Lightweight assets and optimized images for quick page loads.
▸Accessible: Semantic HTML and ARIA labels for better accessibility.

Highlights

Complete E-commerce Flow

Responsive Design

10+ Pages

Order Management

Installation

Clone the Repository

git clone https://github.com/Itsayu/GIFT-SHOP.git
cd GIFT-SHOP

View Live (GitHub Pages)

Open in browser: https://itsayu.github.io/GIFT-SHOP/

Run Locally

python -m http.server 8000
# or
npx http-server

# Visit: http://localhost:8000

Project Structure

GIFT-SHOP/
├── index.html          # Home page
├── login.html          # User login
├── checkout.html       # Checkout process
├── shoppingCart.html   # Cart management
├── productDetails.html # Product view
├── collection.html     # Product listing
├── myOrder.html        # Order history
├── assets/             # Images & resources
└── error404.html       # Error page

Challenges & Solutions

Challenge

Managing complex state without a framework (cart, user data, orders)

Solution

Implemented a robust state management system using localStorage and vanilla JavaScript, with event-driven updates across pages.

Challenge

Ensuring responsive design across all screen sizes and devices

Solution

Built mobile-first CSS with flexbox and CSS Grid, media queries for tablet and desktop optimization, and touch-friendly interactions.

Challenge

Handling form validation and checkout flow consistency

Solution

Created reusable validation functions, form state management, and error display patterns for seamless user experience.

Challenge

Maintaining code organization without modules in vanilla JavaScript

Solution

Organized code into logical sections with clear comments, consistent naming conventions, and separation of concerns across multiple pages.

Creative Portfolio Website

D4 Community