A simple hookup app designed for anonymous romantic liaisons.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin
chat
public
resources
routes
tests
views
.gitignore
Gruntfile.js
LICENSES.md
README.md
app.js
conversation.png
generatenames.js
package.json
screenshot.png
servers-on-fire.png
teaser1.png
teaser2.png
teaser3.png

README.md

Hookups💋 @ CSC

A simple hookup app designed for anonymous romantic liaisons.

Built using express, socket.io, and the latest HTML5 technologies. Responsive and mobile-first.

Screenshot of index page

Sample conversation

TODO list

  • Write documentation for changes
  • Get Giuseppe to look at the weird socket bugs in chat. Might be caused by some weird minify edge case?
  • Implement 'bubble-styled' chat UI and replace placeholder well
  • Further modularize CSS for chat
  • Working session management to prevent multiple users on the same client
  • Add match GUI to notify user when a match is found
  • Audio framework for "pop" sounds when messages arrive
  • Added Webkit notifications on match
  • Secure websocket implementation and strictly check inputs!!!
  • Implement progressive font rendering to prevent FOIC
  • Add a comprehensive unit testing framework for javascript code
  • On mobile devices, when the phone sleeps the websocket disconnects. Upon wakeup, when client tries to send a message the node server crashes
  • Session checking is still extremely weird. Sometimes, on mobile the session is seen as duplicated, even when it's not.

Installation

Prerequisites

In order to begin installing and developing the newest version of Hookups💋, a proper NodeJS environment is needed. Make sure to have node and npm installed and available on your system.

Installing dependencies via npm

Next, download all of the dependencies related to this project with npm.

npm install

To build the minified javascript and CSS files required for running the site, additional devDependencies such as grunt are also required.

npm install --devDependencies

Building javascript and CSS files with grunt

Hookups💋 now uses grunt as an automated toolchain for combining, stripping, and minifying source javascript and HTML files. These files have to be built in order to run Hookups💋. In addition, grunt also assists development by automatically linting the javascript files using jshint.

Build targets

As of commit 47446ee, the grunt build system has been refactored and modularized to have different build options for different environments. Hookups💋 is configured to build according to two different buld targets:

  • development: Javascript is linted for quality control. Furthermore Javascript and CSS are combined and minified with sourcemaps, for the ease of debugging.
  • production: Javascript and CSS are further optimized and minified without sourcemaps, for smaller filesizes.

When running Hookups💋build grunt to the desired target environment. If you plan to develop Hookups💋, the development target will aid debugging and provide linting while the production target is optimized for a production environment:

grunt production

or

grunt development

Of course, for switching between production and development toolchains, simply rerun the commands desired, and the files will be overwritten.

Please note: compiled and minified javascript and CSS files are NOT including as a part of the project repository! Therefore, in order to run the project, these files must be built with grunt!

When that is done, start the node server by simply running:

npm start

Build Pipeline Overview

When running grunt development:

Development build pipeline:
Step:   [Sources]   [Linting]   [Minify]    [Linting]   [Final]
Files:  ├──.js  ---→ jshint ---→ uglify ---→ jshint ---→ ├──.min.js
        └──.css ---------------→ cssmin ---------------→ └──.min.css

When running grunt production:

Production build pipeline:
Step:   [Sources]              [Minify]                 [Final]
Files:  ├──.js  --------------→ uglify ----------------→ ├──.min.js
        └──.css --------------→ cssmin ----------------→ └──.min.css

At this point, if there are no errors, the installation process is complete. You may now start developing or using Hookups💋 @ CSC!

Project structure documentation

As of the commit fd3ab, Hookups💋 has been refactored to use grunt as a toolchain component. This means the directory structure has changed. Previously, .css and .js files are not minified, and are stored under public/. These files were edited directly.

Now, all source files are stored under resources/sources, and are not publicly accessible. These are read by grunt, combined with other relevant files, and then minified:

Simplified example diagram

All files inside resources/sources/css are combined to form one minified css file (index.min.css) and a corresponding map file (index.min.css.map). The same process is repeated for the javascript files.

.
├── app.js
├── public
│   ├── css
│   │   ├── index.min.css
│   │   ├── index.min.css.map
│   └── js
│       ├── index.min.js
│       ├── index.min.js.map
└── resources
    └── sources
        ├── css
        │   ├── common.css
        │   ├── fonts.css
        │   └── index.css
        └── js
            ├── chat.js
            └── index.js

This process is extremely aggressive at optimizing javascript and CSS for file size, in order to speed up content delivery. Unused attributes and functions are stripped, and the finalized output is written to public/.

Under no circumstances is it necessary to edit the output files in public/! In fact, these files are added to the .gitignore and should not be committed.

Running the project

By default, npm should run this app in development mode. Therefore, certain settings such as gzip content encoding and HTML minifying are turned off. In order to compare benchmarks, Hookups💋 has to be run in production.

This is generally done by exporting an environment variable to node.

export NODE_ENV=production

Of course, before running as production, be sure to rebuild the project using grunt to optimize the delivery of static files. This can be done by running:

grunt production

Performance comparison

Without NODE_ENV=production, index.hbs loads 381 KB of content in 5 requests. Features such as HTML minify and gzip content encoding is turned off. Javascript and CSS stylesheets are minified.

When NODE_ENV=production is set, index.hbs loads only 129 KB in 5 requests!