{"id":13632458,"url":"https://github.com/algolia/pwa-ecom-ui-template","last_synced_at":"2025-06-19T15:41:40.626Z","repository":{"id":37732132,"uuid":"384065508","full_name":"algolia/pwa-ecom-ui-template","owner":"algolia","description":"React/Next.js based starter kit, focused on delivering a rich Search \u0026 Discovery e-commerce experience.","archived":false,"fork":false,"pushed_at":"2023-12-04T15:01:53.000Z","size":9542,"stargazers_count":185,"open_issues_count":9,"forks_count":276,"subscribers_count":52,"default_branch":"develop","last_synced_at":"2025-06-14T23:54:26.987Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://algolia-pwa-ecom-ui-template.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/algolia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2021-07-08T09:07:02.000Z","updated_at":"2025-05-26T06:00:35.000Z","dependencies_parsed_at":"2023-12-04T16:37:41.933Z","dependency_job_id":null,"html_url":"https://github.com/algolia/pwa-ecom-ui-template","commit_stats":null,"previous_names":[],"tags_count":34,"template":true,"template_full_name":null,"purl":"pkg:github/algolia/pwa-ecom-ui-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/algolia%2Fpwa-ecom-ui-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/algolia%2Fpwa-ecom-ui-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/algolia%2Fpwa-ecom-ui-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/algolia%2Fpwa-ecom-ui-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/algolia","download_url":"https://codeload.github.com/algolia/pwa-ecom-ui-template/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/algolia%2Fpwa-ecom-ui-template/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260781318,"owners_count":23062210,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T22:03:03.722Z","updated_at":"2025-06-19T15:41:35.612Z","avatar_url":"https://github.com/algolia.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# PWA Ecom UI Template\n\nThis is a React 18/Next.js based template for an ecommerce application, focused on delivering a rich search and discovery experience.\nThe design is based on the [Algolia ecommerce UI design kit](https://www.algolia.com/doc/guides/solutions/ecommerce/ui-kits/) and the implementation focuses on performance and customization.\n\n[View Preview](https://algolia-pwa-ecom-ui-template.netlify.app/)\n\n\u003cdetails\u003e\n  \u003csummary\u003eTable of content\u003c/summary\u003e\n\n  - [Introduction](#introduction)\n  - [Why](#why)\n  - [Getting started](#getting-started)\n  - [Used technologies](#used-technologies)\n    - [Front-end](#front-end)\n    - [The best of the Algolia platform](#the-best-of-the-algolia-platform)\n  - [InstantSearch widgets](#instantsearch-widgets)\n    - [Custom widgets](#custom-widgets)\n    - [Core widgets](#core-widgets)\n  - [Browser support](#browser-support)\n  - [Troubleshooting](#troubleshooting)\n  - [How to contribute](#how-to-contribute)\n  - [License](#license)\n\u003c/details\u003e\n\n## Introduction\n\nThe PWA Ecom UI Template is fully responsive.\nCheck out the [latest version](https://algolia-pwa-ecom-ui-template.netlify.app/) deployed on Netlify.\n\n### Mobile\n\n[![UI Template mobile preview](https://i.ibb.co/THpSJcB/pwa-ecom-ui-template-mobile-preview.gif)](https://algolia-pwa-ecom-ui-template.netlify.app/)\n\n### Desktop\n\n\u003cdetails\u003e\n  \u003csummary\u003eExpand\u003c/summary\u003e\n\n  [![UI Template desktop preview](https://i.ibb.co/v45SfGQ/pwa-ecom-ui-template-desktop-preview.gif)](https://algolia-pwa-ecom-ui-template.netlify.app/)\n\u003c/details\u003e\n\n## Why?\n\nThis UI template has two main objectives:\n\n- **Inspire you** to create engaging search and discovery experiences.\n- **Accelerate your development** by providing you with an end-to-end implementation with all building blocks you need. You can re-use 90% or 10% of it and customize the rest - it's your choice.\n\nWer'e building this UI template with the following guiding principles in mind:\n\n- **Seamless searching and browsing:** navigate the catalog (and more) via a single product listing page for a unified search and browse experience.\n- **Mobile-first:**: optimized for a cross-device device experience with mobile at the heart of it. \n- **Designed with \"real-life\" constraints in mind:** don't compromise on performance, SEO, or accessibility. As a start, this template reaches more than 90% on all Lighthouse scores.\n- **Easily customizable:** configure the UI template according to your needs. Create a custom theme, or add new pages to your site.\n- **Modular and extensible by design:** builds on top of [InstantSearch widgets](#instantsearch-widgets) and [Autocomplete.js plugins](https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/plugins/), which can be customized and extended.\n- **UX best practices:** based on the [Algolia ecommerce UI design kit](https://www.algolia.com/doc/guides/solutions/ecommerce/ui-kits/)\n- **Open source:** MIT License\n\nFind more about the key characteristics of this PWA Ecom UI Template in the [Used technologies](#used-technologies) section.\n\n## Getting started\n\nYou can find the [Getting started](https://www.algolia.com/doc/deprecated/instantsearch/react/v6/guides/ecommerce-ui-template/in-depth/getting-started/) page in the docs.\n\n## Used technologies\n\n### Front-end\n\n- [**Autocomplete.js**](https://www.algolia.com/doc/ui-libraries/autocomplete/introduction/what-is-autocomplete/)\n- [**React InstantSearch**](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/react/)\n- Uses **React hooks/functional components**\n- **SEO** optimized\n- [**PWA**](https://web.dev/progressive-web-apps/) compliant\n- Server-Side Rendering with [**Next.js**](https://nextjs.org/)\n- Theming with [**Tailwind CSS**](https://tailwindcss.com/)\n- [**Lighthouse**](https://developers.google.com/web/tools/lighthouse) scores \u003e90%\n- Built with [**TypeScript**](https://www.typescriptlang.org/)\n\n### The best of the Algolia platform\n\n- ✅ Search (fuzzy search, synonyms, ...) and Browse \n- ✅ AI Re-Ranking\n- ✅ AI Personalisation\n- ✅ Sending Events / Insights API\n- ✅ Advanced Analytics\n- ✅ A/B Testing\n- ✅ Merchandizing\n- ✅ Rules (Banners)\n- ✅ Query Suggestions\n- ✅ Multiple sorts + Relevant sort\n- 🔄 Recommend\n\n## InstantSearch widgets\n\nThe UI Template uses **core** and **packaged** **React InstantSearch widgets**.\n\n### Custom widgets\n\nThese ready-to-use _custom_ widgets are distributed as separate NPM packages (only those with with the 📦 icon for now) or present in this repository.\n\n- 📦 [ColorRefinementList](https://github.com/algolia/react-instantsearch-widget-color-refinement-list)\n- 📦 [SizeRefinementList](https://github.com/algolia/react-instantsearch-widget-size-refinement-list)\n- 📦 [LoadMoreWithProgressBar](https://github.com/algolia/react-instantsearch-widget-loadmore-with-progressbar)\n- [ExpandablePanel](./components/%40instantsearch/widgets/expandable-panel/expandable-panel.tsx)\n- [RefinementsDropdown](./components/%40instantsearch/widgets/refinements-dropdown/refinements-dropdown.tsx)\n- [RatingSelector](./components/%40instantsearch/widgets/rating-selector/rating-selector.tsx)\n- [NoResultsHandler](./components/%40instantsearch/widgets/no-results-handler/no-results-handler.tsx)\n- [BreadcrumbWithQuery](./components/%40instantsearch/widgets/breadcrumb/breadcrumb.tsx)\n\n### Core widgets\n\nThese _core_ widgets are part of InstantSearch and are [customized](https://www.algolia.com/doc/guides/building-search-ui/widgets/customize-an-existing-widget/react/) using connectors:\n\n\u003cdetails\u003e\n  \u003csummary\u003eExpand\u003c/summary\u003e\n  \n  #### Basics\n  - InstantSearch\n  - Index\n  - Configure\n  - SearchBox (virtual)\n\n  #### Results\n  - Hits/InfiniteHits\n  - Highlight/Snippet\n\n  #### Refinements\n  - RefinementList\n  - DynamicWidgets\n  - HierarchicalMenu\n  - CurrentRefinements\n  - RangeInput\n  - RatingMenu\n  - ClearRefinements\n\n  #### Metadata\n  - Breadcrumb\n  - Stats\n  - StateResults\n\n  #### Sorting\n  - SortBy\n  - RelevantSort\n\u003c/details\u003e\n\n## Browser support\n\nThe UI template supports the **last two versions of the major browsers:** Chrome, Edge, Firefox, Safari.\n\n## Troubleshooting\n\nEncountering an issue? Read the [FAQ](https://www.algolia.com/doc/guides/building-search-ui/troubleshooting/faq/react/) where you will find help for the most common issues and gotchas.\n\n## How to contribute\n\nWe welcome all contributors, from casual to regular 💙. See [CONTRIBUTING](CONTRIBUTING.md) for more information about the contribution process. \n\n- **Bug report**. Is something not working as expected? [Send a bug report](https://github.com/algolia/pwa-ecom-ui-template/issues/new?template=Bug_report.md).\n- **Feature request**. Would you like to add something to the library? [Send a feature request](https://github.com/algolia/pwa-ecom-ui-template/issues/new?template=Feature_request.md).\n- **Documentation**. Did you find a typo in the doc? [Open an issue](https://github.com/algolia/pwa-ecom-ui-template/issues/new).\n- **Development**. If you don't know where to start, you can check the open issues that are [tagged easy](https://github.com/algolia/pwa-ecom-ui-template/issues?q=is%3Aopen+is%3Aissue+label%3A%22Difficulty%3A++++++%E2%9D%84%EF%B8%8F+easy%22), the [bugs](https://github.com/algolia/pwa-ecom-ui-template/issues?q=is%3Aissue+is%3Aopen+label%3A%22%E2%9D%A4+Bug%22) or [chores](https://github.com/algolia/pwa-ecom-ui-template/issues?q=is%3Aissue+is%3Aopen+label%3A%22%E2%9C%A8+Chore%22).\n\nSee [Installation](#installation) for instructions how to install the project.\n\n## License\n\nThe UI template is licensed under the [MIT license](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falgolia%2Fpwa-ecom-ui-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falgolia%2Fpwa-ecom-ui-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falgolia%2Fpwa-ecom-ui-template/lists"}