De Anza Marketplace

UI
Codepan Front End

Inspiration

We were inspired the likes of sites such as Facebook Marketplace, OfferUp, and Craigslist. We wanted to make a similar website, but narrowed down to a smaller demographic, the demographic we all are involved in: De Anza students!

What it does

So what our site does is make the user sign up and log in only using their CWID from De Anza. Once they sign up or sign in, they are then redirected to our marketplace page, where they have the option to sell or buy items, and this is also our main home page which shows the different categories on what they could possibly buy.

How we built it

We built the frontend with plain HTML, CSS, and JS for simplicity, using Firebase for data and auth. A small Node.js/Express server handled development utilities and admin endpoints.

Challenges we ran into

Firestore listeners sometimes stalled due to auth issues, requiring retry logic and a dev WebSocket relay for testing. We also carefully managed Firestore indexing for queries and adapted to scope changes like removing the chat feature.

Accomplishments that we're proud of

We delivered a responsive marketplace UI with a functional listing grid and a built-in seller contact flow. The codebase remains robust and maintainable with centralized configuration and clear error handling.

What we learned

Always design visible error states for auth failures and keep the data model simple for performance. Modular, dependency-light code is crucial for allowing quick pivots and easy iteration.

What's next for De Anza Marketplace

We will polish the contact UX with click-to-copy links and introduce user profiles with verified contacts. Future steps also include adding moderation controls and improving server-side search and filtering.