Shopify Product Sync - Laravel 12 + Vue.js

A simple and clean Laravel 12 application with Vue.js frontend for syncing products with Shopify using GraphQL API.

🚀 Features

• Laravel 12 with PHP 8.4 support
• Vue.js 3 frontend with modern UI
• Shopify GraphQL API integration (no REST API complexity)
• Simple product management - add, view, sync with Shopify
• Clean, modular code following Laravel best practices
• No complex event handling or job queues - just simple sync

🛠️ Tech Stack

Backend

• Laravel 12 - Latest Laravel framework
• PHP 8.4 - Latest PHP version
• SQLite - Simple database (can be changed to MySQL/PostgreSQL)
• Guzzle HTTP - For Shopify API calls

Frontend

• Vue.js 3 - Modern reactive framework
• Axios - HTTP client for API calls
• Vite - Fast build tool
• Modern CSS - Clean, responsive design

📋 Requirements

• PHP 8.4+
• Composer 2.0+
• Node.js 18+
• npm or yarn

🚀 Quick Start

1. Clone and Setup Backend

cd backend
composer install
cp .env.example .env
php artisan key:generate

2. Configure Environment

Edit .env file:

# Shopify Configuration
SHOPIFY_SHOP=your-shop-name
SHOPIFY_TOKEN=your-shopify-access-token

3. Setup Database

php artisan migrate
php artisan serve

4. Setup Frontend

cd frontend
npm install
npm run dev

5. Access Application

• Backend API: http://localhost:8000
• Frontend: http://localhost:5173

🔧 Shopify Setup

1. Create a Shopify App in your Shopify Partner account
2. Generate Access Token with product read/write permissions
3. Update .env with your shop name and access token
4. Test the integration by adding products

📁 Project Structure

├── backend/                 # Laravel 12 Backend
│   ├── app/
│   │   ├── Http/Controllers/
│   │   │   └── ProductController.php    # Simple CRUD controller
│   │   ├── Models/
│   │   │   └── Product.php              # Clean Product model
│   │   └── Services/
│   │       └── ShopifyService.php       # GraphQL Shopify integration
│   ├── database/migrations/
│   │   └── create_products_table.php    # Simple product schema
│   └── routes/api.php                   # Clean API routes
├── frontend/               # Vue.js 3 Frontend
│   ├── src/
│   │   ├── components/
│   │   │   └── ProductList.vue          # Main product management
│   │   └── App.vue                      # Clean app layout
│   └── package.json
└── README.md

🔌 API Endpoints

• GET /api/products - List all products (with Shopify sync)
• POST /api/products - Create new product
• GET /api/products/{id} - Get specific product
• PUT /api/products/{id} - Update product
• DELETE /api/products/{id} - Delete product

🎯 Key Features

Backend Simplicity

• No complex event handling - direct service calls
• No job queues - simple synchronous operations
• Clean GraphQL integration - modern Shopify API usage
• Simple error handling - straightforward responses

Frontend Simplicity

• Modern Vue 3 Composition API
• Real-time search and filtering
• Simple product form with Shopify sync option
• Clean, responsive design
• No complex state management - just Vue refs

🔄 How It Works

1. Add Product: Fill form and optionally sync with Shopify
2. Shopify Sync: Uses GraphQL API to create products in Shopify
3. View Products: See local products and sync status
4. Shopify Products: Display products from Shopify store

🧪 Testing

# Backend tests
cd backend
php artisan test

# Frontend tests (if configured)
cd frontend
npm run test

🚀 Deployment

Backend

• Set APP_ENV=production
• Configure production database
• Set APP_DEBUG=false
• Ensure Shopify credentials are set

Frontend

npm run build
# Deploy dist/ folder to your web server

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📝 License

This project is open-sourced software licensed under the MIT license.

🆘 Support

For issues and questions:

1. Check the documentation
2. Review the code structure
3. Create an issue with detailed information

---

Built with ❤️ using Laravel 12, PHP 8.4, and Vue.js 3