https://github.com/thomaskn/shopify-product-listing
https://github.com/thomaskn/shopify-product-listing
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/thomaskn/shopify-product-listing
- Owner: thomasKn
- Created: 2024-03-24T20:59:03.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-24T21:03:52.000Z (about 2 years ago)
- Last Synced: 2025-02-10T04:26:39.905Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://shopify-product-listing.vercel.app
- Size: 113 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Hydrogen + Vite playground
## Getting started
```shellscript
pnpm install
pnpm run dev
```
## Technologies
### Remix + Vite
This app has been built with Remix to be as close to an original Hydrogen app as possible. Vite is also used to speed up the build process.
### Hydrogen
Hydrogen is used for generating Shopify types but also to import components such as `` or ``.
### Radix UI + shadcn/ui
Radix UI is used along with shadcn/ui to implement the UI and make sure components are accessible across the app.
### Tailwind CSS
Tailwind CSS is used to style the app.
### Development Assumptions
This app is for demo purposes. It is not intended to be used in production.
For the sake of the demo, this app mocks an API call to dynamically fetch Shopify products.
Product filtering, pagination, sorting and search are implemented in the server side. In a real world scenario, these functionnalities would be managed with Shopify GraphQL queries.
States are stored in the url and persisted between page loads.
The Infinite Scrolling functionnality uses an artificial delay of 1 seconds to simulate a real world scenario.