Headless e-commerce app developed using Next.js, Sanity, and Commerce.js.

Demo Store | Documentation | Request Feature

Features ✨

• Automatically syncs products from Commerce JS into Sanity
• User authentication with OAuth support for Google and Facebook
• Shopping cart with a wishlist feature
• Product details page allowing users to choose from different variants
• Customizable Filtering & Sorting for product collections
• Robust search experience powered by Algolia
• User dashboard featuring order details, address management, and more
• Custom checkout page
• Minimalist landing page design with editable content through Sanity Studio
• Customizable Promotion Banner
• Customizable Cookie Notice
• Accessibility features:
  • Default focus states preserved for keyboard navigation
  • Roving tabindex for radio buttons
  • Input-based quantity counters
  • Required alt text for all images
• SEO features:
  • Page-level SEO/Share settings
  • Fallback Global SEO/Share settings

Tech Stack 🛠️

• 

• 

• 

• 

• 

• Headless CMS - Sanity.io

• E-commerce Provider - Commerce JS

• Search Engine - Algolia

Getting Started 🚀

These instructions will guide you through the process of setting up the project on your local machine for development and testing purposes.

Prerequisites

• IDE or code editor of your choice
• Node (v18.16.0 or higher)

Step 1: Install Dependencies

• Fork the repository.
• Clone the fork repository to your local machine

git clone https://github.com/<your_username>/storekeeper.git
cd storekeeper

• Copy environment variables from .env.sample to .env

cp .env.example .env

• Install the dependencies with yarn

yarn

Step 2: Set up Commerce JS

• Create a free Commerce Js Account
• Visit dashboard.chec.io and go to DEVELOPER > API keys & CORS
• Open the .env file and replace the API KEYS with your own:

CHEC_API_URL="api.chec.io"
CHEC_PUBLIC_API_KEY="<CHEC_PUBLIC_API_KEY>"
CHEC_SECRET_API_KEY="<CHEC_SECRET_API_KEY>"

• Now, go to DEVELOPER > Webhooks and add the following webhooks:
  • product.create - [live-domain]/api/webhooks/commerce/product
  • product.update - [live-domain]/api/webhooks/commerce/product
  • product.delete - [live-domain]/api/webhooks/commerce/product
  • categories.create - [live-domain]/api/webhooks/commerce/category
  • categories.update - [live-domain]/api/webhooks/commerce/category
  • categories.delete - [live-domain]/api/webhooks/commerce/category
  • orders.create - [live-domain]/api/webhooks/commerce/order

Caution: Use a real domain, not localhost! During development, use your Vercel project URL, then switch to the production domain. If unsure of the Vercel URL until deployment, use a temporary placeholder, but update it post-deployment.

Step 3: Configure Sanity Studio

• Make sure you have the Sanity CLI installed globally first
• Navigate to the studio folder from the root of your project & install dependencies

cd studio
yarn

• Copy environment variables from .env.sample to .env

cp env.example .env

• Initialize the Sanity Studio.

sanity init

• When it asks you what DATASET configuration to use, go with the default.
• After initialization, open studio/.env and add PROJECT_ID and DATASET variables

SANITY_STUDIO_SANITY_PROJECT_ID="<SANITY_PROJECT_ID>"
SANITY_STUDIO_DATASET="production"

Step 4: Add CORS Origins to the Sanity project

• Visit manage.sanity.io and go to [your-project] > API > CORS ORIGINS
• Add your Studio URLs with credentials: http://localhost:3333 and [subdomain].sanity.studio
• Add your front-end URLs without credentials: http://localhost:3000 and https://[subdomain].vercel.app

Step 5: Generate mock products

• Launch the development server from the root directory of your project

yarn dev

Your front end should be running on localhost:3000

• To generate mock products, send a GET request to this endpoint: http://localhost:3000/api/scripts?task=generate-mock-data. We're using curl here, feel free to send the request from a browser or utilize an API testing tool such as POSTMAN.

curl https://localhost:3000/api/scripts?task=generate-mock-data

Note: The request might require a few minutes to complete. Interrupting the process could potentially corrupt your data.

Step 6: Sync products with Algolia

• If you haven't already, sign up for an Algolia account on their website. If you're an existing user, log in to your Algolia account.
• Navigate to your Algolia dashboard and create a new application. After creating the application obtain Application ID, Search-Only API Key and Admin API Key
• Now open the .env file and replace the following environmental variables

NEXT_PUBLIC_ALGOLIA_APP_ID="<ALGOLIA_APP_ID>"
NEXT_PUBLIC_ALGOLIA_SEARCH_KEY="<ALGOLIA_SEARCH_ONLY_API_KEY>"
ALGOLIA_ADMIN_KEY="<ALGOLIA_ALGOLIA_ADMIN_KEY>"

• To sync products with Algolia, send a POST request to this endpoint http://localhost:3000/api/webhooks/algolia/sync-all?token=<ALGOLIA_WEBHOOK_SECRET>. Replace <ALGOLIA_WEBHOOK_SECRET> with your actual Algolia webhook secret, which can be found in the .env file.

curl -X POST http://localhost:3000/api/webhooks/algolia/sync-all?token=<ALGOLIA_WEBHOOK_SECRET>

Make sure the dev server is running on localhost:3000 before sending the request

Deployment 🚀

Vercel

The easiest way to deploy the application is to use the Vercel Platform from the creators of Next.js. Check out the Next.js deployment documentation for more details.

Sanity

To deploy your Sanity Studio, go to the /studio folder from the root of your project and run the command sanity deploy. This command will initiate the deployment process. Follow the instructions to select a subdomain for your Sanity Studio. Once the deployment is complete, you'll receive a URL where you can access your deployed Sanity Studio.

Contribution 🤝

StoreKeeper is an Open Source project and we encourage everyone to help us making it better. If you are interested in contributing to the project, please read our Contributing Guide and Code of Conduct.

Discovered a 🐜 or have a feature suggestion? Feel free to create an issue on GitHub.

Support 💗

Like 💖 this project? Support this effort by giving a star 🌟 on GitHub, sharing it in your own blog, and giving a shoutout on Twitter.

Licence 👇

You are welcome to use this application however you wish under the GNU GENERAL PUBLIC LICENSE license.

(back to top)