6.470 post-mortem: Notability
[tl;dr at bottom]
For those who aren’t familiar with MIT, every January we have a month long period called Independent Activities Period (IAP). During IAP, we’re allowed to take ‘different’ classes (glass blowing, chocolate making). This IAP I worked on 6.470, MIT’s web programming competition.
I ended up building Notability, powered by Flask/Postgres/SQLAlchemy, Node.js, Socket.io, and blood/sweat/tears.
Step 1: Brainstorming
The three idea categories were: Real-time Education, Meeting new people, and Vacations. Right after the announcement lecture, I went straight to a classroom and filled three blackboards with ideas. Ideation is something I have a lot of experience with, so this was a lot of fun. In total I spent about 2 hours thinking, and came up with these ideas
- Github for travel itineraries
- ‘Realtime classroom’ - peer to peer classroom note taking
- Grubwithus for coffee breaks
- Chatroulette for Linkedin
- [they just get shittier from here on]
I decided that these ideas were good, but none were awesome. So I was stuck. Then I got the crazy brain blast to combine #2 and #3, and Notability was born. The idea targeted two of the idea categories, which they recommended against, but I went for it anyway.
Step 2: Wireframing
I spent a day figuring out what I wanted the app to be like, doing brainstorming about user demographics, use cases, coming up with the page structure, building a db-schema, and making wireframes. Particularly difficult was figuring out relationships:
Many to many
- User-Course
- User-Lecture
- User-Queue
- User-Note
- Note-Asset
One to many
- Course-Lecture
- Lecture-Note
- Lecture-Asset
- Course-Note
One to one
- Lecture-Queue
Step 3: Minimum Viable Product
Around this time I found out about the existence of etherpad lite, a node.js+socket.io implementation of etherpad. I thought this was perfect (because I wanted to work with node.js and sockets in the first place). My MVP would include:
- Facebook Login
- Bootstrap scaffolding
- Enrolling in courses
- Auto activating/deactivating lectures
- Matching up
- Creating notes
This took me a week or so (I’ve never built real website backend before…). By the end of it, I had something that was ugly as dog shit - but functional. I deployed my Flask application to Heroku, and my Node.js app to Cloudfoundry.
Step 4: Design / UX
This part of the project was actually in my skillset, so I rolled hard and got it done in two days. Much of the final design you can see on the live site. Key challenges were making a logo and picking the color scheme.
All the different fonts I tried, searching for “the one”.
Here you can see a summary of my experimentation trying to find the right colors, sizes, fonts, and spacings. Originally I chose ‘golden-yellow’ as the Notability theme color, but I ‘pivoted’ to orange when I accidentally moved my mouse too far to the left and made an orange logo. Talk about love at first sight? In terms of fonts, as you can see I finally picked Edelsans and Open sans, two fantastic free sans-serif fonts. I loved Open Sans so much I started a Tumblr about it.
One page that changed most drastically throughout the course of the project was the actual notepad page. Here’s one of my later mockups:
Step 5: Fleshing out the product
Actually implementing the designs and the remaining features was a huge headache. It took about a week, and at this point I was pushing back my perfectly planned schedule farther and farther.
One thing I didn’t do that I wish I could have is made my buttons completely CSS. Most of them are, but the orange button you see on many of the pages is Photoshop. I couldn’t figure out how to do a radial, offset gradient on the button, and the inner shadows looked way too hard.
Throughout implementation, it was a bit of a challenge to stick to healthy practice on an encroaching deadline. I tried to keep as much logic as possible out of templates, but the line was a little blurry given Jinja2’s templating prowess. I found this out the hard way when standard python functions didn’t actually exist in the template.
One thing I’m proud of is getting better at “painting” with CSS. All of the box elements in the side, besides the buttons are pure CSS.
Step 6: Ops Crisis / Cutting non-essential features
Four days before the due date, I experienced a bug that I couldn’t understand. My server suddenly started outputting “invalid response from Facebook” on oauth-login. At first I thought I could just catch the exception and redirect to the home page, since the oauth token had already come back. That didn’t work…maybe it was a problem with the Flask-OAuth plugin I was using? I switched to the Javascript SDK. Still no good. What could be wrong?
I stirred up a shitstorm on the internet searching for the answer to my problem:
- http://stackoverflow.com/questions/14543357/flask-facebook-flask-oauth-oauthexception-missing-redirect-uri-parameter
- http://stackoverflow.com/questions/14543520/session-persistence-with-flask-on-heroku
- http://stackoverflow.com/questions/14544225/flask-heroku-with-custom-domain-name-breaks-sessions
- http://librelist.com/browser//flask/2013/1/27/broken-sessions-with-custom-heroku-domain-name/
Nobody knew what was going on.
And I finally got my answer…after two days. Mind you, that was 50% of the time I had left before the submission deadline. I might have had a few freak-out-rage-quits in these two days.
Heroku doesn’t play nice with custom domain names. They do some funny masking business that makes Flask unable to set cookies under your custom domain. At this point, I moved my Flask app from Heroku to EC2- problem solved.
But my woes didn’t end there. My Node.js app had to be under the same domain as my Flask app, as sessions and perms for notepads were passed through cookies. Cloudfoundry doesn’t do custom domain names at all. At this point, I moved my Node.js app from Cloudfoundry to Heroku.
Now with only two days left, I scrambled to finish all the features I had left. I had to make some tough decisions, cutting lecture wide assets, seeing your partner status / facebook link on the notepad page, and D3.js analytics sexiness.
Step 7: Light at the end of the tunnel
With about 12 hours to go, I started to realize that I could actually finish this, and even put some analytics back in.
After the site was “finished”, I scrambled with two hours to go to put in makeshift analytics. I put in an timeout function that polled (straight up polling, not long-polling), the server for updates to notes. When it found an update, it would update a div height and remove and append a div to a list. The result was effectively the most ghetto analytics graph ever created.
Somewhere in all this panic, I got a couple users to test out my site and make sure it even worked.
Step 8: Handling day-of bugs
Because I started testing so late, I had to deal with a large battalion of day-of bugs. Unfortunately this meant that the judges saw quite a few of them. Right after the judging ( :( :( :( ) I went back and fixed most of the bugs. It wasn’t until the day of my Awards Ceremony demo that I fixed ‘all’ of them.
Looking forwards: Marketing
Notability is pretty much a market-ready product. With the new semester starting, I have a chance to just launch it and see how it goes. Maybe I’ll recruit some friends, do some marketing, and do a public launch? We’ll see.
Conclusion / Lessons Learned
I got Honorable Mention- $1000. For the amount of effort I put in, I could say that I’m disappointed, but honestly, 6.470 has been an incredibly valuable experience. I made my first full website from start to finish, won some money, and got a working product out of it to boot.
- Working alone was as liberating as it was stressful (in retrospect, I wouldn’t recommend it). You’re never blocked by anyone, ever…but at the same time, you’re always blocked by yourself. Everything is always on you, and there’s no excuses if you fail. The stress from this mindset makes any sort of relaxing at any point ever really guilt-tripping.
- Judges rarely think like your target demographic. In my case, I hear my main criticism from judges, employees from sponsor companies, was that nobody would use it. But at the same time, I’ve gotten a hugely positive response from the student community.
- Remember to cover the “User quits out of the window and never comes back” use case. One of the most difficult use cases for me to discover was users quitting the page after they wrote their note. I couldn’t find any trace of it in error logs or access logs, and I couldn’t figure out what route they were taking through my application to cause these bugs.
- Relax. It will be fine in the end.
Some of you who read my blog (people read my blog??) might know that for a while I’ve been doing something called #oneyeardev. When I started, I really didn’t know anything about anything, and I decided I would give myself a year to learn enough to build a real product by myself. The conclusion of 6.470 also marks the first time I’ve made a full website on my own, concluding #oneyeardev as well. It’s been a little over the time allotted, but I still had a great time and I’ve learned a ton (…and yet still feel like I know nothing..?).
I also wanted to thank Josh and Saif their help and support throughout the course of building Notability. Also, of course, thanks to the 6.470 staff for putting on a phenomenal competition.
What am I left with in the end? Well right now, I feel a giant urge to tackle my “next big thing”. What is it? I have no idea. Whatever it is, I want to have another go at this website thing. Maybe next time, 6.470.
TL;DR
Web designer commits to a year learning backend dev and caps it off with a solo go at an MIT web dev competition. Result: Notability, and $1000.
Main lessons learned:
- Don’t work alone, self control is hard and stressful
- Judges rarely think like your target demographic
- When making real-time-anything, remember to cover the “User quits out of the window and never comes back” use case.
- Don’t take things too seriously
Just for shits, here’s a graph of my coding volume over the course of the month.
