uvacoder / pwa-storefront-ui-template

React/Next.js based boilerplate, focused on delivering a rich Search & Discovery e-com experience.

PWA Ecom Storefront - UI Template

Current status: Public Beta

This is a React/Next.js based template for an ecommerce application, focused on delivering a rich search and discovery experience. The design is based on the Algolia ecommerce UI design kit and the implementation focuses on performance and customization.

View Demo

Table of content

• Introduction
• Why
• Getting started
  • Installation
  • Environment variables
  • Structure
  • Record sample
• Used technologies
  • Front-end bricks
  • The best of the Algolia platform
• InstantSearch widgets
  • Packaged widgets
  • Core widgets
• Browser support
• Troubleshooting
• How to contribute
• License

Introduction

The UI template is fully responsive. Check out the latest version deployed on Netlify.

Mobile

Desktop

Expand

Why?

This UI template has two main objectives:

• Inspire you to create engaging search and discovery experiences.
• 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.

Wer'e building this UI template with the following guiding principles in mind:

• Seamless searching and browsing: navigate the catalog (and more) via a single product listing page for a unified search and browse experience.
• Mobile-first:: optimized for a cross-device device experience with mobile at the heart of it.
• 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.
• Easily customizable:: configure the UI template according to your needs. Create a custom theme, or add new pages to your site.
• Modular and extensible by design: builds on top of InstantSearch widgets and Autocomplete.js plugins, which can be customized and extended.
• UX best practices: based on the Algolia ecommerce UI design kit
• Open source: MIT License

Find more about the key characteristics of this PWA Storefront UI Template in the Used technologies section.

Getting started

You can use the UI template in two different ways:

• If you want to start a new implementation, see Installation.
• If you already have an implementation and want to integrate parts of this UI template, start looking at the project struture.

Installation

1. Fork the project
2. Clone the repository
3. Install the dependencies: npm install or yarn install
4. Configure the environment variables
5. Start the development server: npm run dev or yarn dev
6. Open the project in your browser

Environment variables

Rename the .env.sample file to .env.local. The following environment variables are already filled with data from the demo:

Expand

Name	Value
NEXT_PUBLIC_INSTANTSEARCH_APP_ID	Algolia Application ID
NEXT_PUBLIC_INSTANTSEARCH_SEARCH_API_KEY	Algolia Search API Key
NEXT_PUBLIC_INSTANTSEARCH_INDEX_NAME	Algolia index name
NEXT_PUBLIC_INSTANTSEARCH_QUERY_SUGGESTIONS_INDEX_NAME	Algolia Query Suggestions index name

Structure

• /components: Components (UI, Autocomplete, InstantSearch widgets).
• /config: Configuration files (for example, you can configure displayed refinement or search parameters).
• /hooks: Custom common hooks.
• /layouts: Application and page layouts.
• /lib: Library-related code.
• /pages: Pages (for example, home and product listing/detail pages).
• /public: Static assets.
• /styles: Themes (the default theme is using Tailwind CSS).
• /typings: TypeScript types.
• /utils: Various utility functions.

Record sample

Below is a sample record for a product in the index:

Expand

{
  "name": "Cirst Slim T-Shirt",
  "price": 35,
  "url": "women/t-shirts/d04445-2757-6370",
  "hierarchical_categories": {
    "lvl0": "women",
    "lvl1": "women > tops and jackets",
    "lvl2": "women > tops and jackets > t-shirts"
  },
  "priceFilter": "$0 - $50",
  "sizeFilter": [
    "XS",
    "S",
    "M",
    "L",
    "XL"
  ],
  "availabilityDetail": "Product is available",
  "fullStock": true,
  "description": "With an open neckline and slim silhouette, this soft t-shirt is the perfect option for easy, daily style. A bold graphic brings the chest to life. And thanks to soft, lightweight jersey, it feels great against the skin. Throw it on for day and night.",
  "sizeFilter": [
    "XS",
    "S",
    "M",
    "L",
    "XL"
  ],
  "hexColorCode": "Dark blue//#00008B",
  "reviewScore": 4,
  "reviewCount": 32
}

Used technologies

Front-end

• Autocomplete.js
• React InstantSearch
• Uses React hooks/functional components
• SEO optimized
• PWA compliant
• Server-Side Rendering with Next.js
• Theming with Tailwind CSS
• Lighthouse scores >90%
• Built with TypeScript

The best of the Algolia platform

• ✅ Search (fuzzy search, synonyms, ...) and Browse
• ✅ AI Re-Ranking
• ✅ AI Personalisation
• ✅ Sending Events / Insights API
• ✅ Advanced Analytics
• ✅ A/B Testing
• ✅ Merchandizing
• ✅ Rules (Banners)
• ✅ Query Suggestions
• ✅ Multiple sorts + Relevant sort
• 🔄 Recommend

InstantSearch widgets

The UI Template uses core and packaged React InstantSearch widgets.

Packaged widgets

These ready-to-use packaged widgets are distributed as separate NPM packages.

• ✅ ColorRefinementList
• ✅ SizeRefinementList
• ✅ LoadMoreWithProgressBar
• 🔄 ExpandablePanel
• 🔄 RefinementsDropdown
• 🔄 RatingSelector
• 🔄 NoResultsHandler
• 🔄 BreadcrumbWithQuery

✅ Published / 🔄 To be published

Core widgets

These core widgets are part of InstantSearch and are customized using connectors:

Expand

Basics

• InstantSearch
• Index
• Configure
• SearchBox (virtual)

Results

• Hits/InfiniteHits
• Highlight/Snippet

Refinements

• RefinementList
• DynamicWidgets
• HierarchicalMenu
• CurrentRefinements
• RangeInput
• RatingMenu
• ClearRefinements

Metadata

• Breadcrumb
• Stats
• StateResults

Sorting

• SortBy
• RelevantSort

Browser support

The UI template supports the last two versions of the major browsers: Chrome, Edge, Firefox, Safari.

Troubleshooting

Encountering an issue? Read the FAQ where you will find help for the most common issues and gotchas.

How to contribute

We welcome all contributors, from casual to regular 💙. See CONTRIBUTING for more information about the contribution process.

• Bug report. Is something not working as expected? Send a bug report.
• Feature request. Would you like to add something to the library? Send a feature request.
• Documentation. Did you find a typo in the doc? Open an issue.
• Development. If you don't know where to start, you can check the open issues that are tagged easy, the bugs or chores.

See Installation for instructions how to install the project.

License

The UI template is licensed under the MIT license.