MEAN

Luxe: Upgrade your AirBNB

At FullStack week 8, we are each given 10 days to create a personal project that leverages our skills in JavaScript into an app or plugin.Screen Shot 2014-10-06 at 11.23.29 AM

My app tackles a question often asked by AirBNB hosts: What is the simplest way to make my space/experience worth more to potential guests?  My answer: Luxe.

Luxe is a CMS platform that lets any AirBNB host become the local tour guide/luxury concierge for their guests by creating a beautiful custom website for their property that gives their guest activity suggestions, best restaurants in the area, and tips for getting the most out of their stay.  Luxe AirBNB guests need not do a lot of planning for their visit, as their host has already done the legwork and saved links and directions into their site.

Best Features:

The mongoose schema was carefully crafted to anticipate the host’s and guest’s needs, including information for international travelers.  As part of the effort to make the site easy to set up, we scrape the AirBNB listing to get all the user’s pictures and critical info and automatically add it to their listing’s database schema.

Screen Shot 2014-10-06 at 10.59.30 AMScreen Shot 2014-10-06 at 10.59.47 AM

 

In order to make the process easy for hosts, I wanted to make their site mostly functional before the host even touches it, so that all it needs is a few pieces of information from the host.  I’m very proud of the UI, which came out beautifully with added hover events, carousel click events, and tooltips — all part of my effort to pre-load the site with beautiful pictures and minimize distracting (but useful) text.

Biggest Challenges:

Every CMS faces one huge challenge: the uncertainty of user input.  I had to allow for any case, including the possibility that a user would leave an input or an entire section blank.  On the other end of the spectrum, I had to make character limits to protect the integrity of the layout.

Screen Shot 2014-10-06 at 11.22.35 AM

This project required the creation of two integrated but separate sites: one to attract hosts and help them manage their listings, and another for guests to view their host’s website.  With grunt combining my stylesheets on load, I had to ensure that the styles for the former would not interfere with the latter.  And when dealing with this much CSS, it became a challenge to find things unless I kept my code well-organized.

Closing thoughts: Not every good project stems from an original idea.  But what made this project my best yet was the investment I felt in it as a creative yet practical solution to a real-world problem.  This is one case where web technology has the potential to truly make a world of difference for tens of thousands of AirBNB hosts, many of whom support themselves partially through AirBNB hosting, as well as for the many guests who are interested in a luxury experience with less cost and more flexibility.

Advertisements

TUTORIAL: Converting existing code to MEAN app

When my FullStack TA’s advised me not to try to convert my quiz application (using Angular and Angular Local Storage) into a MEAN app (MongoDB, Express, AngularJS, Node), I wanted to know why.  Why couldn’t I just generate an app using a MEAN app generator, then plunk my HTML’s, CSS’s, and JS’s in and wire it together?
 
I decided to try it and see how far I could get.  I used daftmonk’s generator-angular-fullstack, which includes yeoman, grunt, and passportJS, and began adding my quiz app files.  From this experience, I’ve derived some best practices to keep in mind when performing this conversion:
 
1. Don’t delete anything you can’t replace.  MEAN apps from a generator are very tightly wired.  Every file is there for a reason, and each one is linked to others through source hyperlinks, the gruntfile, angular routing, SASS routing, and possibly express routing.  Don’t delete any file unless you have opened it and feel confident that you can re-wire the app.
 
2. Try not to move things.  See #1.  Because of #1, you can have problems if you move files.  Your gruntfile and other routes expect each thing to be in a certain place.  One of the most interesting errors I had from this was when my console said there was an error with my app.js, and when I clicked on the words ‘app.js’, it showed me my index.html file.  The browser had been told that my app.js would be in a certain place, and when the app.js was not there, it grabbed another file and tried to read it as a script.  For every file I moved, I probably spent an hour fixing routes, reworking functions, and debugging strange errors.
 
3. The ‘Find in Files’ function in Sublime is your new best friend.  You are going to need to search for many, many terms to make sure that your app, route, and module names are all up to date.  You’ll find Sublime’s cross-file search indispensable.  Learn the shortcut: command-shift-F.
 
4. Look through your gruntfile.  Grunt is doing a lot of things for you behind the scenes.  For example, it will be combining all of your SCSS files and rendering them as one CSS file, which means that your views will all be modified by multiple SCSS files unless you make a change.
 
5. Learn your homonyms.  Within your application, you’re going to have several files with the same name.  You may have a few app.js files, a couple of index.js, a couple of route.js… take a look at your files with the same name and understand why some are intended for the front end (angular routes, for example) and some for the back end (express routing, passport).  It may be useful to draw a map of your site routes and decide whether to route each transition through the front end or through the back end.
 
I learned a lot through this project, but if I were doing it again, I would probably find a way to create a MEAN app by hand instead of using a generator.  On the positive side, I now have a better sense now of how the various files work together to create a fantastic app.