rwd-spa-alljs-app
Responsive Single Page Application using an end to end Java Script stack
This is an attempt to build a SPA using an all Java Script stack.
1) The theme for the application is a sample travel and tourism site using places in India as source and the plan is to add social elements to the same.
2) The application will be using a travel destinations database persistence on MongoDB
3) Server will be Node.js using the Connect module for the Web Application Hosting
4) RESTful CRUD APIs will be exposed on Node.js server using the MongoDB driver module
5) AngularJS will be used to build the SPA with Bootstrap providing the UI components.
6) Socket.IO based real time travel poll with Charts based results view
7) I18n Support
Tools Used
1) NodeEclipse Plugin for Kepler (Node IDE)
2) Git Client for Windows (Repository)
3) MongoDB (DB)
4) Bootrap 3.x (RWD)
5) AngularJS 1.3.x (SPA)
6) jQuery 1.10.1 (UI)
7) passport JS (User Management / Single Signon)
8) connect-flash (Flash messages for Session)
9) mongoose (ORM for Mongo Db)
10) bcrypt-nodejs (Encryption)
11) node-config (Server Configuration)
12) Travis CI (CI Service Hook)
13) Socket.io (Real Time Poll Results)
14) Google Charts Angular Directive
15) i18n-node,i18n-node-angular (i18n support)
Added so far
1) Basic SPA infrastructure for Node.js/AngularJS/Bootstrap/Express/Connect/MongoDB
2) Initial set of travel APIs (CRUD) for all destinations in India using MongoDB for persistence.
3) A Bootstrap Carousel for India Travel Destinations (Needs improvement :-))
4) Accordian view of all India Destinations sourced from the travel APIs with filters
5) Group By view of all India Destinations grouped by India Region and State..Thanks to a blog by Ben Nadel covering how to implement groupBy in AngularJS using nested ngRepeat
6) Integrated jQuery.simpleWeather and created an AngularJS directive for the same.
7) Created a landing page with various bootstrap components including thumbnails , wells , panels , jumbotron.
8) User login using localStrategy at the moment using passport.js,connect-flash,mongoose,bcrypt-nodejs for encryption.This has been modelled based on the excellent tutorial from scotch.io with additional integration and migration for supporting jade and AngularJS.Also added support for sign up and login using email or username with rememberme functionality.
9) About me menu item now is displayed conditionally based on whether the user is logged-in and shows the user profile details , otherwise a drop-down menu is displayed
10) Added server specific configuration using module node-config
11) Express session storage using connect-mongo and enabled cookies
12) Added angular-cookies to persist the filter values of the destinations in the places page. Now the filter value entered is retained when you switch between different partials.Using the ngCookies modules and injected $cookieStore into the destinations controller.
13) Implemented rememberme functionality
14) Migrated to Express 4.x
15) Added basic infrastructure server side mocha/chai tests using grunt-mocha-test module
16) Added CI tooling using Travis CI Service Hook
17) Added a realtime travel poll infrastructure based on Socket.io and REST APIs for polls
18) Added support for streaming video
19) Added realtime poll data visualization using Google Charts Angular JS Directive
20) i18n support using i18n-node and i18n-node-angular
21) Added Bootstrap switch based visualization of the poll question options (Toggle Switch for radio buttons - UxD improvement)
22) Directives Created - Weather for each location `local-weather` , Bootstrap Toggle Switch for poll questions `input-switch` , Make bootstrap thumbnails the same size `equal-height`
23) Added Responsive Text and Buttons using media queries as well as using the Bootstrap responsive utilities for hiding and showing elements
24) Added initial configuration module in Angular JS for the settings used in the services for travelApp. This will later be sourced from the node config
module so that there is a consistent way of maintaining the configuration.
25) Added `grunt-jshint` module for code review.
26) Added `grunt-jsbeautifier` module for code formating.
27) Added ESAPI support for the login and sign-up forms using module `node-esapi` and jquery-encoder for security handing for AngularJS controllers (used in poll question creation).
28) Added a dashboard view using HTML5/responsive canvasJS charts and created an angular JS directive `angular-canvasjs` for rendering it. It really looks good !!
29) The travel destinations `Places->All Destinations` page now has support for google maps using Google Maps AngularJS Directive and ngDialog for Modal and popups in AngularJS .. see screenshot
Work in Progress Screenshots ...