👋 Welcome to the world of Vinty Luxury Consignment, an online luxury vintage consignment store created with CommerceJS and React with an Express backend.
Here at Vinty, we pride ourselves in not just offering luxury items, but also a luxurious shopping experience - even on the web! Although the Vinty stylists and curators would love to be available 24/7 to assist shoppers, they are unable to. To help out, we've added a handy chatbot to the Vinty site - powered by react-chatbot-simple and Algolia - to help make recommendations based on what customers are looking for.
The application in this repo will allow you to create a simple e-commerce store with chatbot search functionalities, as seen below:
Additionally, upon successful setup of the app, you'll be able to view user recommendations based on activity:
To get started, you will need:
- A store created on CommerceJS
- An Algolia account with an application created and a
productsindex created within that. - An ngrok account.
- This application cloned onto your machine to run it locally.
There are two .env files in this project. One will be for the Express backend (server directory) and one will be for the React frontend (client directory).
Add a .env file in each directory and use the .env.example files in those directories to determine what environment variables to use.
For the ALGOLIA_API_KEY in server and the REACT_APP_ALGOLIA_API_KEY in client, use the Admin API Key.
To run the application, you'll run npm install and then npm start in both the client and server directories of your project at the same time. This will install the required dependencies and then run the frontend and backend code concurrently.
To access the frontend, you'll be on localhost:3000. Your backend will be on localhost:3001.
You'll need to have an ngrok tunnel set up to properly. You can follow the Getting Started guide here to get it set up. You'll set up an ngrok tunnel for the backend (port 3001). You'll start the tunnel in a new Terminal window while your frontend and backend development servers are still running.
It is highly recommended that you create and auth into your ngrok account before creating your tunnel so that you can keep track of your tunnel status.
Once you have ngrok set up, you're going to take the web address for your tunnel (ending in .ngrok.io under Forwarding in your Terminal) and head to your Chec account. You'll go to Developer > Webhooks > Add and select products.create and products.update under the "Events" dropdown. For the URL, enter your ngrok tunnel URL and add /algolia-webhook after it. This will call the /algolia-webhook endpoint from the Express backend (see server/index.js for more information).
Then, make sure you save your webhook and confirm that a test request goes through successfully. Once it goes through with a 200 success code, congrats! 🎉 You can now add in products and have them synced to your Algolia index.
Now that Chec and ngrok are set up, the final step is to swap out your ngrok tunnel URL in client/src/components/ChatBot/Search.js within the useEffect's fetch request. Make sure that the /recommendation endpoint is still appened to the URL (ex: https://ngrok-url-1234.ngrok.io/recommendation).
Now that the webhook is added in, you can now add products to your store. For each product, to align with the app's interface, we recommend entering in a name, description, price, and an image with a generous amount of SEO tags for searchability.
This app uses Algolia Recommend to generated suggested trending items on individual product detail pages. You will need to set up Algolia Recommend to use that feature of this application - you can learn how to set it up either by following the corresponding article for this project or the guide from official Algolia documentation here.