PhantomBroker

• 

  Prelogin dashboard

• 

  logged in Dashboard

Inspiration

PhantomBroker was inspired by the need for a modern, streamlined way to negotiate deals and manage contracts online. We noticed that most platforms either lacked real-time communication or made contract management cumbersome. Our goal was to create a tool that makes negotiations as seamless as chatting, while keeping everything organized and accessible.

What it does

PhantomBroker enables users to negotiate deals in real time, send and receive messages, and manage contract details—all in one place. The platform is designed to be intuitive, with features like message threading, negotiation tracking, and placeholders for future enhancements like auto-responses.

How we built it

We built PhantomBroker using React and Vite for a fast, modern frontend experience. Firestore powers our real-time messaging and data storage, while Supabase is used for user settings and future extensibility. We leveraged Radix UI and shadcn/ui for accessible, customizable components, and TypeScript for type safety throughout the codebase.

Challenges we ran into

We faced several challenges along the way:

Environment Variables: Getting Supabase and Firestore credentials to load correctly in Vite required careful setup and troubleshooting. Real-time Sync: Ensuring messages appeared instantly for all users meant learning the ins and outs of Firestore’s onSnapshot and handling edge cases. UI Consistency: Integrating multiple UI libraries and keeping the design cohesive took more effort than expected. Feature Scope: We initially planned to launch with auto-responses, but decided to disable them for now as the logic and UX needed more refinement. We also struggled with getting the favicon to display—despite adding it to the code multiple times, it still refuses to show up to this day. It’s a small detail, but a surprisingly persistent mystery.

Accomplishments that we're proud of

Built a fully functional real-time negotiation and messaging platform from scratch. Designed a clean, modern UI that’s easy to use and extend. Set up a scalable architecture that can support future features like AI-powered responses or advanced contract workflows.

What we learned

The importance of clear environment configuration, especially with multiple services. How to manage real-time data flows and state in React. That sometimes it’s better to launch with a solid core and iterate, rather than overloading the first version with unfinished features.

What's next for PhantomBroker

Looking ahead, we plan to integrate AI-powered features to help users negotiate smarter and ensure fairer deals. Soon, PhantomBroker will offer intelligent advice based on the offers you receive—providing suggestions, highlighting potential pitfalls, and helping you make more informed decisions during negotiations. Our goal is to empower users with real-time insights and guidance, making every deal more transparent and balanced.

Built With

• css
• eslint
• firebase
• firebase-sdk-styling:-tailwind-css-other:-node.js
• github
• html5
• javascript
• javascript-frameworks/libraries:-react
• node.js
• prettier
• radix-ui-cloud-services:-firebase-(firestore)
• react
• shadcn
• shadcn/ui
• supabase
• supabase-(for-user-settings)-apis:-supabase-rest-api
• supabase-databases:-firestore-(for-real-time-messaging)
• typescript
• vite