Voucherify POS is a "point of sales" store that is integrated with the Voucherify platform, enabling the management of loyalty campaigns by purchasing products or scanning loyalty cards.
The store enables simplified user registration, which involves creating a customer by telephone number. This action allows you to collect loyalty points on a specific user's card, which can then be used in the Voucherify app after full registration. A user who has completed full registration is recognized by the registered_customer metadata, which is included in the customer metadata.
We can select one of two available loyalty campaigns. After selecting a specific campaign, it will be enabled and disabling the other campaign.
The application presents a list of loyalty cards of all users, which allows you to scan and add points to a specific loyalty card.
The store allows you to choose one of several available locations. Currently, locations are hardcoded in the application.
Products are downloaded directly from your Voucherify account, which means the product list is dynamic and includes different categories. It is also possible to add new products, which will automatically be synchronized with your Voucherify account. Products are based on the "category" metadata, products without a category are filtered out.
Important
Product photos should contain the URL of the Voucherify domain voucherify-uploads.s3.amazonaws.com, otherwise the photos will not be displayed correctly or an error may occur due to an unverified domain.
After purchasing selected products, the store generates a receipt that contains information about the purchased products, location with address, price and payment status.
Segment is a tool that we integrate with our application to effectively manage user data and the purchasing process. Thanks to the Segment, we can send data from the Voucherify and POS applications to one central place, where they are processed and further transferred to the Voucherify platform. One of many events is user verification.
Composable UI provides the foundation for building blazing-fast modern composable commerce sites. It is built with best-in-class technologies including React, Next.js, Typescript, Chakra UI, React Query, and tRPC.
Composable UI can be integrated with any headless commerce, CMS, and other MACH services of your choice, and comes pre-integrated with Algolia for product filtering, Stripe for payments, and mocked commerce and CMS services.
Composable UI offers the following:
- Composable UI app built with React & Next.js
- Figma Design Kit & Ready-to-Use Components Library
- Documentation
Composable UI is, and always will be, open source and freely available under the MIT license.
Start building your dream commerce site today with Composable UI!
- Resources
- Deployment / Installation
- Voucherify POS ENV
- Configuring Algolia
- Documentation Installation
- What's inside?
- Next Steps
- How to Contribute
📦 Installation: See sections below for 1-click Deploy, Docker & Localhost
🖥 Storefront: https://storefront.composable.com
📘 Documentation: https://docs.composable.com
🔆 Figma: http://figma.composable.com
ℹ️ Learn More: https://www.composable.com
There are multiple methods of running and deploying Composable UI.
Be sure to read the documentation on Composable UI's environment variables. When deploying to a cloud provider like Vercel or Netlify you must set the NEXTAUTH_SECRET environment variable. For more information on Composable UI environment variables, see the Application Configuration section. See these links on how to set environment variables for Netlify and Vercel.
You can host Composable UI on any service that supports Next.js.
After installing Composable UI, we recommend also taking a few moments to configure Algolia and Stripe to take full advantage of Composable UI's base features.
To run locally, ensure that you have installed:
- Node.js v16.18.0 or higher
- pnpm v8.0 or higher
For more information about the installation, see the Installation page section.
Perform the following operations in your terminal:
git clone https://github.com/composable-com/composable-ui
cd composable-ui
pnpm i
pnpm devYou should now have the Composable UI application running locally. Go to your web browser and navigate to http://localhost:3000
Refer to the 1-Click deployment documentation to quickly and easily deploy Composable UI to a frontend cloud provider.
You can also run the Composable UI app easily using Docker and not worry about local dependencies. If you don't already have Docker installed, first install Docker before proceeding below.
Clone, build and run the Docker image:
git clone https://github.com/composable-com/composable-ui
cd composable-ui
docker-compose up --buildYou should now have the Composable UI application running through Docker. Go to your web browser and navigate to http://localhost:3000
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=sdfgsdfgouyh4vb5o69azs9fdvnslfd123
ALGOLIA
NEXT_PUBLIC_ALGOLIA_APP_ID=
NEXT_PUBLIC_ALGOLIA_API_SEARCH_KEY=
NEXT_PUBLIC_ALGOLIA_INDEX_NAME=
SEGMENT
SEGMENTIO_SOURCE_WRITE_KEY=
VOUCHERIFY
VOUCHERIFY_API_URL=
VOUCHERIFY_APPLICATION_ID=
VOUCHERIFY_SECRET_KEY=
In order to take full advantage of Composable UI, you must configure Algolia and Stripe. If you do not, the Product Listing Page (PLP) and Checkout pages will not function correctly.
You can use Algolia's free tier to get started.
Follow the instructions in the documentation to configure Algolia.
Composable UI comes with documentation powered by Docusaurus. We encourage contributing documentation alongside code.
You can run Docusaurus by executing the following in the terminal:
cd docs
yarn install
yarn startYou should now have the Docusaurus application running locally. Go to your web browser and navigate to http://localhost:3001
Alternatively, you can view the latest documentation directly at https://docs.composable.com
Refer to Deploy Composable UI Docs to deploy to a cloud provider.
This workspace uses pnpm as a package manager. It includes the following packages/apps:
composable-ui: a Next.js applicationpackages/cms-generic: an example implementation of a CMS enginepackages/commerce-generic: an example implementation of an ecommerce enginepackages/eslint-config-custom:eslintconfigurations (includeseslint-config-nextandeslint-config-prettier)packages/stripe: stripe utilities and implementationpackages/tsconfig:tsconfig.jsonused throughout the monorepopackages/types: types shared between the Next.jsappand integration packagespackages/ui: a react component libraryscripts: Utilities to automate common tasks
To start with building your next composable commerce site using Composable UI, refer to the official Composable UI Documentation!
We always seek contributors to help us fix bugs, build new features, or help us improve the project documentation. Check out our Contributing Guide if interested.