Tuesday, October 22, 2019

Flamingo



Quite a while ago me and Johnny started a project called Flamingo, a very simple vocabulary memorizer, our apps usually have 50 to 100 words, we try to pick the most used words and phrases in each language.
The idea is simple: behind the scenes there is a roster of 10 words from which they are picked randomly, the better you know a word it's less likely to show up, that way words that you have trouble with are more likely to show up, once you answered correctly enough times the word is removed from the roster and the next one comes in.



Technical Stuff

Flamingo went through quite a lot of mutations, starting with Java for Android Native, then to VueJS with Cordova to eventually Svelte which is by far my favorite JavaScript framework to date.
We also automated pretty much anything we could, since all the applications are more or less the same we were able to automate 99% of the process of publishing a new language, besides the actual content (words and phrases) everything else was automated, including:

Our setup had a single git repo for the sources and scripts, and a Google Drive folder for app specific assets (word database, graphics, build files, etc...)

Our Google Drive folder

In order to make a new app we used a grunt script that would do the following:
  • Use SoundOfText to scrape audio files.
  • Generate graphics - icons,store graphics and screenshots.
  • Copy relevant files from our Google Drive folder into the workspace.
  • Configure some variables in the code (app name, adsense ids, etc...)
  • Build app and run some tests.
At this point if everything looked fine we would run another script that would upload and publish the app in the store and voila! we have published a new app!

Wednesday, September 6, 2017

Mixtape!


I'm very excited to show you my latest creation - Mixtape!

Mixtape is an idea I've had on my mind for quite a while, it's a web app that allows you to create and share a playlist in real-time. Perfect for house parties or the office, the idea is that anyone who joins your station can add songs to the playlist, so you won't ever need to beg the DJ to play your song, it's a new form of music democracy!

It works like this: you open a station and then share it with your friends. You can do this by either giving them the 4 digit code, a link and even by a QR code :) Once they join they can add songs and take part in the DJing experience.

So no more nervously asking for your fav 80s song, or pestering the DJ until they listen to you - now you just add your song to the playlist, sit back and chill.

Mixtape works everywhere - at home, on your roof terrace, in a bar, in a club/ Just grab the station code and start adding/ Oh, and you can view the earlier songs on the playlist too, so no more need for Shazaam :)

Techincal stuff:
Mixtape was created using Vuejs, Node, Express and a mix of Javascript libraries, it was very important for me to make the user experience rapid, no login (which is annoying for the user) and no user database (which is a lot of work to maintain), all the data is cached on the server in a Javascript object, users are identified using FingerprintJS, the only reason i have any identification at all is to prevent users from spamming the station with songs, each user have to wait 90 seconds before adding another song to the list.

Currently i'm using Heroku's free tier server so the server will reset after some time when unused, clearing all the old stations.

Client / Server communication is implemented using Socket.IO which makes everything work super fast, when adding a song to the playlist all clients will have their list updated immediately which is really cool.

Mixtape also has a very cool fader, i made it using 2 youtube players imposed one over the other, fading in the volume and the opacity of the players.

You can even fork the source code here :) Enjoy!