From “idea” to TwitterGrade in 3 hours with Meteor
As a tech enthusiast i’m always looking around for the next big idea, some days ago i was doing what usually i do every day, reading story on Medium about people who create something and get fast overexposed without any apparent reason.
The article that took my attention was about a guy who published a simple rails application, made in only 4 hours, that calculate the text complexity on the Twits for a given user. By me this is not the next big idea but for sure its a simple and easy application that i can replicate in almost every language.
In the last few month i was giving some attention to Meteor framework. It looks very easy to understand and almost every needs easy to accomplish. The most important things about Meteor is that it’s based on DDP protocol and use MongoDB as database. I was looking to find a way to test this technology and see how it perform on a production environment so without reinventing the wheel i’ve made the same application, about twitter text complexity in Meteor. Surprisingly it take me less then 3 hours to get a first version in production.
Let’s begin
Thanks to the guy who wrote the article i already know what i need to calculate the text complexity so the problem of finding the right algorithms is already solved. The Flesch Kincaid algorithm is a formula where it’s involved the words length and the numbers of syllables for any word of the sentence. I need a way to calculate it…
Meteor itself doesn’t have a package to make it easy so i started looking in npm repository and found two useful package, flesch-kincaid and syllables. After creating the application i started installing all the needed packages, both from Meteor repository and from npm.
meteor add mrt:twit
meteor add meteorhacks:npmnpm install flesch-kincaid
npm install syllables
Now all the needed package was in place and i can start coding some. Searching and understanding how i can use those package took me about 30 minutes.
The application flow I was thinking was very easy. A simple one page front end with a text input where a user can paste Twitter usernames and a leaderboard below it. On the submit, a call to a remote method where all the logic will be executed and database operation will be performed. Thanks to Meteor this changes to the database will be reflected immediately on all clients and only the result of the method will be presented to the user who called it.
The method is a bit complex because it have to run in async mode and also need to perform some checks if the asked Twitter user is already present in the database. The returned result of the method will contain also information about the leaderboard position. You can take a look to the method on Github page of the project.
When writing and testing the backend i was using a simple interface where only a text input was present and the results was spooled in the Chrome console. To take the remote method working as i want it took me about 45 minutes for the first version. About 1 hour and half are passed so it’s time to move to the frontend.
On a first instance i was thinking to use Bootstrap 3.0 as a CSS framework but soon realized it’s really too much for my page. I think i’m the worst CSS programmer on the earth but trying some Flex property on some and other div elements i got something i liked so decided to go this way. The main template of the page is just
<template name=”twitterform”>
<div class=”my_container”>
<form class=”twitter_name”>
<input type=”text” placeholder=”Twitter account” name=”text”/>
</form> {{#if result}}
{{> resultshow}}
{{/if}}
<hr>
{{>scoreBoard}}
</div>
</template>
And the leaderboard result repeating template was nothing more complex
<template name=”scoreBoard”>
<div class=”lead_container”>
{{#each scores}}
{{> scoreItem item=this index=@index }}
{{/each}}
</div>
</template>Other templates and the complete code of the front end can be seen on the Github page but nothing is more complex of what you see here.
When the frontend was done and after long time (1hr) spent on the CSS the application was ready to be launched. It’s not perfect in any way but it’s just enough to let people using it and give me the chance to see how the database and the application framework perform in a real production environment. Two hours are passed from the first line time i started WebStorm.
Taking it to production
From begin i decided to publish this application on a third level address of my main site and host it on one of my VPS where i already got a MongoDB instance running. The tool used to deploy a Meteor application is Meteor UP (MUP). It’s really easy to use and without too many trouble the application was deployed and ready to be used by anyone in the world. The last thing was about setting up Apache virtual host and the DNS but it take me just some minutes then i started to push the application URL on almost every channel, Twitter for first, Crater.io and my mailing list.
Result
As said at begin for me this is just an experiment to have a better idea on how a Meteor application perform when used in a real production environment. Never was in my mind to make something more. The application of the guy who wrote the article that give me the idea was evolved and took thousands visits every day. It’s better then mine in all way and will remain so, also because mine was nothing more then a side three hours project.
Anyway, the application was used widely in the first day but had some flawless in the algorithm, so in the leaderboard a lot of NaN (not a number) was generated. I had to modify it multiple times and released a new version everytime. At the end of the day the application was stable and about 200 people used it.
As today, about a week is passed, the application never crashed and nothing was changed from the first day. Looks like the Meteor application is responding well but probably the traffic it’s not enough to take in critical situation… I hope this article can drive more to it… like said before i don’t want this application to make me famous or rich, just want to test a possible framework to realize my next big idea….
If you want to take a look at the complete code of the application you can download it from my GitHub page.
The application is available at
http://twittergrade.codetutorial.io
I’ m also sorry for my english :)
