Dastrasi E-commerce — Web Design Final Project (Web 3)

A Persian RTL e-commerce homepage built as a learning project for Web Design 3 (JavaScript). The site focuses on dynamic UI behavior, data-driven navigation, and interactive sliders with Vanilla JavaScript.

Live demo: https://fatemeafd.github.io/JS-project/

About

This project is an online store homepage inspired by the Dastrasi e-commerce layout. It includes a hero banner, daily deals with countdown timer, category and product carousels, blog section, and a multi-level navigation menu rendered from JSON data.

Tech Stack

• HTML5 — semantic markup, RTL layout
• Tailwind CSS v4 — utility-first styling
• Vanilla JavaScript (ES modules) — menu rendering, sliders, timer
• Vite — dev server and production build
• Swiper — banner, category, product, and blog sliders
• JSON — menu and site data in db.json

Features

• Responsive header with search, cart, and login links
• Dynamic multi-level navigation menu loaded from db.json
• Hero banner slider with autoplay and pagination
• Daily deals section with countdown timer to midnight
• Featured categories carousel
• New arrivals and best-selling products sliders
• Popular brands row
• Blog posts carousel
• Footer with contact info, links, and back-to-top button

Project Structure

├── index.html              # Home page
├── db.json                 # Menu and site data
├── JS/
│   ├── main.js             # Swiper init, deal timer, back-to-top
│   ├── counter.js          # Counter utility
│   └── menu/
│       └── menu.js         # Dynamic menu from db.json
├── src/
│   ├── css/
│   │   ├── main.css        # Tailwind entry + component styles
│   │   └── style.css
│   └── images/             # Banners, products, icons
├── vite.config.js
└── package.json

Getting Started

Prerequisites

• Node.js (v18 or later recommended)
• npm

Install dependencies

npm install

Run locally

npm run dev

Open the URL shown in the terminal (usually http://localhost:5173).

Build for production

npm run build

The built site is output to the dist/ folder.

Preview the production build

npm run preview

GitHub Pages Deployment

This project uses Vite to compile Tailwind CSS before deployment. The raw main.css file cannot be used directly in the browser — it must be built first.

On every push to main, GitHub Actions will:

1. Install dependencies
2. Run npm run build
3. Deploy the dist/ folder to the gh-pages branch

Pages settings

In your GitHub repository, go to Settings → Pages and set:

• Source: Deploy from a branch
• Branch: gh-pages
• Folder: / (root)

If you rename the repository, update the base path in vite.config.js to match the new repo name (e.g. base: "/your-repo-name/").

Data

Navigation items are defined in db.json under the menu key. Each item supports nested children for dropdown and mega-menu layouts. Edit this file to update menu labels, links, or structure — the menu re-renders on page load via JS/menu/menu.js.

What I Learned

• Building interactive UI with vanilla JavaScript and ES modules
• Rendering dynamic HTML from JSON data
• Integrating Swiper.js with RTL support and responsive breakpoints
• Organizing a JavaScript project with Vite
• Combining Tailwind CSS with custom component classes
• Countdown timers and DOM event handling

Author

Fateme Ahmadifard — Web Design 3 final project