Polaris

Inspiration

We've all been there - waiting endlessly for the server to take our order or struggling to flag someone down for the check. And let's not even get started on the chaos of splitting the bill among friends. It was these frustrating experiences that inspired us to create Polaris, a seamless solution that puts the power of ordering and paying right at your fingertips.

What it does

Polaris offers a shared cart experience for customers and merchants. For customers, it's as simple as scanning a QR code at your table or location. From there, you can browse the menu, add items to your cart, and place orders without ever having to wait for a server. And the best part? You can watch your pending orders appear in real-time, so you know exactly when your food is coming. It also allows for live sharing carts among those at your table, and live updates when ever someone adds something to your cart. This way, it is easy to split the bill and share your order. Even the server can add to your cart.

Use Cases

Ordering food at a restaurant - When ordering at a restaurant, it can be difficult managing all the different items, services, and synchronous requests that both a merchant and customer might need to fulfil. Polaris eliminates that by creating a shared cart that both merchant and customers can fit their needs.
Ordering drinks at a crowded bar - When visiting a crowded bar, it can be hard for merchants to track, manage and identify each person that would like a drink. With Polaris, there's no need for the unnecessary overhead of transactions.
Hosting an event - Let's say you're hosting the next big party at your college. You want everyone to be able to attend, but you don't want to physically take cash, manage payments, and exchange funds with each individual person. With Polaris, you can directly send the funds that you need to the merchant, and only one QR code is required.

Customers

For customers, the QR code system simplifies transactions with businesses. You no longer have to wait for servers or worry about flagging them down to place your order. Instead, just scan the QR code at your table, browse the menu, and place your order directly from your phone. It's quick, convenient, and hassle-free.

Merchants

For merchants, Polaris empowers you to take control of your business. You can effortlessly manage multiple QR code carts, making it easy to add or remove items as needed. This helps streamline your operations and ensures a smooth ordering experience for your customers, encouraging them to return time and time again. With Polaris, you can easily view pending orders and items in carts, giving you the flexibility to make adjustments, add new items, or complete orders with just a few taps. It puts you in the driver's seat, allowing you to provide top-notch service and keep your customers satisfied.

How we built it

We built our app using React Native in conjunction with Expo to provide a cross-platform mobile experience for the Android, iOS, and web platforms.
To power our backend, we utilized Supabase as our Backend-as-a-service (BaaS) platform.
To enable file system-based routing, we utilized Expo router.
Our programming language of choice was JavaScript (in light of Purs using JavaScript across the stack)
Lottie for our splash screen animations
Nativewind V4 for a native-like Tailwind CSS integration with mobile application.
Expo Camera to facilitate QR code scanning

By using Supabase's real time Postgres Changes subscription model, we ensured seamless data management and real-time updates across all clients. Additionally, we were thankful for React Native's cross-platform compatibility as it enabled us to create a consistent user experience across devices.

Challenges we ran into

Being available for long periods of time: With a longer hackathon like this, it takes work to find time to work synchronously as a team.
Onboarding/learning Supabase: Supabase is a tool we've never used before but wanted to try, there was a lot of work spent reading the documentation and learning from the examples they provided in their docs.
Integrating Tailwind CSS: Tailwind CSS is generally used in the context of a browser environment, there were a lot of pesky little bugs and errors that we encountered trying to use Tailwind in a React Native application.

Accomplishments that we're proud of

Polaris works! The application successfully works as we intended when we started this competition. That alone is a huge win for us as a team.
Polaris is usable! The application is generally free of bugs and any regressions, which is another thing that we're also proud of.
Learning Supabase and more advanced React Native use-cases