• Server API Port: 7000
• Client SHOP Port: 9000
• Client SHOP API Port: 8000
• Client ADMIN Port: 5000
• Client ADMIN API Port: 4000

This is a ecommerce script devided with two parts; one is Client and another one is Server. In the Client we have shop script template develop with Next.js and admin script that develop with React.js. In the Server we have graphql api that develop with Typescript, Apollo Server, and MongoDB as database.

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

For getting started with the template you have to follow the below procedure. First navigate to the client directory. Then run below command for getting started with specific part.

# on client directory
yarn

1. Go to /packages/admin folder.
2. Copy the contents of .env.sample into a new file called .env
3. Put Your Graphql api endpoint in the /packages/admin/.env file's REACT_APP_API_URL key.

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

# for dev mode run below command
yarn dev:admin

1. Go to /packages/shop folder.
2. Copy the contents of .env.local.sample into a new file called .env.local
3. Put Your Stripe public api key in the /packages/shop/.env.local file's NEXT_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

# build admin for production
yarn build:admin => port: 5000

# build api which in needed for local testing
yarn build:api => port: 4000

#start admin in production mode
yarn serve:admin

# build shop for production
yarn build:shop => port: 9000

# build api which in needed for local testing
yarn build:api => port: 8000

# 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

• 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;

• After deploying the api you will get the api endpoint url. Put that url in the packages/shop/.env.local.

NEXT_PUBLIC_STRIPE_PUBLIC_KEY= 'put_your_stripe_public_key'

NEXT_PUBLIC_GRAPHQL_API_ENDPOINT= '{put_your_api_url_here.}/shop/graphql'

We develop our graphql api server with NPM workspace. Tech specification for specific part is given below

• Typescript (Node.js)
• Express
• Apollo Server Express
• Cors
• Graphql
• Mongodb

For getting started with the api server you have to follow the below procedure. First navigate to the server directory. Then run below command for getting started with specific part.

# on server directory
npm install

1. Go to server folder.
2. Copy the contents of .env.example into a new file called .env
3. Put Your configuration in the server/.env file's.
   1. PORT= Give port as 7000. The server will run on this port.
   2. APP_ENV= Set environment local if you have MongoDB on your local machine. If you have MongoDB Atlas then set environment as production.
   3. JWT_SECRET= Give random string here to setup JWT secret key.

If you wish you can also use this configuration for development envoirment.

PORT=7000
APP_ENV=production
DB_NAME=pickbazar
DB_USER=pickbazar
DB_USER_PASSWORD=58iqLgIruPZpNG5s
DB_CLUSTER=cluster0.nneth
JWT_SECRET=welkrjewrrkjdsfdk

Please be sure you already create the database on your local mongodb server.

PORT=7000
APP_ENV=local
DB_NAME=pickbazar
DB_URL=mongodb://localhost:27017
JWT_SECRET=welkrjewrrkjdsfdk

For starting the api server run below commands. The api server will run on http://localhost:7000 and you will find the graphql api on this url http://localhost:7000/api.

You will find API Specification on Graphql playground docs.

# for dev mode run below command
npm run start