Shopify Dashboard Demo

A complete working demo project that connects to a Shopify store using Shopify Admin REST API credentials and displays real-time data including products, customers, orders, and abandoned checkouts.

Tech Stack

• Frontend: React + Tailwind CSS
• Backend: Node.js + Express
• API Calls: Axios
• Environment Config: dotenv

Project Structure

Shopify-Dashboard-Demo/
 ├── backend/
 │   ├── server.js
 │   ├── routes/
 │   │    └── shopifyRoutes.js
 │   ├── services/
 │   │    └── shopifyService.js
 │   ├── package.json
 │   └── .env (create this file)
 └── frontend/
     ├── src/
     │   ├── App.js
     │   ├── pages/
     │   │    └── Dashboard.js
     │   ├── components/
     │   │    └── DataCard.js
     │   ├── index.css
     │   └── index.js
     ├── tailwind.config.js
     └── package.json

Setup Instructions

1. Backend Setup

1. Navigate to the backend directory:

   cd backend

2. Create a .env file in the backend directory with the following content:

   SHOPIFY_STORE_URL=your-store.myshopify.com
   SHOPIFY_ACCESS_TOKEN=YOUR_SHOPIFY_ACCESS_TOKEN_HERE
   SHOPIFY_API_KEY=YOUR_SHOPIFY_API_KEY_HERE
   SHOPIFY_API_SECRET=YOUR_SHOPIFY_API_SECRET_HERE
   

3. Install dependencies (if not already installed):

   npm install

4. Start the backend server:

   npm start

   The backend server will run on http://localhost:5000

2. Frontend Setup

1. Navigate to the frontend directory:

   cd frontend

2. Install dependencies (if not already installed):

   npm install

3. Start the frontend development server:

   npm start

   The frontend will automatically open in your browser at http://localhost:3000

Running the Project

1. Start Backend (Terminal 1):

   cd backend
   npm start

2. Start Frontend (Terminal 2):

   cd frontend
   npm start

3. Visit http://localhost:3000 in your browser to see the dashboard

Features

• ✅ Real-time data fetching from Shopify Admin API
• ✅ Dashboard with statistics cards showing:
  • Total Products
  • Total Customers
  • Total Orders
  • Abandoned Carts
• ✅ Recent Orders table displaying order details
• ✅ Modern, responsive UI with Tailwind CSS
• ✅ Error handling for API failures

API Endpoints

The backend provides the following endpoints:

• GET /api/shopify/products - Fetch products
• GET /api/shopify/customers - Fetch customers
• GET /api/shopify/orders - Fetch orders
• GET /api/shopify/abandoned - Fetch abandoned checkouts

Notes

• Make sure the backend server is running before starting the frontend
• Data is fetched on page load
• The dashboard displays the first 10 items for each resource
• Ensure your .env file is in the backend directory (not tracked by git)

Troubleshooting

• If you see CORS errors, make sure the backend server is running on port 5000
• If API calls fail, verify your .env file has the correct Shopify credentials
• If the frontend doesn't connect, check that http://localhost:5000 is accessible