A chemistry research institute for the fragrance industry needed to share studies and data with its contributing members. IdeaBlade developed a web application for easy access to materials, studies, references, toxicology reports, usage data, and molecular diagrams. Their sophisticated users want screens dense with information and both on-screen and printer-friendly views of the data. Responsive design allows the UI to scale intelligently on desktops, iPads, and Surface Pros.

Technologies included ASP.NET, Entity Framework, C#, Angular, TypeScript, Node, Breeze, SQL Server, Windows 2008 R2. The customer chose Microsoft Word to specify requirements and document the product. The customer chose Excel to track project tasks and progress. All project documents are shared on OneDrive.

Size:

• C#: 180+ files, 17000+ lines of code
• TypeScript: 320+ files, 18000+ lines of code
• HTML: 120+ files, 5800+ lines of code
• Screens: 60
• Domain Model: 130+ entities
• Database: 200 tables

Complexity:

• IdeaBlade wrote the predecessor app several years ago in Silverlight. They engaged IdeaBlade again to rewrite it for the web in Angular. The new Angular version is much faster and more capable than the original Silverlight version.
• Users navigate a complex network of materials, studies, references, safety information, and chemical properties with a simple search interface.
• The app targets scientists and researchers who know what they're looking for, so pages are dense with detailed data and auto-generated molecular diagrams. They strongly prefer rapid access to information over a slower, click-happy, ease-of-use UX aimed at casual users.
• Client has almost no technical staff. IdeaBlade did all the analysis, design, development, and deployment.
• The first release was delivered in less than six months.

Below are a few components of this solution.

Fragrance and Flavor Page

Data are retrieved from multiple database tables, cached, and assembled in the browser app into large, complex domain object models.

Screens pivot around these graphs to suit the user's perspective. Data are grouped and sorted dynamically, based on user criteria, and presented in a tabs-within-tabs interface.

Molecular Images

A third-party library generates and displays molecular diagrams for materials.

CustomReports

The app dynamically creates printable reports and displays a preview in front of the dimmed application page. These reports render in seconds even when several hundred pages long.