Silent Auction

Every year, Fairview High School’s National Honor Society (NHS) hosts a silent auction to support a local organization. I worked in parallel with another developer to build NHS a web-based silent auction app.

Role: Full-stack developer (front-end emphasis)

Duration: 2019

Technologies: NodeJS, React, TypeScript

Fairview High School Website Redesign

Goals & Criteria

  1. Anonymous bidding
  2. Alternate auctions based on auction date
  3. Display information about auctions (ex: starting price and highest bid) in clear, accessible manner
  4. Simple content management system
  5. Quick and easy way for bidders to provide contact info

Context

Traditionally, NHS conducts its silent auction digitally. This year, NHS prepared 24 auctionable bundles containing items from multiple sponsors. At parent-teacher conferences, NHS members would present parents the silent auction site via Chromebook or iPad. Parents would then be asked to bid on bundles.

Another site had been built for the annual silent auction a number of years ago. My partner and I struggled to understand and operate the site due to an absence of documentation, buggy code, and obscure features that failed to meet NHS's current needs. We ultimately decided that between salvaging the old site and creating a new one, the latter was more feasible and sustainable over time.

Challenges

  • Understanding needs
    As this was my first time participating in the silent auction event, a lot of communication was needed to help me understand the context of the situation and what functions the app needed to support.
  • Time constraints
    We had just a few days to build the site.

Design & Development Process

Due to the extreme project time frame (four days), development and design took place almost simultaneously. Before beginning work, I made several quick wireframes to show the other developer (who would be building the application backend) how I planned to structure the user interface and what information I would need from the backend.

Mockup Sketch Mockup Sketch

I proceeded to create and style different React components (ex: sign up form, auctions, bidding forms) to incorporate into the application. As we continued to learn about NHS’s needs (such as a request to display the logos of the sponsors for each auction), I made slight adjustments to the designs.

Auctions Modified to Accomodate Sponsor Logos

Solution

By working efficiently and switching roles between backend and frontend development, my partner and I completed the site just in time. After two days, all auctions closed above starting price.

Mockups

Reflections

Although I was very pleased with the results, working on silent auction taught me some important lessons about time-management. Ideally, we should have spent more time developing the new app instead of trying in vain to rescue its predecessor. Development was beyond stressful and even a small disruption or mistake could have compromised the project's completion.

Also, we'll definitely take care to document the new site to the best of our abilities. :3