myFitment: iFrame Selector
The secure communication between your site and the remote server from a different domain is handled via iframe and window.postMessage() mechanism, as the main code for the app is hosted else where.
This widget can be used for easy to integrate chat clients, product search boxes and in many other cases where your site can consume data from services without externalized APIs. In this specific project, the widget is used to search auto parts from a web site and services on different domains.
TeraData: AppCenter 2.0
TeraData is in Big Data Analytics space.
The project involved building the next version of AppCenter dashboard with up-to-date UI and UX, better performance and richer features. Integrated Login Auth, LDAP Settings, JSON validation, Stepper and other modules.
Technologies used: Angular 2.0, Angular Material Design, Angular-Formly: Material Templates, RESTful API communications, Java, Node.js, Docker Containers
Pebble Watch App: skyPatrol
skyPatrol displays real-time information of airplanes in the sky, based on user location.
The app is built for smart watch Pebble. When user selects a button to load the info, a request to the API end point is made. The response is a JSON based object that returns data and renders on the screen of the watch.
Technologies used: PHP API, external API, JSON, Pebble.js, Pebble location, Pebble Ajax
CISCO CLOUD SERVICES: Account Management Portal
This portal was built to allow CISCO Cloud users to have a consistent flow and seamless experience of interacting with various external CISCO systems.
The project involved a complete UI Architecture of the large scale application, integration with external and internal system components, RESTful API, security, authentication, SSO support, permissions, cross system communication, performance optimization, responsive design and more.
Monster Inc.: Mobile Responsive Design
Converted and refactored site's code to support mobile viewing experience and functionality. The site dynamically adjusts to various mobile devices, including iPhone, iPad and Android.
Enhanced functionality and layout of various components including navigation, supporting pages navigation, product main pages, main Responsive Design for main story page (http://www.monsterproducts.com/head-monster-story).
e8Security: Botnet Cluster Visualization Prototype
Botnet Cluster Visualization Prototype is a proof of concept for visualizing security intelegence data. The graph communicates a scenario where a source IP/domain sends data to destination IP/domain at a particular time period. The feature is built around asynchronous client-server communications utilizing RESful API services, data transformation and custom formatting to feed and render the graph, as well as real-time rich interactions.
Technologies used: d3.js, Node.js, Backbone.js, Require.js, Handlebars, jQuery.js, CSS, HTML5, Bootstrap, AJAX + JSON.
D3.js: Line Chart
This prototype is built for an app that tracks energy consumption patterns and visualizes data. The data are requested by the UI via an AJAX call, in JSON format. The response is rendered and plugged in into d3.js library for visualization.
Technologies used: Backbone.js, Require.js, Handlebars, jQuery.js, CSS, HTML5, Bootstrap, AJAX + JSON, Node.js, Jade.
This project involved building a feature that allowed users to navigate a 3-tier taxonomy tree of available predefined tags and make a relevant selection for an uploaded image. The UI's chalange was to come up with a solution that will represent the easiest flow and robust performance.
Technologies used: Knockout.js, jQuery.js, Haml, LESS CSS, Rails, HTML5, CSS3 and AJAX + JSON communications with the server-side.
Social Calendar Widget
The prototype was built for a POC to convey a flow of users being able to create, edit, view and delete Calendar events and communicate changes via SMS or email. The widget was built on the top of a calendar plug-in with the added busines logic. The objective was to present an intuitive and familiar UI with easy navigating components and real-time updates.
AT&T Big Data Visualization
CISCO EOS: Admin Members Ajax
CISCO EOS’s social network media admin platform required a transformation from a bulky and server-dependent legacy code to a thick-client robust and performance driven UI implementation. Based on a user search criteria, that included search refinement and filtering settings, the page results would have to refresh without reloading the page updating and repopulating dynamic data. Also, the app required to dynamically generate a bookmark url.
Walmart: Vudu, Pharmacy
Walmart’s Vudu Video Service required client-side code optimization to enhance performance and transition from YUI to jQuery library support.
eBay (shopping.com): Guides
The new feature "Guides", released in June 2010, consumed 5 months of development time heavely focusing on front-end development efforts. Guides is a section of shopping.com that allows users create, publish and edit their own customized rich content pages controlled by interactive tools (or widgets): "Product" with Ajax + JSON driven "Mini Search" component, "Image Upload", "WZWG Text Editor", "Embeded Video Upload".
eBay (shopping.com): Wish List
"Whish List" feature, released in first quater of 2010, allows users to create, store and share product collections. A real-time client-server communication (Ajax-driven) syncs data between the user’s interaction and the stored data record.
Barclays Global Investors: Tools
Project "Tools" was released in Q-3 of 2009. The objective was to introduce a new, easy and highly interactive experience for users to preview their financial analysis data summary.
Lazy loading concept allowed smart and fast on-demand data loading, thus enhancing much faster performance without sacrificing server-side overload. In fact this was accomplished without the use of Ajax implemenation. Heavy use of DHTML and jQuery produced a reach and fun interactive user experience.
Barclays Global Investors: Mexico Site
"Mexico" site and the project was released in Q-4 of 2009. One of many new features and concepts that was introduced with the site was dynamic graphs to visually represent the data.
Macy's: Find It In Store
A highly desired feature, "Find It In Store", was launched on macy's site to provide users with convenient experience of checking a product’s in-store availability in a near-by macy's store location. It enabled users with an easy, fun and convenient online shopping experience by allowing them in real-time to check whether an item is available, draw directions to the closest macy’s store and print out the map and the barcode.
YUI libraries, MapQuest API intergration, Ajax with JSON formated data, CSS were the main technologies and implementations used to develop this wizard-like flow.