Deshark

Premium men's clothing storefront. Static HTML/CSS/JS front-end, no backend, no build step. Data lives in browser localStorage.

Table of Contents

• Features
• Tech Stack
• Project Structure
• Getting Started
• Data Layer
• Pages
• Known Limitations
• License

Features

• Product catalog with categories, ratings, review counts
• Product detail pages
• Cart + checkout flow ending in order confirmation
• User auth (login/register), profile page
• Wishlist
• Admin panel: dashboard, product management, order management
• Responsive nav w/ mobile menu toggle
• Toast notifications for user actions

Tech Stack

• HTML5, CSS3 (custom, no framework)
• Vanilla JavaScript (no bundler, no framework)
• Font Awesome icons, Google Fonts (Inter)
• localStorage as mock database

Project Structure

.
├── index.html              landing / welcome page
├── pages/
│   ├── shop.html            product listing + filters
│   ├── product.html         product detail
│   ├── cart.html
│   ├── checkout.html
│   ├── confirmation.html
│   ├── login.html
│   ├── register.html
│   ├── profile.html
│   └── wishlist.html
├── admin/
│   ├── dashboard.html
│   ├── products.html
│   └── orders.html
├── css/
│   └── style.css
└── js/
    ├── app.js               init, nav, toasts, cart count
    ├── data.js              mock DB + localStorage seed/helpers
    ├── auth.js               login/register
    ├── cart.js                cart operations
    ├── checkout.js             checkout flow
    ├── product.js               product page logic
    ├── profile.js                profile logic
    ├── shop.js                    shop/filter logic
    ├── wishlist.js                 wishlist ops
    └── admin.js                    admin panel logic

Getting Started

No dependencies, no install step.

Option 1 — open directly Open index.html in a browser.

Option 2 — local static server (recommended, avoids CORS quirks)

npx serve .

then visit the printed localhost URL.

Data Layer

js/data.js seeds these localStorage keys on first page load if absent:

Key	Holds
products	product catalog (seeded from DEFAULT_PRODUCTS)
cart	current cart items
orders	placed orders
users	registered users
currentUser	logged-in session user
cartCount	cart badge count

All reads/writes go through the DB helper object exported from data.js.

Pages

Page	Purpose
index.html	landing hero
pages/shop.html	browse/filter products
pages/product.html	single product view
pages/cart.html	review cart
pages/checkout.html	place order
pages/confirmation.html	order confirmation
pages/login.html / register.html	auth
pages/profile.html	user account
pages/wishlist.html	saved items
admin/dashboard.html	admin overview
admin/products.html	manage products
admin/orders.html	manage orders

Known Limitations

• No real backend — all data client-side, wiped on localStorage clear
• Auth is not secure (plaintext, client-side only) — demo purposes only
• Product images hotlinked from Unsplash, no local assets
• No package.json, no tests, no CI

👨‍💻 Author

Walid Rahman

• GitHub: https://github.com/10bitsofwalid

• Portfolio: https://walid-rahman-portfolio.vercel.app

• LinkedIn: https://www.linkedin.com/in/mohammad-walid-rahman

License

Add license here (none specified in repo currently).