Quick start

Start here Step 4 of 8

Quick start

Follow these steps in order. They take about 15 minutes. Each step says what you should see, so you know it worked. If something goes wrong, look for the message in Troubleshooting.

1

Unzip the download

Unzip the file from CodeCanyon into a folder you can find again, for example your Documents folder. You get a folder named chatcart with the app in a second chatcart folder inside it. See the folder tree in What is in the download.

2

Open a terminal in the inner folder

Open a terminal and go into the app folder:

cd path/to/chatcart/chatcart
  • macOS: open Terminal, type cd (with a space), drag the inner chatcart folder into the window, and press Enter.
  • Windows: open the inner chatcart folder in File Explorer, click the address bar, type cmd, and press Enter.
  • VS Code: choose File, then Open Folder, and pick the inner chatcart folder. Then open Terminal, then New Terminal.

Check that you are in the right place. Type ls (macOS, Linux, PowerShell) or dir (Windows Command Prompt). You must see package.json in the list.

3

Check your Node.js version

node -v

You should see v20.19.0 or a higher number, such as v22.12.0. If the command is not found, or the number is lower, install Node.js 22 LTS from nodejs.org, then close and open the terminal again. If you use nvm, run nvm install 22 and then nvm use 22.

4

Install the packages

npm install

This downloads the packages into a new node_modules folder. It takes 1 to 3 minutes. Lines that start with npm warn deprecated are normal. The last line says added ... packages.

You can also use npm ci. It installs the exact versions in package-lock.json and is the best choice on a server. For your own computer, both work.

5

Get a MongoDB database

ChatCart keeps its data in MongoDB. You need a connection string (also called a URI). Pick one:

  • MongoDB on your computer. The string is mongodb://127.0.0.1:27017/chatcart.
  • MongoDB Atlas (free, in the cloud). The string looks like mongodb+srv://USER:[email protected]/chatcart?retryWrites=true&w=majority.

Not sure how? Set up MongoDB shows both options step by step.

6

Create your .env.local file

Copy the example settings file. Use the line for your system:

cp .env.example .env.local            # macOS and Linux
Copy-Item .env.example .env.local     # Windows PowerShell
copy .env.example .env.local          # Windows Command Prompt

Open .env.local in a text editor and set these values:

Variable Required What to put there
MONGODB_URI Yes Your connection string from step 5.
JWT_SECRET Yes A long random text that protects logins. At least 16 characters, 32 or more is better. Replace the example value. Make one with a command below.
APP_URL Recommended The address of your store. Use http://localhost:3000 for now. On your server, use your real address, like https://shop.example.com.

Make a random JWT_SECRET with one of these commands:

openssl rand -base64 32

# or, on any system with Node.js (works on Windows too):
node -e "console.log(require('crypto').randomBytes(32).toString('base64'))"

Your .env.local now looks like this (with your own values):

MONGODB_URI=mongodb://127.0.0.1:27017/chatcart
JWT_SECRET=paste-the-random-string-from-the-command-above
APP_URL=http://localhost:3000
Leave the other lines as they are for now. They are explained in Configuration. If you change .env.local later, stop the app (Ctrl + C) and start it again.
7

Create your admin account (pick one path)

This step is not optional. Without it there is no account to sign in with. Choose one path. Admin account and demo data explains both in more detail.

Path A: try it with demo data

npm run seed

Loads two demo stores with products, orders and reviews, and creates the demo login [email protected] with the password ChangeMe123!. It only runs on an empty database.

Path B: start clean for your shop

npm run create-admin

Asks for your name, email and password, and creates your owner account. There is no demo data and no store yet. You create your store in step 9.

Tip for Path A: add your WhatsApp number to .env.local before you run the seed, and both demo stores use it: SEED_WHATSAPP_NUMBER=+15551234567 (use your own number).
8

Start the app

npm run dev

Wait until the terminal shows Ready. Then open these addresses in your browser:

The first visit to each page is slow (10 to 30 seconds), because the page is built the first time you open it. After that it is fast. Keep the terminal open while you use the app. See A successful start for what you should see.

9

Sign in and set your WhatsApp number

Orders go to the store's WhatsApp number. Set your own number before you test an order, or the test goes to a placeholder number.

Path A (demo data)

  1. Sign in at /admin with [email protected] and ChangeMe123!.
  2. Change the password: Users, edit Demo Owner, type a New password, and save.
  3. Go to Settings, tab General, field WhatsApp number. Type your number and save.
  4. The demo has two stores. Use the store switcher at the top left to choose Aroma Café, and set the number there too.

Path B (clean install)

  1. Sign in at /admin with the email and password you chose.
  2. The dashboard says No store yet. Click Create a store.
  3. Click New store. Fill in the name, the mode, your WhatsApp number, the currency and the language. Turn on Default store, then click Create store.
  4. Add categories and products. See Managing products.

How to write the number: the full international number, with the country code and without the first 0 of a local number. For example, the US number (555) 123-4567 is +15551234567, and the UK number 07700 900123 is +447700900123. Spaces, brackets and a leading + are fine: ChatCart keeps only the digits for the WhatsApp link.

Admin Settings page, General tab, with the WhatsApp number field next to the store name. The WhatsApp number field is on the General tab of Settings 1 2
Admin, Settings, General.
  1. WhatsApp number: every order of this store opens a chat with this number.
  2. WhatsApp message tab: the text of the order message. See WhatsApp template.
10

Place a test order

Open the storefront, add a product to the cart, and go to checkout. Fill in the form and click Order on WhatsApp. WhatsApp (the app or WhatsApp Web) opens with the order message to your number. In the admin, Orders now shows the order as Pending.

If you test from the same WhatsApp account as the store number, WhatsApp opens your own "Message yourself" chat. That is fine for a test.