Show HN: My first webapp. Build with rails, backbonejs and lots of love. | Hacker News Reader

Show HN: My first webapp. Build with rails, backbonejs and lots of love.

themescroller.com

A couple of month ago, after finishing (almost) Standfords Saas-class (https://www.coursera.org/course/saas), i decided it was time for my first webapp.

A directory for wordpress themes sounded like a small enough project to start learning everything there is to know about running a webapp. What i learned the last 2 month feels more valuable then 3 years of college. The backend runs on rails, the frontend is done with backbonejs and i'm using mongolab.com as my database-(service).

the skills that i learned so far are mostly technical, now i need to figure out how to get the word out... any pointers on how to do that are very welcome.

I thought i start here since i love how much you help fellow hackers out. any feedback on the app would be highly appretiated.

It's pretty neat, I like the ability to view a lot of themes at once juste scrolling. One minor thing : when using the filter part, if I tick for example "business" then untick it maybe it should come back to "all" by default instead of showing a blank page?

How do you manage the color detection, do you tag it yourself? For Orange, there's one theme that should not be here : the "screen" one but as the theme is based on pictures "wallpaper" changing maybe one of them has orange in it?

oh thanks, good call with the unticking thing. i didn't even notice that.

the colors are tagged by a script. i wrote a scraper for all of these marketplaces, which collects all the data, takes a screenshot, (tries) to guess the main color and uploads everything... so yeah, if there is a huge example picture with the color orange, my script thinks orange is part of the theme. maybe i can deactivate all images for the color guessing part. i have to figure that out. but thanks for the feedback, really appretiate that!

Nice job. I'm in the same boat as you, so my questions are more newbie than anything else:

1 - how many hours/how much time did you spend on this, from beginning to end?

2 - what tutorial did you use for the nodejs part of this project?

3 - are you pulling in themes dynamically or through an API, or did you pre-load the themes into your database?

Great job on your first app!

1) hard to say. i started 2 month ago, and maybe spend about 3 hours a day on average on app-related stuff. when i started i only had little experience in rails, but had absolutly no experience in backbone. so it took me quite a while to get into it.

2) to start out i read this http://coenraets.org/blog/2011/12/backbone-js-wine-cellar-tu... and then everytime i was stuck i search for a solution on stackoverflow. i'm not using nodejs btw. just backbone for the frontend. once you done a couple of tutorials, i recommend using http://www.brunch.io

3) the themes are coming from my rails backend. i have a mongodb database on http://www.mongolab.com. the backbone app makes a request to my rails server and gets a respond as json. you can see how that looks like at http://www.themescroller.com/themes.json

This is a great first app. I assume you are looking for ideas of things to think about and work on next, otherwise I wouldn't criticize. So here are a few ideas:

- Right now you have to click directly on the checkboxes and radio buttons, which are small targets. There is an easy way to let users click on the text next to the checkbox, and a padded area around it a few pixels, which will make them much easier to use.

- You are mostly using the browser-default typography. Most web applications look better with sans-serif fonts, like the ones you see in any menu on a desktop application.

- The url is currently a bit ugly for the default case, with lots of ?blah=all. Can you figure out a way to remove those and just assume "all" as the default if it isn't in the url?

- The filter tab currently has what I would technically describe as "a big jumble of options". Everything looks the same and is the same size, as if you expect all of the options to be equally used and to have the same relationship. Can you think of a way to provide more understandable structure, by making some of the options (the more useful ones) stand out more, and others be out of the way. Or can you find some relationship between the different options that can be expressed visually?

- "Only free themes?" All, Yes, No. Are "all" and "no" the same? Perhaps you mean: All, Free, Paid?

Have fun! I know how exciting a time it is tuning your first big thing. Good luck.

I came to offer advice on your first bullet point. Definitely look into the <label> element. This will let you click on the text associated with the button. Not knocking you here (as this is your first web app!) but I am shocked by the number of large websites that do not do this properly. Drives me bonkers.

You can use it one of two ways. Wrap the text and radio/checkbox button in the <label> tag such as :

  <label><input type="checkbox"> Medium</label>

Or using the for/id attributes as follows:

  <label for="boy">Boy</label>
  <input type="checkbox" name="gender" id="boy">

  <label for="girl">Girl</label>
  <input type="checkbox" name="gender" id="girl">

Excellent first app! I'm sure you've learned a lot about building it. That would actually really interest me, a blog post perhaps detailing all of the things that you learned while building it.

wow lots of great advice. thanks for the feedback, especially the long-url-thing blew my mind...it's so obvious..but i never thought of it!

This is a great first project, and I wish you luck. I have a decent amount of experience with rails and backbone, feel free to email me if you ever have questions or want code reviewed: asolove@gmail.com

Very nice. Here’s just a small thing I’d change: You update the url using backbones router.navigate, right? If you pass {replace: true} in the options object, the browser won’t create a new entry in the history as it does right now but still update the URL. http://documentcloud.github.com/backbone/#Router-navigate

yes, exactly, that's how i do it. maybe i'm missing something, but why do you suggest not making an entry in the history?

The user is scrolling one long page, not navigating between 'pages'. Having entries inserted into the history while scrolling seems very counter-intuitive to me.

mh yes that makes sense.

i think the reason why i did this, was because initially the preview und market links didn't open in a new window. but you're right, if the user is staying on one page, he doesnt need a 'back' functionality.

thanks for the feedback, i already changed it, going to push it later...

I got a question and a feedback : 1/ how do you make money ? Do you get a commission for each theme you sell

2/ It would be great if you had some info about the theme, for example, when I'm looking for a wordpress theme, I want to make sure its design is responsive. You should add some theme info to your app !

Great job anyway ;)

1) yes, through affiliate links. most marketplaces give you commission on sales.

2) yes better filters/ more infos is on the roadmap. getting data of ~4000 themes is not a task i want to do by hand. and the infos i get by scraping the sites is limited. but as someone said before, the user doesn't care about how its done, the user cares about how it works. so i'm going to think about that. maybe i let mechanical turks look for all that data.

but for now: there is a filter for responsive themes. its the layout-> responsive layout filter. if you select that, you will get all the themes where i definitly knew that they are responsive.

Thanks !

Good luck with the themes info retreival :)

Congratulations on releasing your first app.

To get the word out; posting here is a good start. Post on Reddit too. Also, you could try sending a Press Release type email to relevant blogs - they might blog about your app.

Think about SEO and how your site ranks in a Google Search for instance.

thanks.

yeah seo is a hard one, since the app is basically just images...

How about using alt- and title-tags for those images?

right, meta tags are also missing at the moment. but generally speaking...its a javascript app, with dynamic content (filters) and only images... the googlebot is not going to apply filters. or maybe he is, i don't know.

The google bot won't touch any javascript, it will just follow links. You can consider a link to a directory to the different themes.

Googling "googlebot execute javascript" indicates otherwise.

I stand corrected. they use Javascript in a headless browser to generate the site previews. Detailed information on how Javascript is interpreted to index sites is hard to find. I would not count on Javascript to instruct Google Bot what to index.

If you're sending it out to other blogs, avoid the term 'press release'. It may come with bad connotations from bloggers, who could be getting plenty of random PR already.

Pick the most important theme related sites and hand craft a very concise and to the point email without it looking too generic sounding.

slightly off-topic: i'm not a big reddit user, so i dont know whats what. can you recommend a good subreddit for showing webapps. is there a show-hn-like subreddit?

The more I experience it, the more I think the "pinterest-style" layout is absolutely the best way to consume visuals. Great idea and great execution! I would definitely use this.

From the perspective of a dev who occasionally buys from Themeforest, I find a few of the pieces of default TF metadata really important: price, browser support and # of sales (in decreasing order of importance). Don't know how accessible that info is via the API, but it'd be great to access that info without many (or any) clicks.

This is a very nice first web app. Congratulations, you've done fine work.

I will offer one UI design tip. The radio button for All and check boxes for yes/no, etc under the filters tab is not how these ui elements are typically used. Checking Yes and No is all, so there is no need for the All option, just have all the check boxes checked by default and allow the user to uncheck the ones they don't want to see.

Nice idea, browsing through Themeforest is a bit of a painful, multi tab experience most of the time.

How about adding a text search as well? I regularly search for stuff like "admin" or "app" to narrow the search.

It's a very nice app, but it does not say anywhere that these are Wordpress themes - is that obvious to everyone?

Wasn't to me until reading your comment.

I'd dial back on the shadows behind the themes. It makes the pictures look like they're glowing.

Outside of HN, no-one cares what it is written in, only what it does.

...and yet this was posted to HN.

I assume he was giving advice for when he advertises it other sites other than HN

That is correct.

Reply on news.ycombinator.com