Projects - Edwin R. Lopez Portfolio

Application Development

A great deal of my development experience comes from building web-based applications and network services. I'm a full-stack Java developer with expertise in areas of relational database design, use of Model-View-Controller (MVC) and Inversion-of-Control (IoC) frameworks, and front-end user interface design (UI) for web browsers, Android devices, and even HTML-based Smart TVs.

The technologies I tend to gravitate to for building web applications revolve mostly around HTML, CSS, JavaScript/JSON, Java, JSP/Servlets, and frameworks such as Struts. I may also use PHP or scripting languages for lightweight projects, and C/C++ if running in a resource-constrained embedded system.

Below are screenshots of applications I have worked in the past. What is common to all these applications is the single-page-load approach used to implement their user interfaces; i.e. the HTML page loads once and any further communication with the back-end server as well as any UI updates are made dynamically using JavaScript and DOM manipulation techniques.

GUSDEX: A Software-as-a-Service (SaaS) Startup

As a developer at GUSDEX LLC. (a startup company) I was tasked with the design and development their software product, the Personal Business Center, as well as designing graphic content for use in their website and marketing materials. The Personal Business Center followed a software-as-a-Service (SaaS) model and provided Small Business owners with tools to market their businesses online.

The software included a QuickBooks-like accounting tool to track expenses and revenue, an address book database to store customer contacts, a WYSIWYG editor to enable business owners to create and publish their websites online, and a Outlook-like Web Mail interface and email addresses for the business own domain name.
GUSDEX Main Screen - Edwin R. Lopez Portfolio

Main Screen

The Personal Business Center had a very rich and user-friendly interface. The front-end was built in HTML and JavaScript and the page loaded only once.

Different parts of the applications were accessed via tabs at the top of the screen and each view was generated on-the-fly using JavaScript and DOM techniques.

I designed and built an object-oriented JS library of reusable UI controls that included sortable Lists, Data Grids, Trees, and Tabs; making the implementation of complex screens very straight-forward.
GUSDEX Accounting Screen - Edwin R. Lopez Portfolio

Accounting Spreadsheets

The accounting screen allowed the user to sort expenses (or revenue) by type, amount, or by customers. It also supported grouping and summarizing totals by month. All values in the page updated dynamically without need to reload the page.

The spreadsheet data could be exported to excel or CSV files. In addition the tool was capable of creating invoices for customers as well as year-end expense reports to help with the business tax preparation.
GUSDEX WYSIWYG Website Editor - Edwin R. Lopez Portfolio

WYSIWYG Website Editor

The rich web editor enabled users create their own websites. Pages were easily created by adding styled titles, headers, bullet lists, images, hyperlinks, and custom business logos. Lastly, the look-and-feel of the published website was selected by choosing any of templates in GUSDEX design gallery.

GUSDEX WYSIWYG Website Designer - Edwin R. Lopez Portfolio

tachyon: A Model-View-Controller Framework (MVC)

I love writing development SDKs and reusable API libraries. When I joined ASG Software Solutions, one of my projects involved creating tachyon, a proprietary Model-View-Controller (MVC) framework specifically designed for building rich desktop-like web applications.

The framework consisted of a very robust AJAX API (to exchange data between the front- and back-end) and a set of cross-browser reusable UI controls that included Lists, Tabs, Trees, Data Grids, Popup Menus, Toolbars, Progress Bars, Dialogs, Sliders, Property Sheets, and Drag-and-dock Panels.
Cypress Studio - Edwin R. Lopez Portfolio

Cypress Studio

To convince ASG of the power of HTML, JavaScript, and CSS, I created a prototype called Cypress Studio, a web application shell that could be used to integrate several of the ASG's Business Intelligence applications in a single web interface.

This application shell was designed to load once, and everything else thereafter could be rendered dynamically using the tachyon's UI controls and AJAX functions.
Report Designer - Edwin R. Lopez Portfolio

Report Designer

This was a tool for creating printable reports against ASG's proprietary Safari database engine. This UI was written entirely in JavaScript and behave very much like PowerPoint; the user could add, move, resize, and format text fields, shapes, and lines anywhere in the page.

Toolbars, drop-down Menus, and Tabs were created with tachyon UI controls using the Office 2003 look-and-feel.
Query Designer - Edwin R. Lopez Portfolio

Query Designer

This was a point-and-click tool for building queries against ASG's proprietary Safari database engine. I built the interface to mimic the behavior of Microsoft Access.

The lines used to "join tables" were drawn using VML in Internet Explorer and canvas in all compliant browsers.

This interface uses tachyon's drag-and-dock UI controls; the user can move any panel anywhere in the screen similar to the UI functionality found in VisualStudio.

A Cable Node Serviceability Management Tool

The following screenshots belong to an intranet application used by cable technicians to maintain a database of cable nodes, customer addresses, and serviceability of nodes at given address locations. The application was built on top of an Oracle database using a stack of Spring, Struts, and Java Servlets and deployed on a cluster of WebLogic managed servers.

As member of the development team I collaborated in many areas of this application including Oracle PL/SQL stored procedures development, writing Hibernate/JPA DAO components, implementing SQL queries using Spring JDBC-Templates, writing Struts actions, and building JSP UI front-ends.
Main Menu Screen - Edwin R. Lopez Portfolio

Home Screen

When I came aboard on this project the application's UI only worked in Internet Explorer. I did a complete overhaul of the UI and added a new cross-browser screen layout which included user-friendly icons and richer graphics.
Bulk Import Screen - Edwin R. Lopez Portfolio

Dynamic Screens

I converted many of the application screens from using a "request-response" approach to a "single-page-load" approach.

Data is fetched from the server using AJAX techniques and screen updates are done by means of dynamic JavaScript controls.
User Manager - Edwin R. Lopez Portfolio


Dynamic Screens - contd.

I created reusable JavaScript UI controls to build the screens. These include Toolbars, Tabs, Sortable Lists, Pagination controls, and pop-up Dialogs.
Google Maps Finder - Edwin R. Lopez Portfolio

Location Finder

I used the Google Maps API to design a screen where a cable technician could draw a polygon on a map and easily find the serviceable cable nodes inside it.

In essence, the polygon was broken down to latitude/longitude pairs and passed as criteria to a back-end Oracle spatial query.
Home | Embedded Design | Application Development | Graphic Design | Live Demos | Resume     /     Raster API
© Edwin R. López