This is the front-end code for a Priceline.com hackathon I attend recently. I wrote the whole front-end repo. There are three back-end guys, 1 designer and one data analyst work on other stuff. All from our company which is Priceline.com. The PINCH.MD will give you a clear picture of the idea.
This project use Express.js as server framework and Handlebar.js as view engine, also leverage jQuery for the client side logical. Use Bootstrap and canvas template for styling.
There are two kind of data flow from browser to server. Express.js handle the url client visit by rendering view template with correct data. It also handle get request send by jQuery with search params. In this case, it will call back-end api, and parse the data send from back-end.
I really like the UI I wrote, so for demo purpose, I host it on Heroku and mock up the back-end. You may encouter a few seconds latency as I use free dyno on Heroku which will sleep after 30 mintues inactive.
Demo Vedio
Demo Website
Code Walk through Vedio
PINCH.MD The general idea about this project
- Beautiful UI Design
- jQuery and jQueryUI to handle client side logic
- Use handlebar to divide view to partials and layouts and render with provided data
- Express.js to handle client request and interact with back-end
- Use MySQL to store mock up data
As I mock up the back-end API, so the functionality is limited
Case 1: Search by specific feeling
Hover mouse to "I'm Feel..." button, then choose one feeling from the drop down, the button will change its text to that feeling, click the button again. The app will find a best matched hotel according to that feeling.
Case 2: Search by location feeling
Enter "New York" in the input box, then select the right one from auto complete. The button will change text to "I'm Feeling Lucky", click the button. Only New York and Baltimore work. The app will find a best matched hotel according to user data.
Step 1. install nodejs, MySQL server, suggest install MySQL work bench for manage MySQL server
Step 2. get source code and install package
- Clone repo from github:
$ git clone https://github.com/taoning2014/i-feel-lucky-desktop-ui.git - Turn on MySQL server and create a database schema named "I_FEEL_LUCKY" in MySQL server
- Dump data in /db/data-hotel-details.sql to MySQL server
- Modify /db/hotelSearchDAO.js line 16-17 for correct MySQL credentials
- Set up environment variable I_FEEL_LUCKY_RUNNINGENV with value "local"
- Go into repo forlder and install node package:
cd i-feel-lucky-desktop-ui && npm install - Run Express.js server:
npm start
- Canvas
- Canvas The Multipurpose Html5 Template
- Handlebars
- Handlebars.js is an extension to the Mustache templating language created by Chris Wanstrath. Handlebars.js and Mustache are both logicless templating languages that keep the view and the code separated like we all know they should be.
- jQuery
- jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
- jQuery UI
- jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.
- Bootstrap
- Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
- Express.js
- The best way to understand Express.js is through its Official Website, particularly The Express.js Guide; you can also go through this StackOverflow thread for more resources.
- Node.js
- Start by going through Node.js Official Website and this StackOverflow thread, which should get you going with the Node.js platform in no time.
- Commitizen For Contributors
- ESLint An open source JavaScript linting utility.
- ES5: Airbnb JavaScript Style Guide
- Set up mySQL Brief tutorial for connect MySQL from heroku addon ClearDB to MySQL work bench
Got some images from airbnb for demo purpose
MIT We believe that mean should be free and easy to integrate within your existing projects so we chose The MIT License