This project was submitted to Square's Local Community Hackathon.
You can also try out the live demo by logging in and authenticating with your Square account.
Navigating the vast sea of online products can feel like finding a needle in a haystack, especially without the guidance of a knowledgeable sales representative. My friend and I know this struggle all too well — the hesitation, the uncertainty, the fear of missing out. That's why we created Square Edge: a game-changing integration designed to empower Square sellers and elevate the shopping experience on their Square Online Store. Picture this: virtual sales rooms that not only streamline decision-making for customers but also forge meaningful connections between sellers and potential buyers. Our mission? To bridge the gap between your products and your customers, ensuring that every purchase decision is informed, confident, and satisfying.
Square Edge revolutionizes online retail by transforming it with interactive, engaging virtual experiences through industry-leading live selling, delivering 8X more engagement than traditional digital catalog-based selling.
- Next.js (Full stack Web Development)
- Tailwind.css (Utility-first styling)
- shadcn UI (Headless components)
- framer-motion (Animation)
- SWR (Data fetching and caching)
- MongoDB (Non-relational database)
- Vercel (Hosting)
- zustand (Global state management)
- lucide (Icons)
- jose (JWT encryption)
- stream (video and chat)
- OAuth
- Sites
- Snippet
- Catalog
Finding a way to properly integrate a third party application to the Snippet's API was a little challenging, but once we go the format down, it was good to go. We also had trouble with authenticate Square with our application, but with some resources from the Discord channel, we were able to figure it our rather quickly. Finding a way to map the virtual sales room to the Square online store was challenging as well, but with careful inspection of the DOM, we were able to find a clever workaround that did the trick.
Given the one moneth time constraint, we’re able to create this full-stack application from scratch to solve a real world problem that really hasn't been implemented yet, which is something we're extremely proud of.
We learned how to leverage Square Developer APIs to bring communities together through live streaming events, to help others make informed decisions when it comes to buying products online.
In the future, we're looking to step up our game with Square Edge:
- Enhanced Interaction: Get ready for an immersive experience like never before. We're working on integrating live chat functionalities, Q&A sessions, and interactive polls directly into the virtual sales rooms. Engage with your customers in real-time, answer their questions, gather valuable feedback, and build stronger connections that last.
- Personalized Recommendations: Square Edge will analyze customer behavior and preferences to deliver personalized product suggestions tailored to each individual shopper. Increase upsells, cross-sells, and customer satisfaction with targeted recommendations that hit the mark every time.
- Seamless Integration: We're constantly expanding our integration capabilities to ensure that Square Edge seamlessly integrates with a wide range of e-commerce platforms, beyond just Square. Whether you're using Shopify, WooCommerce, or another platform, rest assured that Square Edge will fit right in, enhancing your online store's capabilities and driving growth.
- Analytics Dashboard: Empower sellers with valuable insights into customer behavior, sales performance, and engagement metrics. Track key performance indicators, identify trends, and make data-driven decisions to optimize your sales strategies and maximize your ROI.
- Virtual Try-On: Soon, shoppers will be able to virtually try on clothes, accessories, and even makeup in real-time, right from the comfort of their own homes.