ClipTheTrip.com - How I Built This

Dec, 2013

Clipthetrip.com is a fun, free crowd sourced destination guides. From a data modeling perspective it has a pretty simple object interaction. There is Location object, there is CLIP object, there is photo object and a user object. MongoDB was used as a data store so objects were quite denormalized instead of a referential model.

Some of the technologies and API used for building the site is as follows:

MongoDB
.NET MVC3.0
.NET 4.0 web optimization library for Js and CSS minimizing and combining
jQuery Plugins
- Wookmark
- jQuery Lightbox
- qTips
- GMap3 for google maps
- jQuery Fullscreen for homepage background
- Imagesloaded
- Autosuggest for location suggestion
- Plupload for uploading images
- Tablesorter
- CookieControl from the pesky Europe cookie law
- jQuery Reject
External API's
- Weather information using Accuweather
- Currency using Webservicex service
- Business search using Bing
Image processing using SimpleDotImage library
Generating offline PDF's using wkhtmltopdf
HtmlAgilityPack for screen scrapping
Amazon SES for email

As part of this article I am sharing code snippets of how I extracted information from external API's and other smaller code snippets. Since most part of the site is just CRUD operations, I feel it would be a waste to explain the code structure or architecture (considering architecture is quite simple!)

Currency data from Webservicex.net
Example page: http://www.clipthetrip.com/city/london


      var xElement = System.Xml.Linq.XElement.Load("http://www.webservicex.net/CurrencyConvertor.asmx/ConversionRate?FromCurrency=USD&ToCurrency=" + code);
//code being 3 letter code like USD, INR etc.
  var cur = decimal.Parse(xElement.Value).ToString("#.##");   

  jsonResult.Data = new { c = cur, code = code };
  
  return jsonResult;

Business information from Bing
Weather information from Accuweather
Example page: http://www.clipthetrip.com/city/london
Image Resizing using SimpleDotImage


    using (var _imgProcessing = new ImageProcessing())
{
    using (var _waterMarkedImage = _imgProcessing.Process(
        imagePath: file,
        resize: 164))
    {
        ImageHelper.SaveStream(_waterMarkedImage, thumbFile);
    }
}

Javascript and CSS bundling using Web.Optimization