Shoppable - E-commerce For Everyone
Tags: redishackathon, node, webdev, opensource
Published: 2022-08-29 20:57:00

## Overview of My Submission
**Shoppable** is A Platform to create an online store for your business. **_Powered by Redis Stack!_**. You can visit it **[here](https://shoppable.amitwani.dev)**

![image](https://user-images.githubusercontent.com/12975481/187288703-1ff8c94f-75d7-4547-b86d-f01959a9511f.png)

## Submission Category: 

My category would be **Microservice Mavens** as this project has 6 decoupled backend microservices and one frontend

### Languages/Technologies Used
**NodeJS**
**Angular**
**Redis Stack** (RedisJSON, RedisSearch, Redis Streams)

## Demo

{% embed https://www.youtube.com/embed/sxY6KHoRkn8 %}

## Additional Info

### Process Flow

- Merchant can register on the platform and create a store
- He can add the items to inventory
- A customer can visit that merchant store
- Customer can purchase items listed by merchant
- Merchant will receive the order and will fulfill it
- Customer will receive notifications regarding the order

### Technical Overview

- There are 6 microservices (merchant, inventory, customer, order, update, file-upload)
- All servers are based on **NodeJS**
- The client is based on **Angular** and **Angular Material**
- An nginx is used to route request to various microservices as a reverse proxy
- Redis Stack is integrated with the help of **[Redis OM](https://github.com/redis/redis-om-node)** and **[Node Redis](https://github.com/redis/node-redis)** NodeJS libraries
- Redis Stack is hosted on Redis Cloud itself
- **RedisJSON**, **RedisSearch** and **Redis Streams** has been used
- **RedisJSON** is used to store JSON documents for various schema such as Merchant, Customer, Product, Order, etc.
- **RedisSearch** is used alongside RedisJSON to search through different repositories
- **Redis Streams** is used for publishing and listening to order updates and send email using **Mailjet** to the customer regarding the update
- Apart from this, **Google Cloud Storage** is also used to store images of the products uploaded by the merchant

### Architecture

![shoppable_architecture](https://user-images.githubusercontent.com/12975481/187291224-8f99a51d-ca8b-4f3c-b312-b051ebcf636c.png)

### Application Screenshots

Merchant Login
![Login](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uij935vwilf4xym8f6uu.png)

Merchant Dashboard
![Merchant Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijwgxci1lhl9v7v9e1i9.png)

Merchant Inventory
![Merchant Inventory](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gjbcr7oxc21oy4omn4qx.png)

Merchant Add/Edit Product
![Merchant Add/Edit Product](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o2b9d3qdlqwm01n7ax0a.png)

Merchant Orders
![Merchant Orders](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b6qw9dhjaje7szbdqief.png)

Store Home

![Store Home](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5cgv45jy2l1ppdlwm81.png)

Product Page

![Product Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/weii8m3xqfyxwj2w9a1i.png)

Cart

![Cart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iksivh2eog79y91fqvgr.png)

Order Details

![Order Details](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ma1kmi75go9u1zro1qsf.png)

Email Notification

![Email Notification](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1skzkpl6a6l7ing76kjk.png)

## Link to Code
More details are available on the GitHub repo:
{% embed https://github.com/mtwn105/Shopable %}

- - - 

* _Check out [Redis OM](https://redis.io/docs/stack/get-started/clients/#high-level-client-libraries), client libraries for working with Redis as a multi-model database._
* _Use [RedisInsight](https://redis.info/redisinsight) to visualize your data in Redis._
* _Sign up for a [free Redis database](https://redis.info/try-free-dev-to)._