Building A React & GraphQL Based ECommerce Website Using Pickbazar

There are lots of shopping templates available in several marketplaces. But choosing the right one is very difficult. Today we will talk about a shopping or eCommerce template named "PickBazar" developed by RedQ Inc. It is a new template published in the Envato marketplace.

What is React and why should we use it?

React is a component-based JavaScript library for generating user interfaces and it is introduced by Facebook. It allows us to create encapsulated components that manage their state and then compose them to make complex UIs. ReactJS is one of the widely used UI Library that assists with the creation of beautiful web applications requiring minimal effort and coding.

What is GraphQL and why do we implement it?

GraphQL was developed in 2012, internally by Facebook before being publicly released in 2015. GraphQL is an open-source data query and manipulation language for APIs, and a runtime for fulfilling queries with existing data. GraphQL supports reading, writing, and subscribing to changes to data (realtime updates – most commonly implemented using WebHooks). GraphQL servers are available for multiple languages. It allows clients to define the required data structure, and the same data structure is returned from the server, that is why preventing excessively large amounts of data from being returned.

Who would be Benefited by PickBazar template?

Nowadays, the grocery, pharmacy, electronics, cellphones businesses tend to be fully operable through an online presence. If an entrepreneur wants to operate a new business through online presence, his first requirement would be a well-designed site to perform smoothly. At this point, PickBazar is here to provide a complete solution for a store owner to run his business without any obstacles. At first, he has to purchase this template from the Envato marketplace. We are discussing the actual basic implementation of this template. So let us start it in this article.

Fields of Benefits

Grocery

Grocery items naturally fall into daily needs. So, customers who come to buy anything from your online grocery store will be provided with a complete stock management system. A comprehensive knowledge should be provided towards him or her about the product out of stock or available. PickBazar is here to maintain your site's stock management system.

Pharmacy

Pharmacy products are naturally essential nowadays, in this COVID19 situation. A pharmacy store owner will definitely need a category management system for demonstrating different types of medicines, baby products, and women essentials separate, so a potential customer could find his product fast. If you utilize PickBazar for your online Pharmacy store, you can eradicate this issue.

Food Delivery

Food delivery is a profitable business if you could maintain it through a bold online presence; PickBazar is here to help you with this aspect. PickBazar has an excellent delivery management system and order tracking management. So you can run your food delivery business from scratch with the implementation of the PickBazar template.

Book Store

Book store is a place where people go to buy books, but they have to waste a lot of time finding the book physically, or it is hard to learn about any book's author before buying. So, if you utilize PickBazar for your Book Store to give it an online presence, PickBazar will definitely help you grab the potential customers. With author management, every book has a chance to exhibit the details about the author plus category management will help you categorize your available books according to their genre.

Some Generalize features

Checkout management system is a feature from PickBazar for any kind of online store. With this feature, customers and store owners both can maintain a business connection. I mean delivery address, payment, and order tracking all these are possible via checkout management system.

PickBazar Dashboard is a great feature that is offered by the template. It is a must-have feature for an online store owner. Total Revenue, Total Order, New Customer, Total Delivery, Sales From Social Media, Sale History, Profit & loss calculation, Weekly & Monthly targets all of these options are visible and manageable through PickBazar Dashboard.

Make Your Own eCommerce Website with React PickBazar Template

Fastest e-commerce template built with React, NextJS, TypeScript, GraphQL, Type-GraphQL & Styled-Components. It is effortless to use, and developers used GraphQL and type-GraphQL, you can build your schema very easily. GraphQL Playground makes its own documentation, and your front-end team will love using it. Creating an online store would be easier than ever.

If you implement this template, then you can increase your sales for sure. For smooth operation and handling a large volume of sell data and tracking orders "PickBazar" would be the most significant choice.

View Demo

Why Use React PickBazar Shopping Template?

Developed with Bleeding Edge Technology for the highly scalable project.

Shop Front

• Next JS, React Apollo and GraphQL are used.
• All components are written in TypeScript.
• Monorepo Supported with Lerna Configuration.
• SSR support for building highly scalable apps.

Shop Dashboard

• Create React App (CRA), React Apollo and GraphQL are used.
• Components are written in TypeScript and Base Web React UI Framework.
• Easily create products in the backend.
• React Hooks Form for form handling.

Create your Next Ecommerce App with Pickbazar.

Create a beautiful commerce experience using the universal server-rendered Next.js framework. It's very easy to use, RedQ Inc. used GraphQL and type-GraphQL.

Easy payment integration with Stripe!

Stripe is the best software platform for running an internet business. Stripe builds the most powerful and flexible tools for internet commerce. RedQ Inc. integrates Stripe with its PickBazar template.

React PickBazar Template  Features

Bleeding Edge Technology

Next JS, React Apollo and GraphQL are used to build a super-fast e-commerce project.

React Apollo

React Apollo allows you to fetch data from your GraphQL server and use it in building complex and reactive UIs.

Fast Performance

Optimized for smaller build size, faster dev compilation and dozens of other improvements.

Built in Components

Components are written in TypeScript and Base Web React UI Framework. Components are easy to understand.

Ready for Deployment

The developer RedQ Inc. has made the deployment process clean and simple. You can deploy the template with Now.sh.

Elite Author Support

RedQ Inc. can assure you the proper Elite Author support and faster response for their products.

Getting Started & Installation

For getting started with the template you have to follow the below procedure. First, navigate to the PickBazar

directory. Then run below command for getting started with a specific part.

// on pickbazar directory yarn

Admin

For starting the admin dashboard part with corresponding API data run below commands.

// for dev mode run below command yarn dev:admin

// for production mode run below command yarn build: admin

Shop

Configure Stripe API key in the /packages/shop/next.config.js. In the env section set STRIPE_PUBLIC_KEY to your stripe public key.

For starting the shop part with the corresponding API run below commands.

// for dev mode run below command yarn dev:shop

// for production mode run below command yarn build:shop

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

Admin

// build admin for production yarn build: admin

// run shop API which in needed for local testing yarn dev:API-admin

// start admin in production yarn serve:admin

Shop

// build shop for production yarn build:shop

// run shop API which in needed for local testing yarn dev:api-shop

// start shop in production yarn serve:shop

Folder Structure & Customization

/packages/admin: In this portion all the admin dashboard related coding and functions.

/packages/shop: All the shop related coding and functions.

/packages/api : API related code for both admin and shop section.

admin related API codes are in admin folder.

shop related codes are in the shop folder.

Configuration & Deployment

now.sh

If you want to host the template in now.sh then follow the below command.

API

• Navigate to packages/API
• Now run below command

now

Admin

• After deploying the API you will get the API endpoint URL. Put that URL in the packages/admin/.env

REACT_APP_API_URL={put_your_api_url_here}/admin/graphql;

• Navigate to packages/admin
• Now run below command

now

Shop

• After deploying the API you will get the API endpoint URL. Put that URL in the

  packages/shop/next.config.js

env: { STRIPE_PUBLIC_KEY: 'put_your_stripe_public_key',

API_URL: '{put_your_api_url_here.}/shop/graphql', },

• Navigate to packages/shop

• Now run below command

now

Conclusion

Now we have come to the ending point of this article. We hope you have an idea about the PickBazar react GraphQL eCommerce shopping template. Without any hesitation, you can use this shopping template for your eCommerce store. Thank you very much for reading this article. If you really like this article, then please leave a comment on the comment section or give us a good rating. That is all for today. Have a beautiful day!

Buy Template

Read More: 10 Best React Redux Admin Dashboard 2020