https://github.com/jackblatch/shopify-ecommerce-product-comparer

Simply enter a search term and add up to 4 Shopify stores to search. Products from all searched stores are displayed and can be easily compared across stores and filtered accordingly.
https://github.com/jackblatch/shopify-ecommerce-product-comparer

t3-stack

Last synced: about 2 months ago
JSON representation

Simply enter a search term and add up to 4 Shopify stores to search. Products from all searched stores are displayed and can be easily compared across stores and filtered accordingly.

• Host: GitHub
• URL: https://github.com/jackblatch/shopify-ecommerce-product-comparer
• Owner: jackblatch
• Created: 2023-03-11T19:08:02.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-04-14T14:05:15.000Z (over 1 year ago)
• Last Synced: 2024-10-23T16:06:32.646Z (2 months ago)
• Topics: t3-stack
• Language: TypeScript
• Homepage:
• Size: 394 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Ecommerce Product Comparer

Ecommerce product comparision website allowing users to compare products from different stores.

![Home Page Screenshot](/public/home-page-screenshot.png?raw=0)

## Features

- Multi-step form allowing the user to enter a product name as their search query and then enter up to 4 stores to search.

- The sites entered are then scraped for products matching the search term, displaying a list of products to the user.

- Users are then able to click on products to view them on the original store's website as well as filter which store's products to display on the page.

## Technologies used

- Next.js

- tRPC

- TailwindCSS

- Puppeteer (web scraping)

## Data Fetching

When users enter a search term and select stores to search, the app will fetch product data from the stores entered. This is done by scraping the store's search page for products matching the search term, only selecting elements that contain either `product`, `?_pos=` or `?variant=` (common segments/query params for Shopify stores) in the `href` attribute to ensure only products part of the search are returned (without this, the scraper could return products that are featured on the store in global elements that aren't directly related to the search term).

To reduce the additional overhead caused by subsequently scraping data from each product's individual product detail page, the app makes use of Shopify's product json data to quickly obtain the relevant product data by appending `.json` to the end of product page links.

Due to how the process of fetching product data works, the app has been developed with certain assumptions. While this caters towards a wide variety of ecommerce stores, this causes the following limitations on the stores that can be searched:

1. The store must be a Shopify store.

2. The store must be accessible to the public (e.g. not password protected).

3. The store's search page must be accessible at /search.

4. The store's search results page must list products with links containing either `product`, `?_pos=` or `?variant=`.

## Running the App

1. Install packages through npm `npm install`

2. Run the app in development mode `npm run dev`