Lights Camera Auction

Lights Camera Auction is a minimalist, real-time silent auction website. With 3D objects to truly engage with the product and live updates to keep you on track of the items, every product must go!

Comment

Inspiration

Our inspiration was to make an online silent auction that resembled an in-person one. With 3D images, you can truly see the product in all angles. To accomplish the real time updates, we used web sockets to broadcast all events to the clients.

What it does

Following the NBC Silent Auction, we were able to complete the following:

  • Signup/Login system with email verification
  • Secure passwords that are encrypted via firebase
  • Bid validation such that only verified users can login
  • Item submission where admins can add desired fields
  • Item listing page with all the available products
  • Placing bids at a fixed increment
  • Real time updates of new bids and items
  • Cloud based database using firebase
  • Unlimited betting on items (as long you didn't create them)
  • Countdown timer on each item
  • Automatic auction closing on cooldown timer
  • Winner notification once auction ends
  • Reserve Pricing as a bonus feature
    • Outbid alerts as a bonus feature

How we built it

Our code was split into three main components: frontend, backend, and database.

In the frontend, we created a web socket client to communicate with the database. We also used firebase to authenticate users safely. Finally, we loaded and styled the website's looks and 3D objects.

In the backend, we ran a web socket server to handle client messages while also broadcasting update to keep clients up to date. We made sure to leverage the data effectively, while reading and updating the database.

The database was storing the item data as well as the authentication for the users.

Challenges we ran into

Learning new technologies was challenging, but the hardest part of the following technologies were:

  • handling communication between the server and client
  • integrating web socket clients within our react project
  • generating spline components and using them within our codebase
  • Creating a sleek, sophisticated styling for our website

Accomplishments that we're proud of

We are extremely proud of ourselves for the work we put in. We definitely want to highlight the following:

  • Completing the requirements from the NBC Challenge + some bonus features
  • Learning different technologies and applying them within our project

What we learned

With our different skills and responsibilities, each developer learned vastly new technologies and concepts. Some notable items include:

  • web sockets (server and client)
  • Spline for 3D objects
  • Firebase for handling item information
  • Dealing with react concepts (router, location, states across components)

What's next for Lights Camera Auction

There were some features we wanted to include, that unfortunately didn't have the time to complete:

  • custom notification dialogs rather than alerts
  • deploying our front and back end
  • Making our website mobile-friendly
  • Using AI to create real-time analysis on the state of the auctions
Share this project:

Updates