https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8ec64069-7bee-485b-94af-48687efea717/28thJan.jpg

Last week we completed the last functional component of our system, started working on the UI code, and clarified our roadmap.


Goals

This week we aim to start reimplementing some of our components to be compatible with a browser environment, complete a basic react UI, and create the architecture that ties all elements together.

<aside> 🎯 **What are we looking to achieve?

  1. Browser-Compatible Code** So far our data processing pipeline, converting VoiceFlow files to our chatbot format, as well as uploading that bot to Twillio, was in Python. We need to produce the same functionality in the Browser-compatible JavaScript environment so that we don't get to create a backend.

2. Basic React Implementation We shouldn't spend our lives studying without an output, so we aim to produce the first draft of a react UI alongside learning how to use it.


3. Putting Things Together The high-level system architecture is simple and clear. But we need to clear out HOW exactly do we connect these components together. That means, define common data structures, functional interfaces, and other requirements.

</aside>


Browser-Compatible Code

Usually and traditionally, we would not go through the hassle of making some admin logic "browser compatible". Particularly given that the natural place for this is in a backend. However, in our case, we do not need to be storing any data anywhere. We just have a data pipeline that loads some things, does some operations, and uploads some other things. No state. Therefore it seems unnecessary to write a backend if all we're doing with it is data formatting.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c119b512-7aa8-4877-ac84-198fd4757937/Untitled.png

Particularly in our case, Twillio happens to have an API client in JavaScript, just the language that we need for frontend execution. Therefore it even seems natural to write our business logic in JavaScript. And if we already have that, why not directly import it on a webpage?

So we set on to do that, and given that we already have one implementation of all logic, we have made some stable progress.

To create this browser-compatible code, it was important to have no part of the script to interact with the file system as well as create a robust API that we and any other developer can interact with Twilio bots on the front-end.

Basic React Implementation

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/91a9f7a9-ecd8-487e-9860-e48fb286727e/Untitled.png

Our frontend developers have worked hard to incorporate the new knowledge of React into some actual application screens. So far we have implemented nearly every screen as part of the MVP (documented here). However, functional components (such as buttons and forms) are not implemented yet.

Putting Things Together

Given that we have decided that all components should reside in a client application, we have enough clarity to plan how exactly will these components coexist, communicate, and coordinate.