Twiliohackathon project - The "Whats-around-me" Twilio app!
Tags: hackathon, twiliohackathon, app
Published: 2020-04-06 16:02:05

**Introduction**

When I saw the Twilio hackathon announcement, I decided that I'd put together an app and participate! So, this is the post to make it official!

**The app**

My idea was to build upon the foundation I had already built over many weeks of work for my "Python recipes" project, using Flask, and adapt it and integrate it with the Twilio API.

I decided to stick with the restaurants theme, but added an interesting twist: geo-location!

![geolocation](https://dev-to-uploads.s3.amazonaws.com/i/t2y7ihzuv3dsf3msgbhv.png)

For this, I'm leveraging the HERE API, that provides great information on several types of locations across the globe. It's quite flexible even when using its free tier.

Essentially the user can receive feedback based on its current location, on restaurants in its neighbourhood, and then a more dedicated SMS will be sent, containing the information about the opening hours of the 5 restaurants close to the user's current location.

It can be a very useful app, for example, if you are visiting a new city or country, and if you want to find some good restaurants nearby, you can then use this app, which will always be tailored to your current location, making it quite interesting, even for usages in different places and times of the day.

**The tech stack and APIs used**

I've written a REST API driven backend, using Python and Flask, enabling me to re-use much of the logic I had written, especially regarding authentication and user registration.

I've used vanilla JavaScript with AJAX and jQuery to handle the glue code and interaction between front and backend, quite old school, but works really well for the scope of this type of apps (and I've been doing Java for so long, that the last time I wrote a full-stack app with other stacks, was around 4 or 5 years ago, still Angular 1...)

Then, each endpoint had specific functionalities, that I tried to split nicely in their own functions where it was logical to do so. The result, is, I believe, a small back-end that's easy to grasp and work with, while letting the APIs do a lot of the work.

In a short summary: 

Back-End:
Python, Flask, MySQL, Pony ORM, Heroku for hosting;

Front-end:
HTML, CSS, JavaScript, jQuery;

APIs:
HERE Location API, Twilio SMS API, SendGrid (for sending registration email)

As a remark, since I did not have any DB add-on configured via Heroku (I assume this costs money), I decided to use the RemoteMySQL service, which is a service that allows to setup up to 3 MySQL databases for free! It's quite interesting and powerful, and I invite everyone to check it out!

This integrated perfectly with Pony ORM and pointing it to connect to this hosted database, essentially gives me the persistence layer I couldn't have with solutions like SQLite for example.

The project falls under the category of:
**Interesting Integrations: an app that integrates Twilio with at least one other API.**

**Work report and progress**

**Day 1:**

Prepared the login and registration logic and screens:

![login](https://dev-to-uploads.s3.amazonaws.com/i/ge88g3esn752x3f0exe3.png)

Wrote the backend code to handle the login logic and registration

**Day 2:**

Focused primarily on getting results to the screen from the HERE API, in the form of JSON responses, tested mainly with Postman:

![Postman](https://dev-to-uploads.s3.amazonaws.com/i/d4uzpaeufthgpy6v5n9v.png)

Once I got the responses working, it meant I could safely integrate the logic within my Flask code, and I also spent some time doing that, especially to ensure that the results in the table view in the front-end read nicely, had to do some JSON indexing manually, which is not the most nice solution, but, it gets the job done and I was happy to see the pieces clicking together nicely, I can say Postman was incredibly useful here.

**Day 3:**

On the third day, I focused on reading documentation for the Twilio app, I fiddled around with test credentials, and eventually, managed to be confident enough to write my SMS as they would be sent to users of the app. Here I decided to do the standard and something new.

Upon confirming the account via the email, the user will receive an SMS welcoming him/her to the app, and explains what further SMS will contain, as well as general app guidelines. This SMS is only sent once, when clicking on the confirmation link on the email. 

After this, the following SMS will be regarding the opening hours of the 5 restaurants closer to your location, and will be sent every time the user attempts to generate a new list of locations. The SMS look like this:

- **Welcome SMS**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bryzf8ncwnuqf41x7qq8.jpg)

(In the current version, spacing and layout have been improved! :) )

As stated above, this SMS will be sent only once, upon account confirmation.

- **The opening hours SMS**

The crown jewel of the functionality of the app lies in its capability to send a location-based SMS to the user containing information regarding which are the opening hours of some restaurants nearby. The structure of this SMS is as follows:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i6tdfr5wc5ycjibvtn2e.jpg)

**Day 4:**

Spent mostly cleaning up code, and setting up a repo clone of my private repo to ensure credentials anonymization.

**Main takeaways**

The main takeways from working these days, which really amount to a few hours maximum, say... 8/10 hours total, is that, if you are really comfortable within not only a language but a stack (in this particular case, Python, combined with Flask, the Pony ORM, Jinja for the templating language), it can enable you to re-use lots of common code from multiple applications and literally use it as scaffold to build new, different apps that leverage the common base which you are so comfortable with, within your own stack. 

This promotion of code reuse from a common framework, can allow you to scaffold entire chunks of related functionality (for e.g. authentication, templating, etc) really quickly, and, when combining that with a good deployment platform (Heroku in my case, since it's trivial to setup a gunicorn server there), it can enable you to go from 0 to a live, production-deployed web app in a matter of hours! 

My own personal challenge for the future will be to be able to achieve such flexibility with a more current, up-to-date tech stack and deployment platforms, combining for example, Java, Spring, Docker and finding an hosting service as powerful as Heroku that will allow me to seamlessly deploy an app to production for free*. 

(*) - free for very low to no traffic, obviously.

**Conclusion**

Over the next few days, I will focus on adding a nice README.md to the cloned repo, and hope for a "green-light" check from someone from the dev.to team to tell me that my submission is a valid one :)

**Link to repo: https://github.com/bruno-oliveira/twilioHackathon-whats-around-me**

**Link to app: https://whats-around-me.herokuapp.com**