6 ms·
How I launched flickrup.com in less than two weeks
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?
- ohizkiya 18y agoCan 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 18y agodone and done
- monological 18y agoI get down voted because I actually implemented what he said?
- Zev 18y agoPossible someone just hit the wrong arrow. Happens from time to time :\
- pclark 18y agowhat the fuck is it?
- monological 18y agoflickr photos + voting
- Hates_ 18y agohttp://www.flickrup.com/ http://www.flickrup.com/
- monological 18y agothanks
- SA 18y agoSimple site...if you could make the CAPTCHA look a bit more readable that would be great.
- iamdave 18y agoNot surprising, on the front page with majority votes: a picture of a cat. Nice application
- monological 18y agoThat'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 18y agoVery 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!
- mtrimpe 18y agoI love it that "flickr" phonetically means "faggot" (flikker) in Dutch and "flickrup" means "fuck off" (flikker op).
- lrajlich 18y agoLove the design. Does anyone have any recommendations for a CSS framework?
- Hates_ 18y agoI'm currently in love with http://www.blueprintcss.org/ http://www.blueprintcss.org/
- carbon8 18y agoIn addition to blueprint, you could go meta with compass: http://wiki.github.com/chriseppstein/compass http://wiki.github.com/chriseppstein/compass
- monological 18y agoI do love blueprint. It made the frontend design a snap.
- lrajlich 18y agoThe 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 18y agoCSS 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.
- monological 18y agoYou could also try the yahoo user interface library (yui). http://developer.yahoo.com/yui/base/ http://developer.yahoo.com/yui/base/ http://developer.yahoo.com/yui/reset/ http://developer.yahoo.com/yui/reset/ http://developer.yahoo.com/yui/grids/ http://developer.yahoo.com/yui/grids/ http://developer.yahoo.com/yui/fonts/ http://developer.yahoo.com/yui/fonts/
- mikeyur 18y agoI've been playing with CodeIgniter, thinking of using it for a small project. Did you like working with it?
- monological 18y agoI 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.
- sachinag 18y agoKohana's a CI fork that's optimized for faster. Think Merb as a Rails fork - lots of love, but a need for something along a slightly different path.
- mikeyur 18y agoI don't think Kohana is faster, I think it's about the same. But it's strict PHP5 OOP, and there are a few other differences. http://pr0digy.com/codeigniter/benchmark-static-cake-codeigniter-kohana/ http://pr0digy.com/codeigniter/benchmark-static-cake-codeign...
- peterhi 18y agoLooks 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 18y agoCool site. Did you spend all your time on it, or was this something you made on nights and weekends? It looks nice.
- monological 18y agoI have a full time job so just nights and weekends.
- TTDaVeTT 18y agoPretty 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 18y agoI 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 18y agoplease consider adding categories
- monological 18y agoI could maybe show the top tags used? What do you think?
- scorpioxy 18y agoNice...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 18y agoYes 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 18y agoCan 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 18y agoCouldn'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 18y agoNice 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 18y agoI use Pear's Flickr api library and then use the built in CI sessions library to handle login/logout.
- theone 18y agoThe work could have been done in less than 1wk if some web famework(django, ROR) were used.
- monological 18y agoside note: I have a full time job and I just did this on the weekends and after work on the weekdays
- dc2k08 18y agonice 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 18y agoAny recommendations as to how many should be shown?
- adrianscottcom 18y agonice writeup thanks