↓Skip to main content
Resources for the Modern Web Resources for the Modern Web
  1. All Posts/

ultimate-ecommerce-shop

eCommerce CSS

Production Ready e-commerce Application with PWA

iShop eCommerce is implemented based on NextJS, Angular, and Nodejs. It entirely REST API & And automatically image optimize plus delivers by Cloudinary. On the frontend, I have used React, NextJS TypeScript & Ant Design. The full source code is open. It’s very easy to install and deploy. It’s very fast and PWA supported. I have added good documentation useing swagger and I tried to make everything extendable and reusable so you can edit as your own need. It has full admin support too to maintain and manage your order. Here full source code, Frontend, Admin Panel, and Backend.

Demo LINKS

Panel
README

Swagger API Doc
https://ishopw.herokuapp.com/api/v1/docs

Admin Panel
https://admin-ishop.vercel.app

Web Panel
https://web-ishop.vercel.app

Technology

  • AngularJS
  • NextJS
  • Postgresql
  • React
  • Redux
  • NodeJS
  • TypeScript
  • rxjs
  • typestack
  • routing-controllers
  • PWA
  • Typeorm

Installation

Dillinger requires Node.js( https://nodejs.org/) v10+ and typescript to run.
Install the dependencies and devDependencies and start the server.
Start Core API

cd back-end
npm i
npm start

Start Core Admin

cd admin-panel
npm i
ng serve

Start web-panel

cd web-panel
npm i
npm run dev

Admin Features

  • Complete Authentication
  • Manage Product
  • Manage Category
  • Manage Product
  • Manage Order
  • Manage Order Status
  • Manage Customers
  • Profile Settings
  • Built with Angular,akita

Web Features

  • PWA Supported
  • Fully Server Side Rendering and SSG
  • Authentication
  • Quick add to cart
  • Department based product filtering
  • Product grid
  • Quick Checkout page
  • User Account settings
  • My order
  • Dynamic Banners
  • Brands Filter
  • SEO friendly

Core Technology

  • bcryptjs
  • class-transformer
  • class-validator
  • cloudinary
  • express
  • jsonwebtoken
  • multer
  • nodemailer
  • pg
  • routing-controllers
  • swagger
  • typedi
  • typeorm
  • ng-zorro-antd
  • node.js
  • Typescript

Web Technology

  • sentry
  • antd
  • axios-observable
  • next
  • next-pwa
  • redux
  • rxjs
  • typescript
  • redux-thunk

Admin Technology

  • Angular
  • akita
  • g-zorro-antd
  • typescript
  • karma

Environment

For production environments…

#
  # API DOCS
  #
  PORT = 3000
  UPLOAD_BASE_PUBLIC_PATH = https://xxxxx.xxxxx.com/uploads/

  DB_TYPE = "postgres"
  DB_HOST = "xxxxx.db.xxxxx.com"
  DB_PORT = 5432
  DB_USERNAME = "xxxxx"
  DB_PASSWORD = "xxxxx"
  DB_DATABASE = "xxxxx"
  DB_SYNCHRONIZE = false
  DB_LOGGING = true
  REJECT_UNAUTHORIZED = false
#
# API DOCS
#
  API_PREFIX = "/api/v1/"
  API_TITLE = "iShop"
  API_DESC = "iShop Api V1"
  API_VERSION = 1.0
#
#HEADER
#
  X_REQUEST_ID = CRM-WEB-STAGING
  X_CLIENT_NAME = CRM-WEB
  X_COUNTRY_CODE = BD
  X_CLIENT_VERSION = 1.0

#
#JWT
#
JWTSecret = "xxxxx"
saltRound = 10

#
# Mail Credential
#
MAIL_HOST = "smtp.gmail.com"
MAIL_PORT = 465
MAIL_SECURE = true
MAIL_USER = "xxxxx@gmail.com"
MAIL_PASSWORD = "xxxxx"
MAIL_FROM = "XXX <xxxxx@gmail.com>"


#
# CLOUDINARY config
#
CN_CLOUD_NAME =  xxxxx
CN_API_KEY =  xxxxx
CN_API_SECRET =  xxxxx-xxxxx
CN_ENHANCE_IMAGE_TAG =  true
CN_STATIC_FILE_SUPPORT =  false



↑