Introduction

Welcome to the ChawkBazar documentation!

Fastest Ecommerce App built with React, NextJS,
TypeScript, Laravel and Tailwind.

Navigation

You can find different topics in the table of

contents. On desktop, you should see it in the
left sidebar. On mobile, you should see it
after pressing an icon with Hamberger in the
top right corner.

Supported Platforms For Local

Development
 Compatible Browsers (Firefox, Safari, Chrome,

Edge)

Server(Node.js 12.13.0 or later)

MacOS, Windows, and Linux are supported

Requirements

node(12.13.0 or later)

yarn

PHP 7.4
MySQL 8

ext_curl
editor: Visual Studio Code(recommended)

“Please follow this video playlist with the

documentation, and it'll make installation
and customization process relatively easy.
https:!"www.youtube.com/playlist?list=PLUT1MYLrV
pA9-p3tDlWzJgHmJNBwoz7IQ

How it works

Tech We Have Used

We have used monorepo folder structure with

Yarn Workspace. In our app we have three
different services:

api
shop

admin

Tech specification for specific part is given

below:

Admin Dashboard (GraphQL &

Admin Dashboard (GraphQL &
REST)

NextJs

Typescript

Tailwindcss

React Hook Form

React-Query

Shop Frontend (GraphQL & REST)

NextJs

Typescript

Tailwindcss
React Hook Form

React-Query

API
API

Laravel

Getting Started

For getting started with the template you have

to follow the below procedure. For quick guide
you can check below videos for installation.

Installation Video
Prerequisites

PHP 7.4

Composer

Xamp/Wamp/Lamp/Mamp for any such application

for apache, nginx, mysql

PHP plugins you must need

simplexml
 PHP's dom extension
mbstring

GD Library

Frontend

node(12.13.0 or later)
yarn

editor: Visual Studio Code(recommended)

Getting Started

1. First download the file from codecanyon.

2. Unzip the downloaded file and folder structure
you get
 chawkbazar
|-- chawkbazar-api
|-- admin
|-- shop

3. From the above folder structure you should

notice that our app has three parts
chawkbazar-api , shop and admin . So you have
to run all the parts separately and
sequentially.

Getting started with api

Run and start xamp/wamp/lamp/mamp and start

all the services

Create a database in your mysql and put

those info in next step
Rename .env.example file to .env and
provide necessary credentials. Like database
credentials stripe credentials, s3
credentials(only if you use s3 disk) admin
email shop url etc.

Specially check for this env variables

DB_HOST=localhost
DB_DATABASE=chawkbazar_laravel
DB_USERNAME=root
DB_PASSWORD=

Run composer install

run php artisan key:generate

Run php artisan chawkbazar:install and

follow necessary steps.
 For image upload to work properly you need to
run php artisan storage:link .

run php artisan serve

“NB: your frontend NEXT_PUBLIC_REST_API_ENDPOINT

env value will be localhost:8000/

“For details api doc and requirements details

“For details api doc and requirements details
you can go to Laravel API

For MAC and Linux(with sail and

docker)

There is an alternate installation procedure

for linux and mac. You can follow below
procedure to getting started with sail

Prerequisites

Docker

Installation

Video

https:!"www.youtube.com/watch?v=Cb_jb2N2UYM

Run Docker application first

 Run Docker application first

Now go to your chawkbazar-laravel root

directory and run bash install.sh . It will

guide you through some process. Follow those

steps carefully and your app will be up and

running
Navigate to api then sail down to stop the

container. If you want to remove the volumes

then sail down -v

“NB: your frontend NEXT_PUBLIC_REST_API_ENDPOINT

env value will be localhost/

“For details api doc and requirements details

you can go to Laravel API

Getting Started with Frontend

 Getting Started with Frontend

4. After configuring API & running it

successfully you can choose the directory
where you need to work

Below are the directories where you will choose

to work for frontend stuffs

cd admin/rest
cd shop

After choosing your working directory

Go to specific folder and rename the
.env.template !" .env and put your api
endpoint here. You will find .env.template file
at the root of your admin/{chosen-directory-
name} or shop

5. Run yarn at the root directory.

 # on chawkbazar/root directory
yarn

6. Scripts To Run the fronted App

For Admin :

For starting the admin dashboard part with

corresponding api data run below commands.

using workspace (At the root of the chawkbazar

directory, you can run the below commands)

yarn dev:admin-rest

without workspace(if you want to run the

command within specific project root of

 command within specific project root of

admin/{chosen-directory-name} )

# for dev mode run below command

# REST
yarn dev

This command will run the app in development

mode. Open the suggested url in your terminal.
like !" http:!"localhost:3000 .

** Note: **

The page will automatically reload if you make

changes to the code. You will see the build

errors and lint warnings in the console.

If you saw any error while running make Sure

you setup your API endpoint properly at .env

file.

For Shop :
For Shop :

Shop config

For starting the shop part with corresponding

api data run below commands.

using workspace (At the root of the chawkbazar

directory, you can run the below commands)

yarn dev:shop-rest

without workspace(if you want to run the

command within specific project root of shop )

yarn dev

** If you want to test your production build

** If you want to test your production build
admin or shop in local environment then run the
below commands. **

Admin (At the root of the chawkbazar

directory, you can run the below
commands)

# build admin for production

yarn build:admin-rest

#start admin in production mode

yarn start:admin-rest

Shop (At the root of the chawkbazar

directory, you can run the below
commands)
# build shop for production
yarn build:shop-rest

# start shop in production mode

yarn start:shop-rest
 ** Note **:
Please see package.json file for other builtin
helper commands.

7. For development purpose we use yarn workspace

if you want to use it then see the

 if you want to use it then see the
package.json file at root, for various
workspace specific command.

if you prefer single template then just copy

the required template folder and separate

them. you'll find their package.json file

within them and follow the command for dev,

build, start.

8. For further development & customization check

our Frontend Customization guide.

Admin dashboard

Analytics Dashboard

You will get a complete analytics dashboard to

You will get a complete analytics dashboard to
know the overview of your shop.
Manage Product Type

In Types menu you will get the product types

and you can add, remove or modify product
type from there.
Manage Product Category

In Categories menu you will get the product

types and you can add, remove or modify
product categories from there.

Product Management
Product Management

In Products menu you will get the products

and you can add, remove or modify products
from there.

A portion of product form

Order Status

In Order Status menu you will get the order

status list and you can add, remove or modify
order status from there.
 Order Management

In Order menu you will get the order list and

you can add, remove or modify order from
there.
 A portion of order management.
Order status change.

Coupon Management
Coupon Management

In Coupon menu you will get the Coupon list and

you can add, remove or modify Coupon from
there.

Customer Management

In Customer menu you will get the Customer list

In Customer menu you will get the Customer list
and you can add, remove or modify Customer from
there.

Tax Management

In Tax menu you will get the Tax list and you
can add, remove or modify Tax from there.
Shipping Management

In shipping menu you will get the shipping list

and you can add, remove or modify shipping from
there.

Shipping Management
In shipping menu you will get the shipping list
In shipping menu you will get the shipping list
and you can add, remove or modify shipping from
there.

Settings Management

In settings menu you will get the settings

management form there.
 Available Scripts:

You can run below commands in the root folder

for your need.

"clean": "yarn workspaces run rimraf \"

"clean": "yarn workspaces run rimraf \"
{.next,node_modules,__generated__,.cache,src/graphq
l/*.d.ts,src/framework/graphql/**/*.d.ts}\" &&
rimraf node_modules",
"dev:shop-rest": "yarn workspace @chawkbazar/shop
dev",
"build:shop-rest": "yarn workspace @chawkbazar/shop
build",
"start:shop-rest": "yarn workspace @chawkbazar/shop
start",
"dev:admin-rest": "yarn workspace @marvel/admin-
rest dev",
"build:admin-rest": "yarn workspace @marvel/admin-
rest build",
"start:admin-rest": "yarn workspace @marvel/admin-
rest start",
"prepare": "husky install",

** Note: ** Also, individual Scripts are

available under every individual package.
You can check out them from their individual
package.json file.

Customization
 Customization

For customizing the template's

default site settings:

> [your-frontend-project] = admin [ rest ] or

shop

If you want to customize the site settings such

as site info, default(logo, language , currency
code),navigation etc, you can easily change
those settings from

[your-frontend-
project]/src/settings/site.settings.ts

In this file, find your required settings key

and change it's value according to your need.

For example, If you want to change the

For example, If you want to change the
currencyCode : please go to [your-frontend-
project]/src/settings/site.settings.ts and find
the following portions and change it.

currencyCode: "USD";

NOTE ** Some of these options are customizable

through ADMIN Dashboard.

Styles and Assets

CSS styles:

“[your-frontend-project] = admin [ rest ] or

“[your-frontend-project] = admin [ rest ] or
shop

We use tailwindcss framework with some

customization which you find at :

open [your-frontend-project]/tailwind.config.js

For tailwindcss documentation:

Go to Tailwindcss

Icons:

for our icons

open [your-frontend-project]/src/components/icons

For Adding a custom Icon:

 For Adding a custom Icon:

To add a custom icon please follow this

procedure.

1. Open your custom SVG icon file in the code

editor and copy all the code.
2. Then Go to src !# components !# icons folder
and create a new .tsx file.
3. Then here create a function component and
paste your copied SVG code inside the return
statement.
4. Then covert all the SVG's kebab-cases
properties into camelCase format except the
data-name property. For ex. change the stroke-
width and fill-color into strokeWidth and
fillColor. (for reffernce you can see one of
our icon. )
5. If your custom SVG code has any single custom
color then change them into fillColor.

Menu
 Menu

“Please follow this video with the

documentation, and it'll make the menu build
process relatively easy.

https:!"www.youtube.com/watch?v=ewNGG_i3r-Y&feat
ure=emb_title

Mega menu for the shop are coming from a JSON

file which is located at,

shop -> public -> data -> menus.json

You've to update this JSON to build the mega
menu.

Data Structure

id -> ID for menu or submenu

path -> After clicking the menu in frontend which
path will be redirect
label -> Label of that men
subMenu -> JSON for submenu
mobileMenu -> Different menu for mobile.

Banner
 Banner

“Please follow this video with the

documentation, and it'll make the banner
update process relatively easy.

https:!"www.youtube.com/watch?v=AMOexuHTKa0

The banner data are coming from a JSON file

which is located at,

shop -> public -> data -> banner.json

You've to update this JSON to build the mega
menu.

Data Structure

id -> ID for a banner

title -> Title for a banner
slug -> This is a tag slug

“At first, create the tag and add that tag

“At first, create the tag and add that tag
slug on the slug path.

“For example, if you want to start a special

campaign for some products, just create a tag
for that campaign in admin, add that tag to
their related products, and on banners.json ,
add that tag as a slug.

image -> Image path

mobile -> JSON object for mobile image
desktop -> JSON object for desktop image
url -> Path of the image
width -> Width of the image for next/image
optimization
height -> Height of the image for next/image
optimization

Data Mapping
homeOneBanner

homeOneHeroBanner

[1]

[2]

[3]
homeTwoHeroBanner

[1]

[2]

[3]
homeThreeBanner

[1]

[2]

homeThreeMasonryBanner
[1]

[2]

[3]

[4]
[5]

bannerGrid

[1]

[2]
[3]

promotionBanner

[1]

[2]
[3]

promotionBannerTwo

[1]

[2]
[3]

bannerDataOne

[1]

[2]
[3]

bannerDataTwo

[1]

[2]
[3]

homeThreeProductsBanner

[1]
[2]
homeFourBanner

[1]
[2]

[3]

homeFourGridBanners
[1]

[2]

[3]

homeFiveBanner
 [1]

Brand

We have multiple types of brand layouts.

1. Slider Layout !# For Minimal Demo

2. Grid Layout !# For Others Demo

For slider layout, you've to upload a single

image, and for grid layout, you've to upload
image, and for grid layout, you've to upload
two images; one is a cover, and another is a
logo.

You'll get a layout option when you create a

brand,

If you use a minimal home page, then add a

slider layout; otherwise, use Grid Layout.

Utilities
 Utilities

In this template, We have used some custom

helper functions which is located in

“[your-frontend-project] = admin [ rest ] or

shop

cd [your-frontend-project]/src/utils/

You can use or customize these helper fuctions

according to your needs.

API Integration:

For API Integration:

> [your-frontend-project] = admin [ rest ] or
shop

We have used env variables using .env file

format. You have

to put your API url within this file.

For example:

Put that url in the shop/.env and

admin/rest/.env

NEXT_PUBLIC_REST_API_ENDPOINT=
'{put_your_api_url_here}'

And run your frontend project

Data Fetching
“[your-frontend-project] = admin [ rest ] or
shop

We have used React Query and Axios which is

defined in

[your-frontend-rest-project]/src/data/

For details documentation:

React-Query

You can check and customize it as your need.

Uses Example:
 Query

import { useProductsQuery } from

"@data/product/use-products.query";

const {
isFetching: loading,
isFetchingNextPage: loadingMore,
fetchNextPage,
hasNextPage,
isError,
data,
error,
} = useProductsQuery({
type: "grocery",
text: "",
category: "grocery",
});

Mutation

import { useCreateProductMutation } from

"@data/product/product-create.mutation";
"@data/product/product-create.mutation";

const {
mutate: createProduct,
isLoading: creating,
} = useCreateProductMutation();

function handleSubmit(inputVaues) {
createProduct(
{
...inputValues,
},
{
onError: (error: any) => {

Object.keys(error?.response?.data).forEach((field:
any) => {
setError(field, {
type: "manual",
message: error?.response?.data[field]
[0],
});
});
},
}
 }
);
}

Deployment

AWS (Amazon Web Service)

“If you want to use all the scripts ( shop ,

admin , api ) on the same server as this
tutorial, then we recommend creating a blank
ubuntu-based server with at least 2+ CPU
cores and 2GB+ memory.

How to create ec2 server?

In this AWS tutorial, we're going to create an
ec2 server. To do that at first, login to your
AWS account and then click,

ec2 -> Instance -> Launch Instance

Then select a ubuntu 20.04 server

After that, click Next !# Next !# Next !# Next

And on security pages, add a rule for HTTP ,

After review, click Launch, and you'll get and

popup for KeyPair, which will be required to
popup for KeyPair, which will be required to
login to the server using ssh.

If you already have a previous KeyPair, you can

use that; otherwise, you can create a new one.
After completing that, make sure you download
that KeyPair.

After launching the instance, you'll get the

server IP, which will be required to login into
server IP, which will be required to login into
ssh.

Domain Setup

Our server setup is done; now, we're going to

set up the domain.

For domain and DNS, we're going to use

Cloudflare. It's a free DNS service that is
 Cloudflare. It's a free DNS service that is
used for DNS management and CDN. Not only that,
it can be used to improve the security of your
website as all the network come throw your
website by Cloudflare, and Cloudflare can
prevent most of the security threats based on
their traffic filtering.

To use Cloudflare,

1. Create a Cloudflare account

2. Add a site
3. Input your domain name
4. And change the nameserver to your domain
provider admin panel.

Now we'll be connecting our created AWS server

with Cloudflare.

To do that, copy the IP Address from the AWS

panel and then add it to Cloudflare as an A
record.
Then add and another CNAME record for www
We successfully create our server and domain.
Now we're going to set up the server to host
the chawkbazar.

Login to Server

At first, login to your AWS server using ssh.

to do that, go to the folder from the terminal
where KeyPair is downloaded.

then click Connect

From the Connect dashboard, go to SSH Client

and copy the example line and paste it to your
and copy the example line and paste it to your
terminal.

With this command, you will successfully

connect to your server throw ssh.

Change permission .pem

You've to change the permission downloaded .pem

file to 400 to access the server. To do that,
at first go to the location where .pem store
then run,

chmod 400 chawkbazar.pem

Change the chawkbazar.pem filename if you use a
different name during generate the key.

“Now go to the VPS Server section for deploy

the Chawkbazar Laravel

Virtual Private Server

With this tutorial, you can install ChawkBazar

to any type of blank or empty ubuntu server.
For example, Digital Ocean Droplets, Amazon
Lightsail, AWS, Google Cloud Virtual Private Server,
Azure Ubuntu Virtual Private Server , etc.

“If you want to use all the scripts ( shop ,

admin , api ) on the same server as this
 admin , api ) on the same server as this
tutorial, then we recommend creating a blank
ubuntu-based server with at least 2+ CPU
cores and 2GB+ memory.

“Please follow this video with the

documentation, and it'll make the
installation process relatively easy.

https:!"www.youtube.com/watch?v=cESkbAmmDPc

Access Server

At first login your server using SSH and

Terminal

Install NodeJS & Required

Application
Application

Install NodeJS

At first, we've to install NodeJS and npm to

run the chawkbazar app. To install NodeJS and
npm, run this command on your terminal,

sudo apt-get update

curl -sL https://deb.nodesource.com/setup_14.x |
sudo -E bash -
sudo apt-get install -y nodejs

Install Yarn

Chawkbazar is highly dependent on yarn , it

would be best to handle all the script parts
would be best to handle all the script parts
using yarn . So to install yarn, use this
command,

sudo npm i -g yarn

If you face any permission issue, then please

check this official doc to resolve that,

Npm Permission Issue

Install Zip & Unzip

sudo apt install zip unzip

Install PM2

Now we will install PM2 , which is a process

manager for Node.js applications. PM2 provides
manager for Node.js applications. PM2 provides
an easy way to manage and daemonize
applications (run them in the background as a
service). To install PM2 use this command,

sudo npm install -g pm2

After restarting the server or if the server

crash, then pm2 will halt the process. To
prevent that, we'll add pm2 as a startup
process to run automatically after restart the
server.

pm2 startup systemd

Setup Server

Introduction
Nginx is one of the most popular web servers in
the world. In this deployment tutorial, we're
going to use Nginx to host our website. In this
tutorial, we're going to use ubuntu 20.04 to
host chawkbazar

Step 1 - Installing Nginx

After creating the server, make sure the apt

library is up to date. To update the apt
library, use this command,

sudo apt update

After the update apt, we're going to install

Nginx. To do that, use this command

sudo apt install nginx

Step 2: Adjusting the Firewall

Before testing Nginx, the firewall software

needs to be adjusted to allow access to the
service. Nginx registers itself as a service
with ufw upon installation, making it
straightforward to allow Nginx access.

To check the ufw list, use this command,

sudo ufw app list

You will get a listing of an application list

like this,
At first, add ssh to the firewall,

sudo ufw allow ssh

sudo ufw allow OpenSSH

After that, to enable Nginx on the firewall,

use this command,

sudo ufw allow 'Nginx HTTP'

Now enable the firewall,

sudo ufw enable

sudo ufw default deny

You can verify the change by typing:

sudo ufw status

The output will be indicated which HTTP traffic

is allowed:

Step 3 – Checking your Web Server

Now check the status of the Nginx web server by

using this command,

systemctl status nginx

You'll get an output like this,

Step 4 - Install MySQL

sudo apt install mysql-server

Step 5 - Install PHP

sudo apt install php-fpm php-mysql

sudo apt install php-fpm php-mysql php-mbstring
php-xml php-bcmath php-simplexml php-mbstring
php7.4-gd php7.4-curl composer

Step 6 - Create MySQL Database &

User
User

sudo mysql
CREATE DATABASE chawkbazar;

CREATE USER 'chawkbazar_user'@'%' IDENTIFIED WITH

mysql_native_password BY 'chawkbazar1';

GRANT ALL ON chawkbazar.* TO 'chawkbazar_user'@'%';

FLUSH PRIVILEGES;

We use MySQL user name chawkbazar_user and MYSQL

password chawkbazar1 . Make sure you change at
least MySQL password for security.

Step 7 - Change permission for the

www folder
 www folder

sudo chown -R $USER:$USER /var/www/

Step 8 - Upload API to Server

At first, use this command to create a

directory on /var/www/

mkdir /var/www/chawkbazar

Then, go to your local computer

1. Extract the chawkbazar package that you

download from CodeCanyon.
2. On that folder, you'll get another folder
called chawkbazar-laravel .
3. On that folder, you'll get a folder called

chawkbazar-api

Now upload this chawkbazar-api folder to the

Now upload this chawkbazar-api folder to the
server /var/www/chawkbazar/

Step 9: Setting Up Server & Project

In this chapter, we'll set up our server and

also will set up Reverse Proxy to host all of
our sites from the same server.

At first, we'll disable the default

configuration.

sudo rm /etc/nginx/sites-enabled/default

Step 10 - Create New Nginx for the

domain

sudo touch /etc/nginx/sites-available/chawkbazar

sudo nano /etc/nginx/sites-available/chawkbazar
sudo nano /etc/nginx/sites-available/chawkbazar

Add this Nginx config file to that edited file,

server {
listen 80;

server_name YOUR_DOMAIN.com;

add_header X-Frame-Options "SAMEORIGIN";

add_header X-XSS-Protection "1; mode=block";
add_header X-Content-Type-Options "nosniff";

index index.html index.htm index.php;

charset utf-8;

# For API
location /api {
alias /var/www/chawkbazar/chawkbazar-
api/public;

try_files $uri $uri/ @api;

location ~ \.php$ {
include fastcgi_params;
 include fastcgi_params;
fastcgi_param SCRIPT_FILENAME
$request_filename;
fastcgi_pass unix:/run/php/php7.4-
fpm.sock;
}
}

location @api {
rewrite /api/(.*)$ /api/index.php?/$1 last;
}

# For FrontEnd -> Rest

location /{
proxy_pass http://localhost:3003;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}

location /admin{
proxy_pass http://localhost:3002/admin;
proxy_http_version 1.1;
 proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}

location = /favicon.ico { access_log off;

log_not_found off; }
location = /robots.txt { access_log off;
log_not_found off; }

error_page 404 /index.php;

location ~ \.php$ {
fastcgi_pass unix:/var/run/php/php7.4-
fpm.sock;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME
$realpath_root$fastcgi_script_name;
include fastcgi_params;
}

location ~ /\.(?!well-known).* {
deny all;
 deny all;
}
}

“Make sure you change YOUR_DOMAIN.com to your

specific domain name

“You can change api path, if you want to

change the the domain path for the laravel
application

“You can change admin path, if you want to

change the the domain path for the frontend
admin

Save and close the file by typing CTRL and X,

then Y and ENTER when you are finished.

Then enable the config

sudo ln -s /etc/nginx/sites-available/chawkbazar
/etc/nginx/sites-enabled/

Make sure you didn’t introduce any syntax

errors by typing:

sudo nginx -t

Next, restart Nginx:

sudo systemctl restart nginx

Secure Server

Step 1: Secure Nginx with Let's Encrypt

sudo apt install certbot python3-certbot-nginx
sudo ufw status

sudo ufw allow 'Nginx Full'

sudo ufw delete allow 'Nginx HTTP'

sudo ufw status

sudo certbot --nginx -d YOUR_DOMAIN

“After this command, you'll get several

command prompt. Make sure you take the
necessary steps and provide information on
that command prompt.

Install API

Step 1: Build and Run api

At first, go to the chawkbazar-api folder, then

At first, go to the chawkbazar-api folder, then
copy .env.example to .env,

cd /var/www/chawkbazar/chawkbazar-api
cp .env.example .env

Edit .env

nano .env

And add MySQL, stripe, mail or others

configuration.

Also, add https://YOUR_DOMAIN.COM/api to APP_URL .

Without this, the upload function will be
broken.
Then install all the packages and install api

composer install

php artisan key:generate

php artisan marvel:install

“You'll get several confirmations for

migration, dummy data, and admin account.
Make sure you check the confirmation step and
take the necessary actions based on your
requirement.

Enable laravel storage,

php artisan storage:link

Then give proper permission for laravel folder,

sudo chown -R www-data:www-data storage

sudo chown -R www-data:www-data bootstrap/cache

Now, when you go to the YOUR_DOMAIN/api you'll

get a welcome page like this
FrontEnd Project Build

“Typescript requires a huge chunk of memory to

build the project, so if your server has at
least 8gb+ of memory, then you can build the
project on your server directly. If not, then
build the project on your server, then move
the folder to the server then serve the
project. We'll do the second method in this
tutorial.

“We'll suggest you build the frontend part on

 We'll suggest you build the frontend part on
your computer and then upload the build file
to the server.

Go to your chawkbazar-laravel folder from your

local computer .

Step 1 - Config Next Admin App For

/admin Sub Directory

Edit admin/rest/next.config.js ,

add basePath for '/admin'

Step 2 - Install & Build

go to your chawkbazar-laravel folder again

To install all the npm packages run this

command,

yarn

Step 3 - Build the project

At first, we've to copy the sample

At first, we've to copy the sample
.env.template to production .env for the shop
and admin first.

Shop

Go to shop and copy .env.template to .env

Then edit .env and add your API url to that

file

NEXT_PUBLIC_REST_API_ENDPOINT="https://YOUR_DOMAIN/
api"

Also, update all the necessary configurations

like OTP, Mailchimp Token, Instagram Token,
Google MAP API, etc.

Admin

After that, Go to admin -> rest and copy

After that, Go to admin -> rest and copy
.env.template to .env

Then edit .env and add your API url to that

file

NEXT_PUBLIC_REST_API_ENDPOINT="https://YOUR_DOMAIN/
api"

Also, update all the necessary configurations

like Google MAP API, etc.

Image Config

Then open shop -> next.config.js and admin ->

rest -> next.config.js

and add your domain to images object

“If your API is hosted on a subdomain, then
add that subdomain with root domain on
next.config.js

Build Project

Now go to the chawkbazar-laravel folder,

run this for build admin

yarn build:admin-rest
And for the shop ,

at first, run the shop in one terminal

yarn dev:shop-rest

and then build the shop,

yarn build:shop-rest

Now zip admin , shop , package.json ,

babel.config.js and yarn.lock files and upload
them to the server /var/www/chawkbazar

Now go to the server /var/www/chawkbazar using

terminal

Then unzip that zip file.

Install FrontEnd And Run

Then install all the node packages,

yarn

Run frontend app

For shop app, use this command,

pm2 --name shop-rest start yarn -- run start:shop-

rest

Then to run the admin app, use this command,

pm2 --name admin-rest start yarn -- run

start:admin-rest
Now go to Now, go to your YOUR_DOMAIN to access
the shop page and YOUR_DOMAIN/admin for the
access admin section.

Vercel

“
[your-frontend-project]` = `admin` [`rest`] or
`shop

vercel.com

If you want to host the template in vercel.com

If you want to host the template in vercel.com
then follow the below command

Frontend

Step 1:

After deploying the api you will get the api

endpoint url. Put that url in the [your-

frontend-project]/.env and vercel.json file.

NEXT_PUBLIC_REST_API_ENDPOINT=
'{put_your_api_url_here}'

Step 2:

Run this command to shop for frontend and to

admin -> rest for admin

vercel
** NOTE: ** for deploying to vercel you need to
install vercel-cli on your machine for more
information please visit here

For others hosting providers:

Please follow nextjs deployment docs:

Social Login

You can use a social network like Google or

Facebook as a login provider like
email/username and password. To set up social
 email/username and password. To set up social
login, follow the below procedure,

Google

For Google, follow this procedure,

1. At first go to Google Console dashboard (https

:!"console.cloud.google.com/)
2. From the console, create a new project
3. After creating the project, go to APIs &
Services
-> OAuth consent screen.
4. Create an External OAuth Consent.
5. Then, go to the credentials section and create
OAuth Client ID.

6. Then you'll get your credentials,

7. Then open api/.env and add API ID and
credentials,
8. Then go to this https://generate-
secret.now.sh/32 site and generate a secret
key.
9. Then open shop/.env and add credentials to
GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET also
add a SECRET code.
 After configuration, make sure you rebuild your
project using this command,

For REST API

yarn build:shop-rest
yarn build:admin-rest

Facebook

1. Go to Facebook developer dashboard (https:!"de

velopers.facebook.com/apps/)
2. Then create a new app for chawkbazar
2. Then create a new app for chawkbazar
3. After that, set up Facebook Login.

4. Then provide all the necessary information.

5. After that, go to the settings page, and on

that page, you'll get all the credentials.

6. Then open api/.env and add API ID and
credentials,
 credentials,

7. Then go to this https://generate-

secret.now.sh/32 site and generate a secret

key.
8. Then open shop/.env and add credentials to
8. Then open shop/.env and add credentials to
FACEBOOK_CLIENT_ID and FACEBOOK_CLIENT_SECRET
also add a SECRET code.

“For Facebook, make sure you apply

verification for the APP. Otherwise, the
Facebook login won't work. (https:!"developer
s.facebook.com/docs/app-review/)

After configuration, make sure you rebuild your

project using this command,

For REST API

For REST API

yarn build:shop-rest
yarn build:admin-rest

OTP (Mobile Number

Verification)

We implement the OTP feature on ChawkBazar

v2.2.0 . So if you want to use OTP with
ChawkBazar, then make sure your ChawkBazar is
v2.2.0 or later.

With the OTP feature, you can do,

- Login with Mobile Number

- OTP verification for updating Mobile Number in
profile update section
 profile update section
- OTP verification during checkout process in
customer contact section

Configuration

As of today, we implement two service providers

for OTP. One is Twilio, and another is
MessageBird.

Twilio Configuration:

If you want to use Twilio as your OTP service

provider, then follow this procedure,

1. Create an account at Twilio

2. After that, go to the Twilio Console Panel and

copy the ACCOUNT SID, and AUTH TOKEN key and

add this key to your api/.env file
3. After that, go to the Verify option from the
Sidebar panel,
4. And from verify dashboard, create a service.
5. Add add that service key to api/.env ->
TWILIO_VERIFICATION_SID
 With that, your configuration is complete.

MessageBird:

“Use only one service provider for OTP

service, so use this MessageBird
configuration only if you want to use
MessageBird instead of Twilio.

To configure MessageBird, follow this procedure,

1. Create an account from MessageBird

2. After creating the account, go to the API
Getting Started and follow all the procedures
 Getting Started and follow all the procedures
step by step.

3. After completing the profile, copy the API

key from MessageBird and paste it to API/.env
With that, MessageBird is appropriately
configured for the OTP Service.

FrontEnd Demo

OTP Verification During Checkout Process:

OTP Verification During Checkout Process:

Similarly, when users go to the checkout page,

they'll get a form to verify their mobile
number.

For the front end, you don't have to do

anything. When a user goes to the checkout
page, they get a phone number box to add their
number and verify it.

OTP Verification For Updating Mobile Number:

Users also can change the number from their

profile.
 Multivendor

Create New Shop

To create new shop login as an administrator or

create a new account for creating shop
After creating the account you'll be redirected
to this page,
After that, click Create Shop

And provide all the information for the store .

After creating the shop you'll redirect to this

page,
By default, the shop will be inactive. Only
administrator can active a shop.

From administrator account go to shop and

click tick mark to activate or deactivate` a shop.
After activate the shop by administrator the
vendor dashboard will be like this,

After click on shop , you'll be redirected to

dashboard page,
From this dashboard, you can maintain you shop,

Dashboard:
Attributes:

Products:
Order:

Staff:
WithDraw:

User Roles:

Super Admin:
Super Admin:

Super admin can do everything. the admin can

maintain and edit every store on the site.

Store Owner:

Store owner can edit or main it's store, staff

or payment.

Staff:

The staff of a store has similar permission as

store owner, but the staff can't update the
store or withdraw payment.

Withdraw Payment:

Only the store owner can withdraw its payment.

To do that go to your shop dashboard !#
withdraws !# Request a withdraw,
After request payment, the dashboard will be
like this,
After request, the admin has to be approved the
admin.
After approved,
FrontEnd Shop

From frontend when customers click on the shop

page they'll get all the shops as a card list,
Also when customers click on a product they
will get the seller link,

After clicking the seller link they will

redirect to the seller shop page,
 Export Import

Export Import works under a shop. So, You have

to go to the shop page -> products menu for
product or shop page -> attributes menu to import
or export attributes.
or export attributes.

Export Import work different way for simple and

variable product

Simple Product

For simple products, you've to export only

products data. To do that, go to Your Shop ->
products . Then click on three dots and export
the simple products.
the simple products.

Similarly, for import csv, go to the same

option and import exported csv
variable products

For variable products, you will need three

different csv.

Attributes csv

products csv
variation options csv

Make sure to re-import you export these three

csv .
Now, during import variations product,
At First, you have to import Attributes
then Products and
Then products variation.
Thank You!