Fastest E-commerce template built with React, NextJS, TypeScript, GraphQL, Type-GraphQL & Styled-Components. Its very easy to use, we used graphql and type-graphql, you can build your schema very easily. GraphQL playground makes it’s own documentation, your frontend team will love using it.
We have used monorepo folder structure with Yarn Workspace. In our template we have three different part Admin Dashboard, Shop and API. Tech specification for specific part is given below
- CRA
- Apollo
- BaseUI
- Typescript
- React Hook Form
- NextJs
- Apollo
- Typescript
- Styled Components
- Stripe Integration
- Formik
- GraphQL
- Type GraphQL
- SWR
- NextJs
- Typescript ...
For getting started with the template you have to follow the below procedure. First to the pickbazar
directory. Then run below command for getting started with specific part.
# on pickbazar directory
yarn
For starting the admin dashboard part with corresponding api data run below commands.
# for dev mode run below command
yarn dev:admin
- Go to
/packages/shop
folder. - Copy the contents of
.env.local.sample
into a new file called.env.local
- Put Your Stripe public api key in the
/packages/shop/.env.local
file'sNEXT_PUBLIC_STRIPE_PUBLIC_KEY
key.
For starting the shop part with corresponding api run below commands.
# for dev mode run below command
yarn dev:shop
- Go to
/packages/shop-rest
folder. - Copy the contents of
.env.local.sample
into a new file called.env.local
- Put Your Stripe public api key in the
/packages/shop-rest/.env.local
file'sNEXT_PUBLIC_STRIPE_PUBLIC_KEY
key.
For starting the shop-rest part with corresponding api run below commands.
# for dev mode run below command
yarn dev:shop-rest
NOTE: For shop-rest we didn't provide any actual rest api integration we use SWR hook pattern and fetch data from public json. you need to edit those hook to integrate your actual API end point. please go to packages/shop-rest/src/data
folder for those hooks. also need to implement load more functionality by your self.
If you want to test your production build admin or shop in local environment then run the below commands.
# build admin for production
yarn build:admin
# build api which in needed for local testing
yarn build:api
#start admin in production mode
yarn serve:admin
# build shop for production
yarn build:shop
# build api which in needed for local testing
yarn build:api
# start shop in production mode
yarn serve:shop
/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 shop
folder
vercel.com (previously known as now.sh)
If you want to host the template in vercel.com then follow the below command
- to
packages/api
- Now run below command
vercel
- After deploying the api you will get the api endpoint url. Put that url in the
packages/admin/.env
- also need to put it within
vercel.json
.
REACT_APP_API_URL={put_your_api_url_here}/admin/graphql;
- to
packages/admin
- Now run below command
vercel
- After deploying the api you will get the api endpoint url. Put that url in the
packages/shop/.env.local
andvercel.json
file.
NEXT_PUBLIC_STRIPE_PUBLIC_KEY= 'put_your_stripe_public_key'
NEXT_PUBLIC_GRAPHQL_API_ENDPOINT= '{put_your_api_url_here.}/shop/graphql'
- to
packages/shop
- Now run below command
vercel
Note:
Please follow the above (shop) deployment procedure.
NOTE: for deploying to vercel
you need to install vercel-cli
on your machine for more information please visit here
** Note ** For more details information please visit our online documentation here