Sharing Love in 48 Hours
Fun website made during hackathon
My name is Perth. Life of blogger and also developer like me has a daily routine to find news about web development world. There is not a single day goes by without reading something new about the web industry.
The web is changing everyday, and I always thrilled to think about what will come to the web tomorrow.
One day, I opened the email from my subscribed website. There was a link to the upcoming hackathon, called ‘Static Showdown’.
Static Showdown is a ‘worldwide 48 hour hackathon featuring static web apps’. Static web apps? Well, it was new vocabulary for me.
I read more information and found that ‘Static web apps’ is the new trend in website development that focused on making website with pure HTML / CSS / JS and online web services. (Not 100% accurate definition, I would say)
I was excited just by reading the rules and information about this hackathon. Building some fun project in 48 hours, while competing with worldwide team sounds very nerdy and sexy at the same time.
Finding the comrades
I checked my calendar and decided to join Static Showdown right away. Since I am developer and not so good at design, I asked my girlfriend Nat who is a skilled web designer to join the team.
Static Showdown allowed up to 4 people to team up. I need 2 more people.
I asked Mac, who is extremely skilled front-end developer in my opinion, to join the team. He helped me find the last member, and we found Book.
Book is working as back-end developer in the same startup as Mac. He could help the team writing Javascript that needs to connect to database service.
Luckily, all of us are at the same age (Or at least our mindset are at the same age). This helps a lot when working together and make things a lot easier.
Planning for hackathon
No specific topic was set from Static Showdown. We could built anything as long as it used only static technology (HTML / CSS / Javascript).
We were allowed to plan before the competition, but cannot create any asset (code and graphics) before 48-hours hackathon time.
We started to think about what to do 2 weeks before the competition. But not until there was only 3 days left that we figured out what kind of project we would do.
Since the hackathon day was 8-9 February, Nat suggested we could make a web app about Valentine’s day.
There were many ideas we talked about during planning; web app to send love letter, web app that user can put message in ‘love locker’ etc. The final idea is to create some INFOGRAPHIC about love.
We want to make it fun and viral. People can share the result to others / to someone they love, and it has to be usable by both the single and couple.
From the above statements, we finally came up with this solid idea we want to build:
The web app that will generate lovely infographic between user’s relationship and his/her loved one.
Therefore, we named this project ‘Between Stories’.
We thought it would be fun to use, and can be played with girlfriend , boyfriend, or even family members.
The information about relationship will be taken from Facebook, which is the most popular social network at the time and contains so much stuffs we can use through their API.
Static Showdown — Day 1
Static Showdown started at 7:00 AM of Saturday in Thailand. I woke up at 5:30 AM on Saturday and suddenly heard the bad news.
Nat was sick. She needed to see the doctor.
I took her to hospital and let my team know we might be a little late. We got the medicine and took a taxi to Jitta’s work space. Jitta is a startup where developers in our team, Mac and Book, are working. Thanks to the co-founder who allowed us to use the space.
We started by discussing about mood and tone of this web app. We wanted it to be fun and friendly, so we chose the colorful cartoon-ish illustration for this project. Nat is great illustration and could handle this well.
Since we have 3 developers in our team, I took the responsibility to do all HTML / CSS from the design by Nat, and also building mood and tone of this web app using CSS3 animation.
Book took the responsibility to do back-end stuff using front-end codes (Sounds confusing?). He coded the Javascript to connect our web app with Facebook, and also storing / reading data on Firebase.
Mac was the most experienced developer in our team. He was freelance PHP programmer who somehow turned into front-end developer at Jitta. He was responsible for coding complicated user interface that connected with Book’s back-end system.
Right: Mac is watching Youtube (jk :P)
(Photo by Tor)
We started to see what others were doing from Twitter hashtag #staticshowdown, Static Showdown IRC chatroom, and also on Static Showdown website itself. We were very excited and inspired by worldwide developers who were competing in this hackathon.
Since Jitta’s work space is sharing with another companies, 7 Republic and Webiz, there were few people visited during the weekend. It is good to have a little break and talk after several hours of working.
We were quite confident this project could be done in 48 hours (But we were wrong). We did made good progress in the first day though.
For the first day, Nat finished designing more than half of the project already. I did HTML / CSS and animation for half of her designs. Book and Mac finished Facebook login integration and some user interface components.
We called it a day at 1 AM. However, Book and Mac is the night owls and more comfortable working at night. They worked til 6 AM on Sunday and then took a long sleep.
Static Showdown — Day 2
Nat and me took a taxi to Jitta’s work space around 8 AM. We found that Mac and Book were sleeping after their long hours of working.
There were many teams already finished their submission. Our web app was a long way from the finishing point though.
Nat finished her designs at 5 PM and went to sleep. She put a lot of effort to make this happened while she was still sick. Now the tasks that left were all developers’.
We have to admit that 48 hours are never enough for building great web app. At 9 PM on Sunday, we have only 10 hours left with many things left to be done.
(Photo by Tor)
Mac was doing very good job at user interface using his favorite tool, React. Book was also doing great at pulling large amount of information from Facebook API. Thanks to high speed internet at Jitta, we were able to get the information quite fast (which was backfired to us later on, because real users’ internet were not as fast as us).
Firebase was our choice for storing / reading data in Between Stories. It was fast during development time, but the downside is that their free plan gave only 50 max connections and 5 GB data transfer. We were worried this might not be enough for large amount of users that might be using, and we wouldn’t want the server to go down before judges can play it.
Mr. Hunt, the co-founder of Jitta visited us around midnight and advised us to do load balancing. We thought about it and came up with this solution: we used multiple free Firebase accounts and randomly switch the account when user plays. This way we could get up to 150 max connections and 15 GB data transfer free of charge (I did feel sorry for Firebase about this).
At 4 AM we were exhausted from coding all day long. We were so tired that our thinking became slow and couldn’t code as fast as we wanted. There were 3 hours left and we weren’t sure we would finish it in time…
(Photo by Tor)
Suddenly 7 Republic members came to the rescue!
7 Republic members just came back from buying food at Foodland, the 24 hours department store that sell only food. They handed hot, fresh food to us.
I felt like raising from the dead eating fried rice and sausage. They also bought salmon sashimi, which I felt like the most delicious sashimi I have eaten.
We were back at full speed again. We managed to commit files till the last minute. Between Stories is not perfect, but had passed our expectation.
I went to sleep at 8.00 AM, still excited from the hackathon. This is the memorable weekend of my life.
Up and Running
On Monday, we started promoting our Static Showdown entry in Facebook. There were many people coming to Between Stories web app.
They complained that data is not loading.
I went to test and found that the data is loading, but it was definitely a lot slower than what we tested last night. Connecting to Facebook was fine, but getting data from Firebase was too slow.
There were 2 main reasons that we guessed:
- The internet at Jitta is so fast that everything seems slow in normal user’s internet.
- Firebase system is slow because many Static Showdown entries are using it.
After that day, I watched the presentation from some conference about how Firebase went down at the peak time of one startup and made everything aweful. We will have to be more careful for choosing third party services next time.
The only answer we can give to those people who complained about speed is to wait. Our web app would load the data, but with very slow speed. Users will have to wait around 10 — 20 seconds to see the result from Firebase.
Despite the complain about loading time, most people love the idea and had fun playing Between Stories. As the people who built it, we couldn’t be more happy that that.
We managed to get around 2300 users to play with our web app in 2 — 3 days. The result is satisfied, but we were eager to do better next time.
Annoucing the winner
There were judges giving us new feedback everyday. Most judges seem to love our web app. We felt so happy getting feedback from awesome people in the web industry e.g. the legendary @mdo who built Twitter Bootstrap.
We were so excited waiting for the result of Static Showdown 2014. Since there were 100+ entries and many of them were awesome, we thought it would be great if we were able to get in top 10.
On the next Wednesday, the results were announced.
And the winner is…
Congratulations hashoject! tinyChat is quite great app to use.
We scrolled down to see if Between Stories was eligible for any prize, and finally…
We felt like 48 hours of long coding is paid off. We couldn’t be more happy to see our hard work ranked in the worldwide hackathon.
We got the Static Showdown t-shirts and stickers, and also credits for many online services. The experience we got from this hackathon is more valuable than the prize though.
Thank you divshot and sponsors who made this hackathon happened!
Final Note
Static Showdown hosting is now deleted by divshot, so the link to play Between Stories is not available any more.
I have managed to create the video using Between Stories here. Please enjoy.
These are screenshots from Between Stories, in case you didn’t want to watch the video.
Home Page
Screenshot 2
Sorry for my bad English. If you have any question, feel free to ask anything at my email woratana.n@gmail.com.
