AngularJS Single-Page Client for a Social Network
Overview
“SOCKAM” is an early-career, single-page web client for a social network product, built on AngularJS 1.3 with a full Grunt/Bower build pipeline. It consumed a separate REST API (the dev default pointed at an endemic.ro backend) and packaged a rich, component-based UI for feeds, profiles and rich-text content.
The Challenge
A social network needed a modern, decoupled browser client that could be developed independently of its backend, built and minified for deployment, and tested in real browsers, at a time (2014–2015) when SPA tooling was still maturing.
What We Built
A structured AngularJS application scaffolded on the ngBoilerplate pattern with a heavily customised Gruntfile.js (26 KB) covering LESS/RECESS compilation, CoffeeScript, HTML2JS templating, concatenation, ng-annotate, uglification, an HTML-snapshot task for crawlability, and a conventional-changelog/version-bump release flow. The UI assembled a broad set of Angular modules: UI-Router routing, ng-table, xeditable, infinite scroll, image cropping, Ladda buttons, angular-moment, oclazyload lazy-loading, angulartics analytics and a CKEditor/sceditor rich-text integration. Karma + Jasmine drove browser tests across Chrome and Firefox, with Travis CI configured.
Technologies & Approach
AngularJS 1.3, Bootstrap 3 / Bootswatch, LESS, jQuery and Underscore on the front end; Grunt + Bower for dependency management and builds; Karma/Jasmine for tests. A --sockam-api build flag let the same codebase target different API hosts.
Outcome / Impact
A working, build-automated SPA that demonstrated decoupled front-end/back-end development and modern (for its era) JavaScript tooling. It stands as proof of end-to-end ownership of an Angular client, from module composition to release packaging.
Capabilities Demonstrated
- Architecting decoupled single-page applications against a REST API
- Front-end build automation and release tooling (Grunt, Bower, changelog/versioning)
- Component-driven UI assembly from a large ecosystem of Angular modules
- Browser-based automated testing with Karma/Jasmine and CI