Giter VIP home page Giter VIP logo

storekeeper's Introduction


StoreKeeper

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

Demo Store | Documentation | Request Feature

Commitizen friendly License PRs Welcome Connect on Linkedin

Hero image


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 🛠️


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)

storekeeper's People

Contributors

nilotpaldhar avatar

Watchers

avatar

Forkers

ceptar

storekeeper's Issues

Task: Add rating component

Title of the task

Task: Add rating component

Describe the task

This task will create the rating component.

Task: Add regular button

Title of the task

Task: Add regular button

Describe the task

This task will create the regular button component.

Task: Add user dashboard

Title of the task

Task: Add user dashboard

Describe the task

This task will add the user dashboard.

Feature: Create the search page with refinements and filters

Title of the task

Feature: Create the search page with refinements and filters

Describe the task

This task will implement a robust search page with various refinements and filters to help streamline the user experience.

List of tasks

  1. Task 1: Add extra fields to the product document type
  2. Task 2: Add webhook to sync products with Algolia
  3. Task 3: Add search autocomplete input component
  4. Task 4: Add product listing to the search page with pagination
  5. Task 5: Add the categories widget to the search page
  6. Task 6: Task: Add the brand widget to the search page
  7. Task 7: Add the colors widget to the search page
  8. Task 8: Add the price range widget to the search page
  9. Task 9: Add the sorting component to the search page
  10. Task 10: Add the refinement list component to the search page

Task: Add select component

Title of the task

Task: Add select input component

Describe the task

This task will create the select component.

Task: Add product reviews

Title of the task

Task: Add product reviews

Describe the task

This task will add the product reviews section.

Task: Add switch component

Title of the task

Task: Add switch component

Describe the task

This task will create the switch component.

Task: Add basic schema types

Title of the task

Task: Add basic schema types

Describe the task

The purpose of this task is to add basic schema types to Sanity Studio.

Task: Add checkbox component

Title of the task

Task: Add checkbox component

Describe the task

This task will create the checkbox component.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.