HN Explorer

How I launched flickrup.com in less than two weeks

34 points by monological ↗ HN
Please Note: the point of this post is not to pitch my site, but rather to provide some of the lessons learned and hopefully spark some interesting discussion.

Flickrup allows people to submit flickr photos and vote on them.

The idea with Flickrup! was to launch a working, stable site as fast as possible. The idea I had when I started working on the site was to be as minimalist as possible in regards to design, code complexity (frontend and backend), db schema design and user authentication to name a few. I also wanted it to be ridiculously easy to submit and vote on photos. So here are some of the things I did.

frontend design:

I used a css framework (blueprint) to assist in creating a grid based layout and also utilized all the predefined styles for elements. Instead of creating my own css classes and ending up with a cluttered mess, I forced my self to use the classes defined in blueprint as often as possible.

I didn't waste time making a logo. The logo is simply a text link to the frontpage.

I didn't clutter the frontpage with flashy css based buttons and login/signup links everywhere. Instead, when someone hovers over a vote link, a css popup comes up which allows them to vote anonymously or using the flickr account.

I didn't waste time setting up a blog for the site.

backend design:

No brainer: I used a well known php framework (codeigniter) and forced myself to use as many classes and helpers they had to offer including: (pagination, session control, url helper, captcha, date helper)

I had a problem that needed some solvin' and I was greatly tempted to roll my own solution, but I searched until I found an already existing one.

Database:

I have four tables. That's it. Photos, sessions, users and votes.

Authentication:

There isn't an ugly login/signup link to be found on the frontpage and it doesn't need one. Logging in is inconspicuously placed in the flow of voting and submitting.

You don't have to sign up to use the service. You can vote and submit anonymously. It's true that you can vote for a photo as many times as you want as an anonymous user, but so what? If someone wants to spend their precious time painstakingly figuring out the captcha a dozen times to fluf their votes, who cares?

44 comments

[ 6.8 ms ] story [ 26.5 ms ] thread
iamdave
Not surprising, on the front page with majority votes: a picture of a cat. Nice application
monological
That's because it's newer and so it has a greater weight. The site is brand new so if someone submits garbage, it is very likely that it will end up on the frontpage. This problem should go away as the site grows and people start submitting more photos.
airlabam
Very nice, concise writeup on getting the idea to the ground. I must shamefully admit, I've been quite guilty of ideating a lot of the no-nos you've talked about!
ohizkiya
Can you make it so that "comments made" next to the picture on the front page links to the comments on flickr? It's a little annoying to click on a picture twice and scroll down just to see the comments.
monological
done and done
monological
I get down voted because I actually implemented what he said?
Zev
Possible someone just hit the wrong arrow. Happens from time to time :\",
mtrimpe
I love it that "flickr" phonetically means "faggot" (flikker) in Dutch and "flickrup" means "fuck off" (flikker op).
lrajlich
Love the design. Does anyone have any recommendations for a CSS framework?
monological
I do love blueprint. It made the frontend design a snap.
lrajlich
The mention of blueprint got me thinking about CSS frameworks and that there's probably alot of value in using one. What are its strengths? weaknesses?
monological
CSS frameworks generally do the same thing.

They reset the browsers setting, e.g., setting body, div, span's margins and padding to zero.

They setup the typography, picking a global font, setting up font-sizes, margins and padding for html elements such as h1, p, ordered and unored list, etc...

They provide a way of setting up a grid. Blueprint, by default, uses a grid chunked into 40px segments, creating 940px wide design. You then place divs inline or nested to create your design.

Blueprint also provides some extra goodies like defining styles for forms, error and success styles for divs, and some ie fixes.

mikeyur
I've been playing with CodeIgniter, thinking of using it for a small project. Did you like working with it?
monological
I love working with it and it's also relatively fast compared to the other existing php frameworks. However, I have not used any of the others, so I can't really compare it. Maybe someone else can chime in.
peterhi
Looks very nice. The fact that you got it up just using the standard tools rather than reinventing the wheel shows remarkable restraint for a coder (wish I could stop reinventing wheels :( ).

Must look into blueprint, CSS frameworks seem to be the way to go.

Well done

jacoblyles
Cool site. Did you spend all your time on it, or was this something you made on nights and weekends?

It looks nice.

monological
I have a full time job so just nights and weekends.
TTDaVeTT
Pretty cool. I'm curious, did you use the Flickr API to process the flickr url and get the thumbnail? or did you scrape it?
monological
I just exploded the link using "/", grabbed the ID of the photo and I used the flickr api to make sure that it's a valid photo_id.
henryw
please consider adding categories
monological
I could maybe show the top tags used? What do you think?
scorpioxy
Nice...i like the simple design and functionality.

But, a serious question in regards to how you implemented it. Isn't that how you would usually go about implementing something?

As in, the rule of thumb is: think of the least functionality needed to launch a first version, use a CSS framework to avoid writing your own, use a JS framework to avoid writing your own, start up with a simple design, use some kind of code framework to avoid re-implementing common functionality such as authentication and caching..., and so on....

After testing the water with that, you can start replacing stuff if needed, hiring a designer for a more fancy look and the like...

monological
Yes all those things that you mentioned are done by default. What I'm simply saying is that you have to watch out for the temptation of adding non-critical features or rolling your own solution without doing your hw first. It's easier said than done.

In regards to design, people spend a lot of time creating photoshop mockups, then modeling it with css and html. I'm just saying, if you want to get it done quickly, just skip all that and keep it minimal.

hsuresh
Can you change the captcha implementation? I tried a few times and could not get it right. The text is not clear. Believe me, i'm a human :)
akirk
Couldn't your domain name be a problem in the future? I always thought trademark owners need to fight other people using their trademark in order to keep it.

So Yahoo will have to ask you to change your domain to something else, right?

juliend2
Nice app. Do you use a plugin for the authentication? I also use CI for some of my projects. Its my favorite PHP framework so far.
monological
I use Pear's Flickr api library and then use the built in CI sessions library to handle login/logout.
theone
The work could have been done in less than 1wk if some web famework(django, ROR) were used.
monological
side note: I have a full time job and I just did this on the weekends and after work on the weekdays
dc2k08
nice idea, I would be in favour of a longer front-page though..as a side, I'm nearly sure someone either attempted or is about to attempt a similar site using slinkset.
monological
Any recommendations as to how many should be shown?