I am happy to announce that very recently I released my first skill for Amazon Alexa called “Good Vibe“. It’s one project that I built from an idea to it’s current state for about a month in my free hours after work. I definitely learned a lot of things in my effort to create a public service like it, and I would like to cover the highlights for it.

The idea

The idea came very recently after I bought an Amazon Echo device, I was looking for a similar skill that I can program how to respond with text or audio on specific queries. I wanted to get my hands dirty on developing a skill for Alexa.

Big influencers for the skill were also good friends of mine Serge and George with whom we were discussing a chat bot that can be easily customized by any user to respond to certain strings parts of a message. This was my intention as well, to be able to customize Alexa, without actually having to write a skill backed by running server or lambda with Python or Node.js.

I started from predefined set of commands responding only text to what Good Vibe is now, supporting any input as commands and responding a mix of text and uploaded and recorded audio. Of course all of this wouldn’t be possible without my wife standing next to me, validating my ideas and supporting me.

The tech stack

The skill by itself is naturally using Amazon’s Lambda service to read and create custom commands to and from database. What’s more interesting to this skill is that I also provide a web app which you can use to manage the commands and additionally create ones with audio.

For the web app, both the UI and backend are JavaScript based. For the UI itself I decided to try the Clarity design system that brings beautiful  and modern components and designs. Although I am trying to keep things very simple in the UI, the fonts the buttons and modal styles are Clarity based.

I do use only the styles of Clarity, without the Angular components. In fact I’ve tried to keep things as simple as possible in technical point of view as well, and not introducing any JS framework or unneeded library, it’s pure JS.

One of the best things the skill offers is also the ability upload an audio file or record one. Here I’d also like to take the opportunity to thank all contributors behind https://wavesurfer-js.org/ that I use it for audio visualization for recording and edit an audio before uploading it. For the microphone recording piece,  https://github.com/mattdiamond/Recorderjs provided big help.

The logo

The logo is something I am really delighted with. It’s not so much of the design, as you can see I wanted it to be closer to the Alexa logo. It is something entirely based on Alexa, that enhances it in a way, this is why we have the 3 squares around it representing that. But what I am mostly happy about is the interactivity of the logo as it’s live, to really bring the feeling of “Vibe” the glowing squares levitate around the Alexa circle.

As with many of the features in “Good Vibe” a great influence for this was my wife. One night I was struggling making the squares around the circle to look more live, as if they really are “vibing”. So while I was complaining how hard this would be, she just said “why not make it animated?”. I was like “wow that’s a great idea!”. But how am I supposed to create an animated logo, with GIF? Definitely not! Such animation of 10+ seconds can result in a very large gif file. Even if we can shrink to a reasonable size, still the question of the quality and transparency stands. So after quickly discarding the gif option, it got me thinking that actually everything I want to create for the logo is possible only with CSS! This way the logo can scale for any device, can have the best quality and is super small in terms of size of resources, smaller than even 1 frame of a gif or a single png file.

Current state and the future

Currently I am pleased with the 30+ users that have tried “Good Vibe”, most of which have defined more than 5 commands and are using it daily.

I am hoping this skill to reach more and more users and bring at least little joy to the ones using it and their close ones. Excited to see what the future holds!

You can try it out by enabling the skill here – https://www.amazon.com/dp/B06VV3F7RM

As well as visiting the web app to manage your commands here – https://alexavibe.com/