Redis Hackathon Submission for Whatstore App
Tags: redishackathon
Published: 2022-08-28 23:12:33


### Overview of My Submission
[Link to the Repo](https://github.com/davidedelpapa/whatstore)

*Whatstore* is an ecommerce store. However, this is no ordinary web-based store, *Whatstore* is a chatbot based on Meta Whatsapp Business platform.

This has been chosen because many people do not have (easy) access to a computer, or the possibility (and willingness) to browse for an e-commerce, even on mobile. Think for example at the elderly. Instead, many people know and use IM apps, such as Whatsapp, to communicate with friends and family. Many still save their local groceries, pharmacy, or pizza store phone numbers, and text them often to order their groceries. During the Covid 19 pandemic, this has been for many the best option to deal with the rules and needs of social distancing.

However, many times the little stores are not able to attend all the customers by phone. This actually happened to me one evening, when I phoned four different pizza stores to try to get an order, and had to phone each repeatedly, until at last one of them attended me. This brought me to think that orders could be more efficient if we could just use a chatbot. But, where I am located not every grocery is even on socials, let alone have the funds or time necessary to set up such an interface. It came to my mind that everybody here around passes a lot of time answering to texts (and here around Whatsapp is the most used platform), so why not to take advantage of this? 

This is the spark that brought me to implement this project.
For the project I actually created data for a fake pizza store, set in a touristic location nearby (where I actually am sure there are no pizza stores, just not to incur in some copyright violations). So when you install this app, you can actually start to order my favorite pizzas!

### Submission Category: 

Microservice Mavens

### Language Used

Node.js

### Link to Code

{% embed https://github.com/davidedelpapa/whatstore %}

### Additional Resources / Info

I'm using Node.js, NPM, [ngrok](https://ngrok.com/), [express](https://www.npmjs.com/package/express) and [whatsappcloudapi_wrapper](https://www.npmjs.com/package/whatsappcloudapi_wrapper), as well as [pdfkit](https://www.npmjs.com/package/pdfkit), [uuid](https://www.npmjs.com/package/uuid), [node-fetch v.2](https://www.npmjs.com/package/node-fetch), [loglevel](https://www.npmjs.com/package/loglevel).

And of course, [Redis](https://www.npmjs.com/package/redis) and [RedisJSON](https://www.npmjs.com/package/redis)

This is the actual workflow of the app:

* First you need to ping the business number from you number, it does not matter what you write. It will answer with a choice to either view the products or to speak to a human.

![App: Init Message](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bhva4c4a7tpqoen26d0g.png)

* If you choose "Speak to a human" it sends a vCard for the customer care contact; otherwise the app will present to you the product categories choice.

![App: Select Product Categories](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2tkryj2q5psbxons4zne.png)

* Now you can choose a category and then be presented with a choice of products in that category.

![App: Select Product](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sfnphgm0dvszkadge8a8.png)

* Here we selected the classic pizzas, and now we are going to select a "Salame(Pepperoni)"
* We are presented with the details of our selection, and we can now choose to add the product to the cart or browse for some more products. Let's add it to the cart.

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

* We can now review the cart, before checking out, or browse some more products to add. Let's review and checkout!

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

* We can also modify the cart before checkout

![App: checkout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3bi7c37m6g6v0oxx1wjg.png)

* After checking out, the app notifies the seller of a new incoming order, and presents to the buyer some options to either again talk to a human or browse more products to shop.

We have accomplished our purchase!

* On the seller side, the seller number gets notified of the incoming order, together with all the info needed to prepare the order. The seller has the possibility  to send the buyer a notification of when the order will be ready, or fulfill the order right away. Finally the seller can review all pending orders.

![App: Seller side](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zjr7ccgz9trz8nxxgnt4.png)

![App: Seller side again](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/92t82ppb493lo1u2vtvy.png)

* At any time the seller can ping their app to check how many pending order are present and view each of them.
* Finally, when the order is fulfilled (ideally when the buyer comes to pick up the orders), the app saves the purchased order to the database as a purchase order. This could be used for statistics.

### Collaborators

Just me, [davidedelpapa - Davide Del Papa](https://dev.to/davidedelpapa).