I am a web developer and whether I'm building a custom web app for a marketing agency (or enterprise client), my own freelance clients, or a web page for a product I'm working on (such as this), all of these require creating web pages online in HTML and CSS. I do this dozens of times per year, and spend tens or hundreds of hours per year doing this activity.

I'd like to automate it entirely.

What it does

Vocalize builds web pages in HTML & CSS through natural language. Instead of writing divs and classes, I can simply tell vocalize what I want and it will generate the HTML & CSS for me. I know that I'll likely need to make edits later, so vocalize also offers the raw code absent of convoluting frameworks, libraries, and CMS systems.

Vocalize probably won't code 100% of the app I need - there's simply too much required customization these days. However, if we can generate ~90% of the frontend code (HTML, CSS) with Vocalize, I can run through the final tweaks (I'm a dev after all!). In the end, I'll save myself many hours of work and get my web application live, faster so I can focus on more important challenges.

How I built it

Vocalize is built using several tools in the cloud. There are two backends for various needs. One in Ruby on Rails and one in Node.js. The Node.js application houses react and most of the product you may interact with. Ruby on Rails simply holds data and routes an API. Facebook messenger is integrated to talk through Vocalize through an alternative interface. Vocalize is built from an amalgamation of jquery, bootstrap, postgres, Microsoft and IBM cognitive services, and some other javascript libraries. All apps are deployed to Heroku.

Challenges I ran into

I am new to React (this was an opportunity to learn). It was a little challenging to get up and running at first. The create-react-app example repos from Facebook really help in this area. I have a lot more to learn in the future about React.

Accomplishments that I'm proud of

Talking to computers is kinda cool, but we have alexa and others to have meaningless conversation with. Talking to a computer and having it do something useful is much more exciting.

What I learned

React is really powerful. I knew generally what it was but was unsure of why it was valuable and how one might build with it. This project was a primer in React and its development paradigm and I intend to use it in the future for other projects.

What's next for Vocalize

There are a couple areas where a reasonable effort would yield exceptional progress: First, this platform would benefit from expanding the breadth and fluidity of conversation. This tool simply does keyword matching for dialogue, but using other conversational services will provide a more seamless and dynamic natural language experience. Second, improving the HTML & CSS writing capability of Vocalize would provide a more powerful application. One might imagine this prototype growing to create more dynamic web applications for more complex and customized projects for freelancers, agencies, and the enterprise.

Share this project: