Join us on
Star us on
Get Started
Slack
GitHub
Get Started
v2.5 (latest) v2.2 (stable) v2.1 (earlier version) v2.0 (earlier version) v1.3 (earlier version)
  • GET STARTED
    • Quick start
      • 1. Install YugabyteDB
      • 2. Create a local cluster
      • 3. Explore YSQL
      • 4. Build an application
        • Java
        • NodeJS
        • Go
        • Python
        • Ruby
        • C#
        • PHP
        • C++
        • C
    • Introduction
    • Explore core
      • 1. Linear scalability
      • 2. Fault tolerance
      • 3. Global distribution
      • 4. Auto sharding
      • 5. Tunable reads
      • 6. Observability
  • USER GUIDES
    • Develop
      • Learn app development
        • 1. SQL vs NoSQL
        • 2. Data modeling
        • 3. Data types
        • 4. ACID transactions
        • 5. Aggregations
        • 6. Batch operations
        • 7. Date and time
        • 8. Strings and text
      • Ecosystem integrations
        • Apache Kafka
        • Apache Spark
        • JanusGraph
        • KairosDB
        • Presto
        • Metabase
      • Real-world examples
        • E-Commerce App
        • IoT Fleet Management
        • Retail Analytics
      • Explore sample applications
    • Deploy
      • Checklist
      • Manual deployment
        • 1. System configuration
        • 2. Install software
        • 3. Start YB-Masters
        • 4. Start YB-TServers
        • 5. Verify deployment
      • Kubernetes
        • Helm Chart
        • Helm configuration
        • Local SSD
      • Docker
      • Public clouds
        • Amazon Web Services
        • Google Cloud Platform
        • Microsoft Azure
      • Pivotal Cloud Foundry
      • Yugabyte Platform
        • 1. Prepare cloud environment
        • 2. Install Admin Console
        • 3. Configure Admin Console
        • 4. Configure Cloud Providers
    • Benchmark
      • Performance
      • YCSB
      • Large datasets
    • Secure
      • Security checklist
      • Authentication
      • Authorization
        • 1. RBAC Model
        • 2. Create Roles
        • 3. Grant permissions
      • TLS encryption
        • 1. Prepare nodes
        • 2. Server-server encryption
        • 3. Client-server encryption
        • 4. Connect to cluster
      • Encryption at Rest
    • Manage
      • Backup and restore
        • Backing up data
        • Restoring data
      • Data migration
        • Bulk import
        • Bulk export
      • Change cluster config
      • Upgrade deployment
      • Diagnostics reporting
      • Yugabyte Platform
        • Create universe - Multi-zone
        • Create universe - Multi-region
        • Edit universe
        • Edit config flags
        • Health checking and alerts
        • Create and edit instance tags
        • Node status and actions
        • Read replicas
        • Back up and restore
        • Upgrade universe
        • Delete universe
    • Troubleshoot
      • Troubleshooting overview
      • Cluster level issues
        • YCQL connection issues
        • YEDIS connection Issues
      • Node level issues
        • Check processes
        • Inspect logs
        • System statistics
      • Yugabyte Platform
        • Troubleshoot universes
  • REFERENCE
    • APIs
      • YSQL
        • Statements
          • ABORT
          • ALTER DATABASE
          • ALTER DOMAIN
          • ALTER TABLE
          • BEGIN
          • COMMENT
          • COMMIT
          • COPY
          • CREATE DATABASE
          • CREATE DOMAIN
          • CREATE INDEX
          • CREATE SCHEMA
          • CREATE SEQUENCE
          • CREATE TABLE
          • CREATE TABLE AS
          • CREATE TYPE
          • CREATE USER
          • CREATE VIEW
          • DEALLOCATE
          • DELETE
          • DROP DATABASE
          • DROP DOMAIN
          • DROP SEQUENCE
          • DROP TABLE
          • DROP TYPE
          • END
          • EXECUTE
          • EXPLAIN
          • GRANT
          • INSERT
          • LOCK
          • PREPARE
          • RESET
          • REVOKE
          • ROLLBACK
          • SELECT
          • SET
          • SET CONSTRAINTS
          • SET TRANSACTION
          • SHOW
          • SHOW TRANSACTION
          • TRUNCATE
          • UPDATE
        • Data types
          • Binary
          • Boolean
          • Character
          • Date-time
          • Json
          • Money
          • Numeric
          • Serial
          • UUID
        • Expressions
          • currval()
          • lastval()
          • nextval()
        • Keywords
        • Reserved Names
      • YCQL
        • Quick Start YCQL
        • ALTER KEYSPACE
        • ALTER ROLE
        • ALTER TABLE
        • CREATE INDEX
        • CREATE KEYSPACE
        • CREATE ROLE
        • CREATE TABLE
        • CREATE TYPE
        • DROP INDEX
        • DROP KEYSPACE
        • DROP ROLE
        • DROP TABLE
        • DROP TYPE
        • GRANT PERMISSION
        • GRANT ROLE
        • REVOKE PERMISSION
        • REVOKE ROLE
        • USE
        • INSERT
        • SELECT
        • UPDATE
        • DELETE
        • TRANSACTION
        • TRUNCATE
        • Simple Value
        • Subscript
        • Function Call
        • Operator Call
        • BLOB
        • BOOLEAN
        • MAP, SET, LIST
        • FROZEN
        • INET
        • Integer & Counter
        • Non-Integer
        • TEXT
        • Date & Time Types
        • UUID & TIMEUUID
        • JSONB
        • Date and time functions
    • CLIs
      • yb-ctl
      • yb-docker-ctl
      • yb-master
      • yb-tserver
      • ysqlsh
      • cqlsh
    • Sample data
      • Chinook
      • Northwind
      • PgExercises
      • SportsDB
    • Tools
      • TablePlus
  • RELEASES
    • Release history
      • v1.3.1
      • v1.3.0
      • v1.2.12
      • v1.2.11
      • v1.2.10
      • v1.2.9
      • v1.2.8
      • v1.2.6
      • v1.2.5
      • v1.2.4
  • CONCEPTS
    • Architecture
      • Design goals
      • Layered architecture
      • Basic concepts
        • Universe
        • YB-TServer
        • YB-Master
        • Acknowledgements
      • Query layer
        • Overview
      • DocDB store
        • Sharding
        • Replication
        • Persistence
        • Performance
      • DocDB transactions
        • Isolation Levels
        • Single row transactions
        • Distributed transactions
        • Transactional IO path
  • FAQ
    • Comparisons
      • CockroachDB
      • Google Cloud Spanner
      • MongoDB
      • FoundationDB
      • Amazon DynamoDB
      • Azure Cosmos DB
      • Apache Cassandra
      • Redis in-memory store
      • Apache HBase
    • Other FAQs
      • Product
      • Architecture
      • Yugabyte Platform
      • API compatibility
  • CONTRIBUTOR GUIDES
    • Get involved
  • Misc
    • YEDIS
      • Quick start
      • Develop
        • Client drivers
          • C
          • C++
          • C#
          • Go
          • Java
          • NodeJS
          • Python
      • API reference
        • APPEND
        • AUTH
        • CONFIG
        • CREATEDB
        • DELETEDB
        • LISTDB
        • SELECT
        • DEL
        • ECHO
        • EXISTS
        • EXPIRE
        • EXPIREAT
        • FLUSHALL
        • FLUSHDB
        • GET
        • GETRANGE
        • GETSET
        • HDEL
        • HEXISTS
        • HGET
        • HGETALL
        • HINCRBY
        • HKEYS
        • HLEN
        • HMGET
        • HMSET
        • HSET
        • HSTRLEN
        • HVALS
        • INCR
        • INCRBY
        • KEYS
        • MONITOR
        • PEXPIRE
        • PEXPIREAT
        • PTTL
        • ROLE
        • SADD
        • SCARD
        • RENAME
        • SET
        • SETEX
        • PSETEX
        • SETRANGE
        • SISMEMBER
        • SMEMBERS
        • SREM
        • STRLEN
        • ZRANGE
        • TSADD
        • TSCARD
        • TSGET
        • TSLASTN
        • TSRANGEBYTIME
        • TSREM
        • TSREVRANGEBYTIME
        • TTL
        • ZADD
        • ZCARD
        • ZRANGEBYSCORE
        • ZREM
        • ZREVRANGE
        • ZSCORE
        • PUBSUB
        • PUBLISH
        • SUBSCRIBE
        • UNSUBSCRIBE
        • PSUBSCRIBE
        • PUNSUBSCRIBE
> Develop > Real-world examples >

E-Commerce App

Attention

This page documents an earlier version. Go to the latest (v2.3) version.
  • Overview
  • Features
    • Product catalog management
    • Product catalog display
    • Other features coming soon
  • Architecture
    • Product catalog management
    • Product catalog display
  • Summary

Overview

Yugastore is a sample, full-stack online bookstore, or more generally, an e-commerce app built on top of YugabyteDB. It is a cloud native, distributed app built on a microservices architecture. YugabyteDB simplifies the development of such apps by providing a SQL-like API (based on Cassandra Query Language) and a Redis-API on top of a common database. The app can be deployed and run on VMs or using StatefulSets in Kubernetes.

You can browse the Yugastore source-code on GitHub. It is fully open-source.

Yugastore app screenshot

Features

Product catalog management

A product catalog is a database of information about all the products in the online store. Operations such as inserting new products, updating existing products and listing all the products in the online store should be efficiently supported.

Each product could have a lot of associated attributes, such as title, pricing, number of reviews, etc. It should be possible to add static and dynamic attributes for each product. Static attributes do not change very often, for example the title and description of a book. Dynamic attributes change frequently, for example the user rating for the product or number of reviews it has received.

Product catalog display

The product catalog display is the “web” layer which displays different views of the product catalog to end users.

Other features coming soon

The following features will be added as the app evolves over time:

  • shopping cart
  • order history tracking
  • pageview tracking
  • user personalization

Architecture

This app is built using the following stack:

  • Frontend: React
  • Backend: Express and NodeJS
  • Database: YugabyteDB

YERN stack

All the source for the various components can be found in the following locations:

  • React UI

    • You can see all the React routes in index.js.
    • You can find the components in the ui/src/components subdirectory.
  • Express / NodeJS webframework

    • You can find all the Rest API routes for products in routes/product.js.
    • You can find the web framework setup in app.js.
  • Models

    • The sample data is present in models/products.json
    • The data loader is in the file models/yugabyte/db_init.js.

The sections below describe the architecture / data model for the various features in the app.

Product catalog management

The inventory of products is modeled as a table using the Cassandra-compatible YCQL API. Each product has a unique id which is an integer in this example. The product id is the primary key partition column. This ensures that all the data for one product (identified by its product id) is co-located in the database.

cqlsh> DESCRIBE TABLE yugastore.products;

CREATE TABLE yugastore.products (
    id int PRIMARY KEY,
    name text,
    description text,
    price double,
    author text,
    type text,
    img text,
    category text,
    num_reviews int,
    total_stars int
);

The dynamic attributes for rendering sorted views (such as highly rated or most reviewed) are stored in Redis sorted sets.

127.0.0.1:6379> ZADD allproducts:num_stars <num-stars> <product-id>

The sample list of products are in the models/sample_data.json file in the codebase. The file has entries such as the following:

{
  "products": [
    {
      "id": 1,
      "name": "The Power of HABIT",
      "author": "Charles Duhigg",
      "type": "hardcover",
      ...
      "category": "business"
    },
    {
      "id": 2,
      "name": "Think and Grow Rich",
      "author": "Napoleon Hill",
      "type": "hardcover",
      ...
      "category": "business"
    },
    ...

The db_init.js node script loads the static attributes of the sample data using the following Cassandra batch insert API into YugabyteDB.

insert_batch.push({
  query: insert,
  params: params
});

The dynamic attributes are loaded using the Redis-compatible YEDIS API into YugabyteDB.

ybRedisClient.zadd("allproducts:num_reviews", e.num_reviews, e.id);
ybRedisClient.zadd("allproducts:num_stars", e.num_stars, e.id);
ybRedisClient.zadd("allproducts:num_buys", numBuys, e.id);
ybRedisClient.zadd("allproducts:num_views", numViews, e.id);

Product catalog display

Here we will examine the various display components of the product catalog in detail.

1. Homepage

The homepage is rendered by the App react component. The React route is the following:

<Route exact path="/" component={App} />

It uses the following Rest API to query Express/NodeJS for all the products:

/products

Internally, the following query is executed against the database and the results are rendered.

SELECT * FROM yugastore.products;

2. Top-level category pages

List products that have a given value for the category attribute. This is used to compose views of products grouped by the common categories such as "business books", "mystery books", etc. The links to these pages are displayed on the homepage. The screenshot below shows the links that are the top-level category pages. They form the top nav in the web app.

View by categories

Let us take the example of the business category page.

This is rendered by the Products react component. Here is the react route:

<Route path="/business"
  render={(props) => (
    <Products
      name={"Business Books"}
      query={"category/business"} /> 
  )} />

The component internally uses the following Rest API:

/products/catgory/business

The following query is executed against the database:

SELECT * FROM yugastore.products WHERE category='business';

3. Sorted list views based on dynamic attributes

List products in the descending (or ascending) order of certain frequently updated attributes. Used to build the top navigation bar with entries such as "most reviewed", "highest rated", etc).

View by dynamic attributes

Let us take the example of books with the highest rating as an example.

These product lists are also rendered by the Products react component.

<Route path="/sort/num_stars"
  render={(props) => (
    <Products
      name={"Books with the Highest Rating"}
      query={"sort/num_stars"} /> 
  )} />

The component internally uses the following Rest API:

/products/sort/num_stars

The top 10 product ids sorted in a descending order by their rating is fetched from Redis with the following:

ybRedis.zrevrange("allproducts:num_stars", 0, 10, 'withscores', ...)

Then, a select is issued against each of those product ids with the following query IN query:

SELECT * FROM yugastore.products WHERE id IN ?;

4. Product details view

This view shows all the details of a product. An example product details page for item with id=5 is shown below:

Product details

The React route for this view is ShowProduct:

<Route exact path="/item/:id" component={ShowProduct} />

The component internally uses the following Rest API:

/products/details/5

The following query is executed against the database to fetch all the product details:

SELECT * FROM yugastore.products WHERE id=5;

If we had another table with extended product info, we could fetch data from that table as well and add it into the result. Finally, each time this page is hit, we increment a counter in order to track how many times the current product was viewed.

ybRedis.incrby("pageviews:product:5:count", 1);

Summary

This application is a blue print for building eCommerce and other similar web applications. The instructions to build and run the application, as well as the source code can be found in the Yugastore github repo.

  • Overview
  • Features
    • Product catalog management
    • Product catalog display
    • Other features coming soon
  • Architecture
    • Product catalog management
    • Product catalog display
  • Summary
Ask our community
  • Slack
  • Github
  • Forum
  • StackOverflow
Yugabyte
Contact Us
Copyright © 2017-2020 Yugabyte, Inc. All rights reserved.