Giter VIP home page Giter VIP logo

car_listing's Introduction

Tommy's Cars

Live at tommyscars.com.

This is a used car listing site that also tells you how good each deal is. Users can list their own cars or search for one they want to buy. They can also 'favorite' listings.

I built this over the last year whenever I had time, dedicating under 4 hours a week to it. I didn't write any tests for it since I'm also the only one working on it and I never thought I'd be showing it off to anyone.

Noteworthy features

  • Search & Sort
  • Backbone.Subset
  • pushState + server serves HTML snapshots for search-engine-indexable pages

Search

The car search feature is the most involved in the app. Users can search based on year, make, model, price, and distance.

I calculate the distance between a user and listings on the fly, using a table I have with all the zipcodes and their latitudes and longitudes in the US, all in a single SQL query. I'm proud of the query that does that. First it narrows the table down to the zipcodes that might be within range, then it calculates the actual distances, even taking the curvature of the Earth into account! If you want to see it, it's in the Zip model.

Sort

The coolest sort is sorting by best deal. This calculates how good of a deal each car is on the fly as a percentile ranking compared against all the other cars of the same model and year in the database.

This was fine for serving the 25 results of a single paginated page, but got super slow when I tried to get the total count of all the listings that matched the query. This took some thinking. You can see the solution in the Listing model.

Backbone.Subset

A problem came up when I added listing favoriting. I had a Backbone Collection for the listings I displayed in the index and another for the listings the user owns. That introduced the potential for overlapping data where one car was in both Collections (as two separate Models). When I implemented favoriting, this overlap was especially annoying. A user could favorite a car, and it would be favorited in one collection but not the other.

My solution to this was a new Backbone class of Subset. An app holds all its models of a certain type in one main parentCollection and then it can have different subsets of that collection, of the same exact models.

Basically, whenever adding to a Subset, it checks whether the parent already has it. If it does, it uses the parent's model, else, it also adds it to the parent.

And then all my Models were in sync :)

pushState + serving HTML snapshots

Google doesn't index JS apps, so this was just annoying. I just render the same views in Rails that Backbone would generate for the given URL, and I tack on all the Backbone kickoff logic.

Eventually, and this is a big eventually, I'd like to port the whole app over to Node and run Backbone in both the front and Backend somehow to serve up the HTML snapshots without any duplication of view code. I heard Airbnb did something like this. Haven't looked into it much.

TODO

  • TESTS

car_listing's People

Contributors

tduek avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

pwalvarado

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.