Add GitHub Pages deployment workflow

Author: voidrlm

.github/workflows/deploy.yml

@@ -0,0 +1,53 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: './dist'
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

README.md

@@ -1,43 +1,154 @@
-# E-Commerce
-Creating a E-commerce web app using vue and vuetify
+# 🛍️ E-Commerce VueJS
 
-# Screenshot
-https://imgur.com/O4c5gAs
+A modern, responsive e-commerce web application built with Vue.js and Vuetify, featuring a beautiful UI, product browsing, shopping cart, and user authentication.
 
-## Live Demo
+![Vue.js](https://img.shields.io/badge/Vue.js-2.6.14-brightgreen)
+![Vuetify](https://img.shields.io/badge/Vuetify-2.6.0-blue)
+![License](https://img.shields.io/badge/License-MIT-yellow)
 
-Use a dummy e-mail and password to signup and continue
+## ✨ Features
 
-<p>
-    <a href="https://voidrlm.github.io/E-Commerce-VueJS/#/" target="_blank">Online Demo</a>
-</p>
+- 🎨 **Modern UI Design** - Clean, responsive interface with Vuetify Material Design components
+- 🔐 **Dummy Authentication** - Demo login system (username: `demo`, password: `demopass`)
+- 🛒 **Shopping Cart** - Add products, manage quantities, and view order summary
+- 🔍 **Advanced Filtering** - Filter products by brand, price, rating, movement, and gender
+- 📱 **Fully Responsive** - Works seamlessly on desktop, tablet, and mobile devices
+- 🌓 **Dark Mode Support** - Toggle between light and dark themes
+- 🎨 **Customizable Themes** - Multiple color schemes to choose from
+- ⚡ **Fast & Lightweight** - Optimized for performance
 
-## Requirements
+## 🚀 Live Demo
 
-NodeJS
+**[View Live Demo →](https://voidrlm.github.io/E-Commerce-VueJS/#/)**
 
-npm (Node Package Manager)
+**Demo Credentials:**
 
-## Installation
+- Username: `demo`
+- Password: `demopass`
 
-Clone the repository
+## 📸 Screenshots
 
-Navigate to the project directory
+View screenshots: [https://imgur.com/O4c5gAs](https://imgur.com/O4c5gAs)
 
-Install the dependencies
+## 🛠️ Built With
 
-``
-$ npm install
-``
+- **[Vue.js 2.6](https://vuejs.org/)** - Progressive JavaScript framework
+- **[Vuetify 2.6](https://vuetifyjs.com/)** - Material Design component framework
+- **[Vue Router](https://router.vuejs.org/)** - Official router for Vue.js
+- **[Vuex](https://vuex.vuejs.org/)** - State management library
+- **[Vue Cookies](https://www.npmjs.com/package/vue-cookies)** - Cookie plugin
 
-Start the development server
+## 📋 Prerequisites
 
-``
-$ npm run serve
-``
+Before you begin, ensure you have the following installed:
 
-Open a web browser and navigate to http://localhost:8080
+- **Node.js** (v12 or higher)
+- **npm** (Node Package Manager)
 
-## Built With
-VueJS - JavaScript framework for building user interfaces
-Vuetify - Material Design component framework for VueJS
+## 🔧 Installation
+
+1. **Clone the repository**
+
+   ```bash
+   git clone https://github.com/voidrlm/E-Commerce-VueJS.git
+   cd E-Commerce-VueJS
+   ```
+
+2. **Install dependencies**
+
+   ```bash
+   npm install
+   ```
+
+3. **Start the development server**
+
+   ```bash
+   npm run serve
+   ```
+
+4. **Open your browser**
+
+   Navigate to [http://localhost:8080](http://localhost:8080)
+
+## 📦 Building for Production
+
+Build the project for production:
+
+```bash
+npm run build
+```
+
+The production-ready files will be in the `dist` directory.
+
+## 🚢 Deployment to GitHub Pages
+
+Deploy your application to GitHub Pages using the provided PowerShell script:
+
+```powershell
+./deploy-gh-pages.ps1
+```
+
+This script will:
+
+1. Build the project
+2. Initialize a new git repository in the `dist` folder
+3. Push the build to the `gh-pages` branch
+4. Your site will be available at `https://<your-username>.github.io/<your-repo>/`
+
+## 📁 Project Structure
+
+```
+E-Commerce-VueJS/
+├── public/              # Static assets
+├── src/
+│   ├── assets/         # Images and static files
+│   ├── components/     # Reusable Vue components
+│   │   ├── navigation/
+│   │   ├── shoppingCart/
+│   │   └── userManagement/
+│   ├── plugins/        # Vuetify configuration
+│   ├── resources/      # Product database
+│   ├── router/         # Vue Router configuration
+│   ├── services/       # Utility services
+│   ├── store/          # Vuex store
+│   ├── views/          # Page components
+│   ├── App.vue         # Root component
+│   └── main.js         # Application entry point
+├── package.json
+├── vue.config.js
+└── README.md
+```
+
+## 🎨 Available Scripts
+
+- `npm run serve` - Start development server
+- `npm run build` - Build for production
+- `npm run lint` - Lint and fix files
+
+## 🤝 Contributing
+
+Contributions are welcome! Feel free to submit issues and pull requests.
+
+1. Fork the project
+2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+## 📝 License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 👤 Author
+
+**voidrlm**
+
+- GitHub: [@voidrlm](https://github.com/voidrlm)
+
+## ⭐ Show your support
+
+Give a ⭐️ if you like this project!
+
+---
+
+Made with ❤️ using Vue.js and Vuetify

deploy-gh-pages.ps1

@@ -0,0 +1,30 @@
+# PowerShell script to deploy VueJS app to GitHub Pages
+# Usage: ./deploy-gh-pages.ps1
+
+Write-Host "Building the project..." -ForegroundColor Cyan
+npm run build
+
+if ($LASTEXITCODE -ne 0) {
+    Write-Host "Build failed! Exiting..." -ForegroundColor Red
+    exit 1
+}
+
+Write-Host "Build successful!" -ForegroundColor Green
+
+# Navigate to the build output directory
+Set-Location dist
+
+# Initialize a new git repository in the dist folder
+git init
+git add -A
+git commit -m "Deploy to GitHub Pages"
+
+# Force push to the gh-pages branch
+Write-Host "Deploying to GitHub Pages..." -ForegroundColor Cyan
+git push -f git@github.com:voidrlm/E-Commerce-VueJS.git main:gh-pages
+
+# Go back to the project root
+Set-Location ..
+
+Write-Host "Deployment complete! Your site should be available at:" -ForegroundColor Green
+Write-Host "https://voidrlm.github.io/E-Commerce-VueJS/" -ForegroundColor Yellow

package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "deploy": "npm run build && gh-pages -d dist"
   },
   "dependencies": {
     "core-js": "^3.8.3",