PickBazar Documentation
WelcomeHow It WorksGetting StartedInstallation VideoPrerequisitesGetting StartedFeaturesAvailable ScriptsCustomizationStyles and AssetsUtilities
Back-End Integration
Deployment
Update
SEO and Analytics
API
Social LoginOTP (Mobile Number Verification)TranslationMultiVendorExport ImportFAQSupportVersions

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

video

Prerequisites

  • PHP 7.4

  • Composer

  • Xamp/Wamp/Lamp for any such application for apache, nginx, mysql

  • PHP plugins you must need

    • simplexml
    • PHP's dom extension
    • mbstring
    • GD Library

Frontend

Getting Started

  1. First download the file from codecanyon.
  2. Unzip the downloaded file and folder structure you get
pickbazar
|-- api
|-- admin
|-- rest
|-- graphql
|-- shop
  1. From the above folder structure you should notice that our app has three parts api ,shop and admin. So you have to run all the parts separately and sequentially.

    Getting started with api

    • Make sure you have run xamp/mamp/wamp/lamp for mysql and php

    • 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=pickbazar_laravel
      DB_USERNAME=root
      DB_PASSWORD=
    • Run composer install

      composer install

      composer success

    • run php artisan key:generate

      app key

    • Run php artisan marvel:install and follow necessary steps.

      pickbazar install

    • For image upload to work properly you need to run php artisan storage:link.

    storage link

    • run php artisan serve

      server start

NB: your frontend NEXT_PUBLIC_GRAPHQL_API_ENDPOINT env value will be localhost:8000/graphql

NB: your frontend NEXT_PUBLIC_REST_API_ENDPOINT env value will be localhost:8000/

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

mac-video

  • Run Docker application first
  • Now go to your pickbazar-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_GRAPHQL_API_ENDPOINT env value will be localhost/graphql

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

  1. After configuring API & running it successfully you can choose the directory where you need to work

NOTE: only for windows user ( if you want to use GraphQL version)

- Go to your specific project root and find `.graphql-let.yml`
- Replace the env variable `${NEXT_PUBLIC_GRAPHQL_API_ENDPOINT}` in schema field manually
- Provide your API url in the schema field.
- Also change the dev command at `package.json`
- Go to `shop/package.json` file and change the scripts:
"node -r dotenv/config $(yarn bin)/graphql-let",
to
"codegen": "graphql-let",

Below are the directories where you will choose to work for frontend stuffs

# For Admin GraphQL
cd admin/graphql
# For Admin REST
cd admin/rest
# For Shop GraphQL or 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

  1. Run yarn at the root directory.
# on pickbazar/root directory
yarn
  1. 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 pickbazar directory, you can run the below commands)
# for dev mode run below command
# GraphQL
yarn dev:admin-gql
# REST
yarn dev:admin-rest

frontend script

  • without workspace(if you want to run the command within specific project root of admin/{chosen-directory-name})
# for dev mode run below command
# GraphQL
yarn dev
# 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 :

Shop config

From v4.0.0, we changed the structure of the shop directory. So if you're using v4.0.0 or later, then you've to do a little bit of customization of the shop directory.

At first open pickbazar -> shop,

  • For REST, copy tsconfig.rest.json content to tsconfig.json or
  • For GraphQL copy tsconfig.graphql.json content to tsconfig.json

Then open pickbazar -> shop -> .env and change FRAMEWORK_PROVIDER to rest for REST installation or graphql for Graphql Installation.

Then to starting the shop part with corresponding api run below commands.

  • using workspace (At the root of the pickbazar directory, you can run the below commands)
# for dev mode run below command
# GraphQL
yarn dev:shop-gql
# REST
yarn dev:shop-rest

shop script

  • without workspace(if you want to run the command within specific project root of shop)
# for dev mode run below command
# GraphQL
yarn dev
# REST
yarn dev

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 pickbazar directory, you can run the below commands)

# build admin for production
yarn build:admin-gql
#start admin in production mode
yarn start:admin-gql

Shop (At the root of the pickbazar directory, you can run the below commands)

# build shop for production
yarn build:shop-gql
# start shop in production mode
yarn start:shop-gql

build1 build2 start

Note : Please see package.json file for other builtin helper commands.

  1. For development purpose we use yarn workspace 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.
  1. For further development & customization check our Frontend Customization guide.