🛍️ SmartShop - WhatsApp Store

Modern e-commerce platform with WhatsApp order integration

📖 About The Project

SmartShop is a modern e-commerce platform built with Vue.js, designed to provide users with a fast, responsive, and intuitive shopping experience similar to Amazon and Noon.

🎯 What Makes It Unique?

The unique feature of this website is that orders are processed directly through WhatsApp, allowing customers to send product details and purchase requests instantly without registration or payment gateways.

When a user clicks on the "Order via WhatsApp" button, the site automatically opens WhatsApp with a pre-filled message that includes:

✅ Product name
✅ Price and discount information
✅ Product rating and reviews
✅ Direct product link
✅ Professional order request message

✨ Features

🛒 E-Commerce Features

🏪 Product Catalog - Browse through a wide range of products
🔍 Smart Search - Quick product search with real-time filtering
🏷️ Category Filters - Filter products by category
⭐ Product Ratings & Reviews - See what others think
💰 Dynamic Pricing - Show original price, discounts, and savings
❤️ Favorites System - Save products you love
📱 Fully Responsive - Works perfectly on all devices

💬 WhatsApp Integration

📲 One-Click Ordering - Order products instantly via WhatsApp
📝 Auto-Formatted Messages - Professional pre-filled order messages
🔗 Product Links - Share product details easily
🌐 Universal Compatibility - Works on all devices with WhatsApp

🎨 User Experience

⚡ Lightning Fast - Built with Vite for optimal performance
🎯 Intuitive Navigation - Easy-to-use interface
🌈 Modern Design - Clean and professional UI
📊 Product Details Page - Comprehensive product information
🔄 Smooth Transitions - Animated page transitions
💾 Persistent Favorites - LocalStorage-based favorites

🚀 Technology Stack

Technology	Purpose
Vue.js 3	Frontend framework with Composition API
Vue Router	Client-side routing and navigation
Vite	Build tool and development server
CSS3	Modern styling with custom properties
LocalStorage API	Client-side data persistence
WhatsApp Business API	Direct order integration

📁 Project Structure

smartshop-whatsapp-store/
├── public/
│   └── shopping-cart.svg          # App favicon
├── src/
│   ├── components/
│   │   ├── ProductCard.vue        # Individual product card
│   │   ├── ProductList.vue        # Products grid with filters
│   │   ├── SearchBar.vue          # Search functionality
│   │   ├── CategoryFilter.vue     # Category filtering
│   │   ├── Header.vue             # App header/navigation
│   │   └── Footer.vue             # App footer
│   ├── views/
│   │   ├── Home.vue               # Homepage with product list
│   │   ├── ProductDetails.vue     # Product detail page
│   │   └── Favorites.vue          # User's favorite products
│   ├── services/
│   │   └── whatsapp.js            # WhatsApp integration logic
│   ├── data/
│   │   └── products.json          # Product database
│   ├── App.vue                    # Root component
│   ├── main.js                    # App entry point
│   └── style.css                  # Global styles
├── index.html                     # HTML template
├── vite.config.js                 # Vite configuration
├── package.json                   # Dependencies
├── .gitignore                     # Git ignore rules
├── netlify.toml                   # Netlify deployment config
└── README.md                      # This file

🛠️ Installation & Setup

Prerequisites

Node.js (v16 or higher)
npm or yarn package manager
Git (for cloning)

Step 1: Clone the Repository

git clone https://github.com/yourusername/smartshop-whatsapp-store.git
cd smartshop-whatsapp-store

Step 2: Install Dependencies

npm install
# or
yarn install

Step 3: Configure WhatsApp Number

Open src/services/whatsapp.js and replace the phone number:

const WHATSAPP_NUMBER = '+201012345678' // Replace with your WhatsApp Business number

Format: +[country_code][phone_number] (no spaces or special characters)

Step 4: Run Development Server

npm run dev
# or
yarn dev

Visit http://localhost:5173 in your browser.

Step 5: Build for Production

npm run build
# or
yarn build

The production-ready files will be in the dist/ folder.

🌐 Deployment

Deploy to GitHub Pages

Update vite.config.js with your repository name:

export default defineConfig({
  base: '/your-repo-name/', // Replace with your repository name
})

Build the project:
```
npm run build
```

Deploy to GitHub Pages:

# Install gh-pages
npm install -g gh-pages

# Deploy
gh-pages -d dist

Enable GitHub Pages in your repository settings:
- Go to Settings → Pages
- Select gh-pages branch
- Save

Deploy to Netlify

Option 1: Drag & Drop

Run npm run build
Go to Netlify Drop
Drag the dist folder

Option 2: Git Integration

Push your code to GitHub
Go to Netlify
Click "New site from Git"
Select your repository
Build settings:
- Build command: npm run build
- Publish directory: dist
Click "Deploy site"

The netlify.toml file is already configured for optimal deployment.

📝 Customization Guide

Adding New Products

Edit src/data/products.json:

{
  "id": 21,
  "name": "Your Product Name",
  "category": "Electronics",
  "price": 99.99,
  "originalPrice": 149.99,
  "discount": 33,
  "rating": 5,
  "reviews": 100,
  "image": "https://your-image-url.com/product.jpg",
  "description": "Your product description here"
}

Changing Colors

Edit CSS variables in src/style.css:

:root {
  --primary-color: #ff9900;      /* Brand color */
  --secondary-color: #232f3e;    /* Dark background */
  --success-color: #25d366;      /* WhatsApp green */
}

Updating Contact Information

Edit src/components/Footer.vue:

const phoneNumber = '+201012345678' // Your WhatsApp number

🎓 How It Works

WhatsApp Integration Flow

User browses products on the website
User clicks "Order via WhatsApp" on any product
System generates formatted message with product details
WhatsApp opens automatically with pre-filled message
User sends message to seller/business
Order processed via WhatsApp conversation

Message Format Example

🛍️ *New Order Request*

📦 *Product:* Wireless Bluetooth Headphones
💰 *Price:* $79.99
📁 *Category:* Electronics

~~$129.99~~ 🔥 *38% OFF*

⭐ *Rating:* ⭐⭐⭐⭐⭐ (1243 reviews)

🔗 *Product Link:* https://yoursite.com/#/product/1

✅ I would like to order this product!

🤝 Contributing

Contributions are what make the open-source community amazing! Any contributions you make are greatly appreciated.

Fork the Project
Create your Feature Branch (git checkout -b feature/AmazingFeature)
Commit your Changes (git commit -m 'Add some AmazingFeature')
Push to the Branch (git push origin feature/AmazingFeature)
Open a Pull Request

📄 License

Distributed under the MIT License. See LICENSE file for more information.

👨‍💻 Author

Your Name

GitHub: @yourusername
Email: your.email@example.com

🙏 Acknowledgments

Vue.js Documentation
Vite Documentation
WhatsApp Business API
Unsplash for product images
Icons: Emoji Unicode characters

📞 Support

If you have any questions or need help, feel free to:

📧 Email: your.email@example.com
💬 WhatsApp: +201012345678
🐛 Open an issue

🌟 Show Your Support

Give a ⭐️ if this project helped you!

Built with ❤️ using Vue.js

Name		Name	Last commit message	Last commit date
Latest commit History 4 Commits
public		public
src		src
.gitignore		.gitignore
COMPLETE-GUIDE.md		COMPLETE-GUIDE.md
DEPLOYMENT-GUIDE.md		DEPLOYMENT-GUIDE.md
DEPLOYMENT.md		DEPLOYMENT.md
GITHUB-PAGES-SETUP.md		GITHUB-PAGES-SETUP.md
LICENSE		LICENSE
PROJECT-INFO.md		PROJECT-INFO.md
QUICK-START-AR.md		QUICK-START-AR.md
README-AR.md		README-AR.md
README.md		README.md
SETUP.md		SETUP.md
deploy-gh-pages.ps1		deploy-gh-pages.ps1
deploy-gh-pages.sh		deploy-gh-pages.sh
deploy.ps1		deploy.ps1
deploy.sh		deploy.sh
index.html		index.html
netlify.toml		netlify.toml
package-lock.json		package-lock.json
package.json		package.json
vite.config.js		vite.config.js

License

Mr-Coder-2707/first-project-vue

Folders and files

Latest commit

History

Repository files navigation