Overview
ChopChop is a demo store and starter kit that sells fine tools for thoughtful cooks. It is designed with a premium brand and offers a seamless commerce experience. The stack used for ChopChop includes Next.js, Commerce.js, Tailwind CSS, Stripe, and Vercel. There is also a live demo available to see the project in action.
Features
- Next.js: Utilizes the Next.js framework for efficient and scalable server-side rendering.
- Commerce.js: Uses Commerce.js for handling the e-commerce functionality of the store.
- Tailwind CSS: Implements Tailwind CSS for a highly customizable and responsive design.
- Stripe: Integrates Stripe for secure and seamless payment processing.
- Vercel: Deploys the project easily and efficiently using Vercel.
- Sample Data: Comes with sample products and images to quickly set up and start running the store.
Installation
To install ChopChop, follow these steps:
- Prerequisites: Make sure you have an IDE or code editor of your choice, Node (v12 or higher), and NPM or Yarn installed.
- Optional: Install the Chec CLI by running
npm install -g @chec/cli(oryarn global add @chec/cli). - Navigate to your projects folder:
cd ~/Projects. - Install the ChopChop demo store:
chec demo-storeand choose “Chop Chop demo store (Next.js)” from the list. - Stop the server, open
.env, and add yourNEXT_PUBLIC_STRIPE_PUBLISHABLE_KEYfor using Stripe. - Re-run
npm run dev. - Open http://localhost:3000 and get started!
Alternatively, you can manually install the project by cloning it, installing the dependencies, creating a .env file, and starting the dev server.
To install sample data, follow these additional steps:
- Copy
.env.exampleto.env. - Edit
.envand fill out the required variables such asNEXT_PUBLIC_CHEC_PUBLIC_API_KEY,NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,CHEC_SECRET_KEY, andNEXT_PUBLIC_GA_TRACKING_ID. - Save and close the file.
- Run the seeder to install the sample data.
Summary
ChopChop is a beautifully designed and elegantly developed demo store and starter kit for selling kitchen tools. It offers a premium brand and a seamless commerce experience. The installation process is straightforward, with options to use the Chec CLI or manually clone the project. Sample data is available to quickly set up the store. With its combination of Next.js, Commerce.js, Tailwind CSS, Stripe, and Vercel, ChopChop provides a comprehensive solution for anyone looking to build an e-commerce store for kitchen tools.