Shopify Import

Objective:

Develop a Laravel application with a frontend dashboard for importing a Shopify store's data into Laravel. The app must integrate Shopify's API, process large datasets efficiently, and provide a seamless UI for monitoring and managing the import process.

Key Features:

1. Shopify API Integration

• Authenticate with the Shopify Admin API using OAuth.

• Import the following Shopify store data:
  • Products
  • Collections
  • Orders
  • Customers

• Handle large datasets using Shopify's cursor-based pagination.

• Manage API rate limits and implement retries for failed requests.

2. Frontend Dashboard

Build a responsive dashboard using Laravel with UI (You can use either Inertia, Livewire, or Pure blade components with Jquery):

• OAuth Authentication:
  • Allow users to connect their Shopify store via Shopify's OAuth flow.

• Import Dashboard:
  • A visual display of the import process, including:
    • Percentage of completion.
    • Logs of imported, skipped, and errored records.

• Data Management:
  • Display imported data (products, orders, customers) in searchable and paginated tables.
  • Filters for price range, order status, and customer details.

3. Conflict Resolution

• Detect conflicts during the import process, such as:
  • Duplicate customers.
  • Mismatched product SKUs.

• Provide a UI for users to:
  • View conflicts.
  • Resolve conflicts by merging, skipping, or overwriting records.

4. Custom Field Mapping

• Allow users to map Shopify fields to custom database fields through the dashboard (e.g., map Shopify title to Product Name).

5. Progress Tracking

• Show real-time progress of the import process using Laravel Echo with WebSockets or a polling mechanism.

6. Data Storage

Design a normalized schema for imported data:

• Products

• Collections

• Orders

• Customers

• Maintain relationships (e.g., products belong to collections, orders belong to customers).

7. Error Handling & Logs

• Log API errors, validation issues, and database errors.

• Display these logs in the frontend for debugging.

Requirements:

Database Schema

Design a relational schema to store Shopify data:

sql
Copy code
products
- id
- shopify_id
- title
- description
- price
- inventory
- collection_id

collections
- id
- shopify_id
- name
- description

orders
- id
- shopify_id
- customer_id
- total_price
- status

customers
- id
- shopify_id
- name
- email
- phone

Frontend Dashboard Pages

1. Connect Shopify Store:
   • Step-by-step OAuth integration with a button to connect the store.
   • Store the access_token securely in the database.

2. Import Status Page:
   • Progress bar showing import completion percentage.
   • Real-time logs of import events (e.g., "Imported product ID 123").

3. Conflict Resolution Page:
   • Table displaying conflicts with options to resolve.

4. Data Management:
   • Paginated tables for viewing products, orders, and customers with search and filter functionality.

Endpoints:

Backend API Endpoints

1. POST /api/shopify/connect: Handle OAuth and store the access token.

2. POST /api/shopify/import: Start the import process for a Shopify store.

3. GET /api/shopify/progress: Fetch real-time progress of the import process.

4. GET /api/shopify/logs: Fetch logs for the current import session.

5. POST /api/shopify/conflicts/resolve: Handle conflict resolutions.

Features to Implement in the Frontend:

• Frontend Components:
  • Progress Tracker: Dynamic progress bar component.
  • Paginated Tables: Component for displaying and filtering imported data.
  • Conflict Resolver: A modal or inline UI for resolving conflicts interactively.

• API Integration:
  • Use Axios to communicate with the Laravel API.

• Responsive Design:
  • Ensure the dashboard is mobile-friendly.

Bonus Challenges:

1. Webhooks:
   • Set up Shopify webhooks to sync data in real-time after the import.

2. Export Data:
   • Allow users to export imported data to CSV from the dashboard.

3. Multi-Tenancy:
   • Support multiple Shopify stores per Laravel instance.

Evaluation Criteria:

1. Code Quality:
   • Use PSR standards, SOLID principles, and clean architecture.

2. UI/UX:
   • User-friendly and responsive frontend.

3. Performance:
   • Handle large datasets efficiently using queues and chunked processing.

4. Testing:
   • Write PHPUnit tests for backend logic and tests for frontend components.