Twiliohackathon Project Part 1 - The Setup

The Problem

In a lot of countries, it is easy to order groceries online. You need a PC/Laptop/smartphone and some online banking or at least a credit card.
Easy right? Yes, for it is because you have access to an internet-connected device and also know how to use it.

What is the old lady that lives on the first floor? Maybe she has a family, and her grandson can bring her all the groceries she needs!

What if not? What if she does not know how to order things online? And no its not her problem it is a problem we all can have. This old grandma/grandpa can be you in 40 years.

The solution

Most grandma's and grandpa's know how to use the phone!
Because you think right now that you should call them more often ;)

Also, SMS is for most people more comfortable to use than installing some messenger from some store. All phones have an SMS app installed.

What I want to explore is how we can use that technology on the customer side so we can automate this for groceries stores.

The store owner should have an interface to see the order and react and fulfil the order.

We will explore the details together during this hackathon. I'm not sure entirely about the flow of the ordering. So things can change.

This is why this is more documentation than a tutorial. It still will have tutorial elements.

The tech stack

Frontend

I also want to see this as a challenge and build the frontend with Angular 9. The last time I build something with Angular, it was Javascript, and I think version 2 was released, but everybody was still using 1.

The project will be written in Typescript where possible.

As the component library, we will use Angular Material. Let's see how good has Google implemented its own Design specifications.

Backend

So what looks like Angular and has a lot of concepts in common? Yes, Nest(JS). We will use NestJS for the backend.

I always wanted to build a more significant project with Nestjs. So I thought this is a good chance of doing it.

It also uses TypeScript so yeah one language to rule them all.

For the DB I'm not sure yet, but it will be either MongoDB or some SQL DB.

This depends a little bit on what works best with the Twilio API.

Twilio API

So I took a look at the API and which one we could use.
I think it will be a mix between the conversation API, Voice API and Autopilot.

The conversation API can get messages from SMS, MMS and Messanger Apps.
The Voice API can receive calls
and Autopilot lets you build Chatbots for both text messages and voice.

I just looked and played around with the API. So this can change, or maybe we don't even need all of them.

Code

Of course, the code will be open source and under the MIT licence.
You can find the repository here:
https://github.com/lampewebdev/twiliohackathon2020

Right now, there is not much.

I just initialized the frontend and backend with some extra packages.
If you want to set up the project on your own here is how you can do it:

First, install the following packages globally

sudo npm i twilio @nestjs/cli @angularcli -g

or

yarn global add twilio @nestjs/cli @angularcli

Second, clone the repo and change into it

git clone https://github.com/lampewebdev/twiliohackathon2020.git
cd twiliohackathon2020

Now you need to install the npm packages in both folders the backend and frontend.

cd frontend/
npm i
cd ../backend/
npm i
cd ..

It should install the npm packages in both folders.

You can now start the frontend in one Terminal with:

cd frontend
npm start

Now you should be able to reach the frontend on localhost:4200.
Open a second Terminal window and navigate to the backend folder.
For me, this is the home directory where I have created the hackathon folder.

cd ~/twiliohackathon2020/backend/
npm start

This should start the backend on port 3000.
Open the third Terminal and enter

curl localhost:3000

This should return Hello World!

Comment down below!
Do you like the idea?
What would you change?

Don't forget to follow to not miss the next update!

👋Say Hello! Instagram | Twitter | LinkedIn | Medium | Twitch | YouTube