Home
Red Carpet Database Web App

Red Carpet Database Web App

to : We build the IMDB of fashion on a shoe-string budget.

Showcase & Media

Architectural Diagrams

Check out architectural diagrams of this project

Problem

What was the problem to be solved?

Elizabeth Snead, a former reporter for the Washington Post, New York Times and Hollywood Reporter approached us with an idea for an app.

Described as the IMDB for fashion, the app would catalog celebrity outfits by a plethora of attributes in the same way IMDB did for movies.

For example, a user could find all of the dresses Jennifer Aniston wore to all events in the last three years.

Or a user could see all the dresses worn by all celebrities at the 2012 Golden Globe awards.

Admins could also tag the outfits with an unbounded number of attributes such as color, style and more. Users could then use these attributes to find outfits and celebrities.

For monetization, we created advertising tools that allowed advertisers to bid on certain attributes and show "knock-off" dresses to users. For example, Target could show one of their red strapless dresses to a user who searches for red, strapless dresses.

Solution

What was the proposed solution?

The project scope was constantly changing, so we needed to choose a development framework and project methodology that was flexible enough to change nearly on a whim.

Also, mobile phones were just starting to emerge as the dominant way to consume web apps such as this, so we had to implement a solution that would allow for a robust experience on all devices.

Challenges

What challenges arose during the project?

1) Budget - Gunner's budget was non-existent for this project. Our compensation was entirely equity based, so we were depleting our own funds. As this was in the early days of the company, those funds were tight.

2) Data Mapping - A free-text solution was not nearly structured enough for us. We needed a way to allow our admin to add an infinite number of attributes to an infinite number of pieces of outfits. Not only did outfits need tagging, but so did pieces of the outfit (i.e. dress, hat, jewelry). Each outfit and piece also needed a designer and a stylist associated with them.

3) Data entry - Because of the complex data connections, we quickly realized that building a spreadsheet importer was going to be impossible. For that reason, we had to make a really quick photo uploader as each outfit would have about 10 high-res photos. We then had to be smart about recognizing pieces of the outfit and highlighting them for the admin to tag.

4) Device support - We realized that mobile devices would be critical to our success, but we didn't have the budget to build native apps for Android and iOS (and this was before the advent of React Native). Responsive Design was also in it's early days and the term "Progressive Web App" hadn't even been coined yet.

Technical

What was the technical approach to the project?

We alleviated problem #1 by going with all Open Source tools and leveraging AWS' Free Tier program.

We chose Ruby on Rails as the web framework and hosted it on AWS Elastic Beanstalk.

We used nearly 20 different Ruby-gems">Gems to help Bootstrap as much of the functionality as we could and prioritized functionality and cost above precision.

At the time, jQuery was the pre-dominant JavaScript library and we leaned heavily on that to optimize Data entry and tagging.

We didn't have budget for a designer, so we relied heavily on the foundations of the Bootstrap Design Framework to create a functional design that focused on the content while making finding the content as easy as possible.

Bootstrap also helped us create a design that was responsive and was optimized for all devices.

We used MongoDB as the master source of data, but syndicated the data to a Postgres Database as we needed complex queries for reporting.

Management

What was the project management approach to the project?

This was very much a "fly by the seat of your pants" project.

Meaning, we had no choice but to use an Agile methodology as the Gunner Team had no experience with the fashion / entertainment industry and our partner, Elizabeth, had no experience with technology.

It was very much a "Show and Tweak" process where every week we demoed the project and then optimized it based on her feedback.

We kicked off the project with a Research Sprint that lasted two weeks.

This was followed by a feature sprint and then a bug fix / optimization sprint.

The latter pattern continued until we considered the project "launch-able."

Architectural Description

What platform was built for this project?

AWS Elastic Beanstalk gave us an easy-to-use service for deploying and scaling our Ruby on Rails web applications on nginx.

We connected our Beanstalk environment to our CodeCommit Git repository and Elastic Beanstalk automatically handled the deployment details of capacity provisioning, load balancing, auto-scaling, and application health monitoring.

Elastic Beanstalk provisioned and operated the infrastructure and managed the application stack (platform) automatically.

It will also kept our underlying platform up-to-date with the latest patches and updates, which allowed us to focus on writing code rather than spending time managing and configuring servers, databases, load balancers, firewalls, and networks.

Elastic Beanstalk automatically scaled the application up and down based on our Auto Scaling settings.

Lessons

What did you learn from working on this project?

We learned a lot about how to scale flexible data models using a combination of NoSQL and SQL solutions.

Benefits

How did this project benefit the client?

In the end, we made a wise choice investing in this project.

Despite a non-existent budget and other challenges, we managed to release a product that was strong enough to attract the inteREST of The Hollywood Reporter, which ultimately purchased the app for its technology and IP

Unfortunately, the project was ultimately shuttered, but that was part of the agreement and the technology we built continued to live on.

Why Gunner?

Why was Gunner selected for this project?

Gunner has a unique ability to maximize constraints.

We were working with zero budget and a neophyte to the technology world.

However, our ability to move projects forward by focusing on function rather than perfection kept this project from stalling.

Instead of being dogmatic, we were flexible and built a product from usability feedback that suited the needs of both our admins and users.

Proficiencies

What tools, techniques and methodologies were used on this project?

[object Object]

Adobe Photoshop

Photoshop is Adobe's photo editing, image creation and graphic design software.

[object Object]

Agile

Agile software development refers to a group of software development methodologies based on iterative development, where requirements and solutions evolve through collaboration between self-organizing cross-functional teams

[object Object]

CSS3

CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2.1

[object Object]

Git

Fast, scalable, distributed revision control system

[object Object]

HTML5

HTML5 is the 5th major revision of the core language of the World Wide Web

[object Object]

JavaScript

JavaScript is the world's most widespread programming language, powering the Internet.

[object Object]

jQuery

jQuery is a fast, small, and feature-rich JavaScript library.

[object Object]

MySQL

The world's most popular open source database

[object Object]

Ruby

Ruby is a dynamic, interpreted, open source programming language with a focus on simplicity and productivity.

[object Object]

Ruby on Rails

Rails is a web application development framework written in the Ruby programming language

S

Scrum

Scrum is a framework for project management that emphasizes teamwork, accountability and iterative progress toward a well-defined goal.