The whole idea of snippets got us very excited early on. No longer would we look at injecting code into a website as a security vulnerability but as an option to build cross-domain components, well done Square this could really be revolutionary. It was great to work on a hackathon backed by a company as Square and snippets gave us a great springboard into their huge ecosystem without tackling the more in-depth Web or terminal API. At the same time, it was a challenge to make code that would work across various sites, be lightweight and performant as well as securely call back home and allow some of our more ambitious features like chat and video calls.
What it does
- Allows users to upload and consume content
- user to user chat and call
How we built it
We came across the Svelte framework which was the perfect candidate for a lightweight injected snippet. In fact, our snippet carries an initial payload of less than 1kb!
Our journey started with a chat application. After exploring available technologies we settled on using firebase for our real-time database and authentication. However, this brought about another problem: we could only access firebase through specific whitelisted domains…
Thus a journey down the iframe rabbit hole began. We quickly discovered the Zoid JS ‘cross-domain component’ package which allowed us to serve our main application from a central server, which was whitelisted in firebase, while seamlessly integrating into the injected snippet without the usual iframe usability pitfalls.
After building a basic chat application, we explored the possibilities of WebRTC video chat.
Midway through the hackathon we pivoted from the chat and call aspects of the application to our new idea: a cross-domain social commerce platform. It would allow site owners, influencers and consumers to share and consume content about their favourite products and earn discounts in the process.
Unfortunately, we did not have the time to complete all aspects of the SWiF platform, but we feel we have presented a compelling demo that showcases the potential of SWiF, particularly on the consumer side.
Accomplishments that we're proud of
- super lightweight widget
- iFrame cross-domain component
- design and overall feel of the app
- getting 5 people together on a join mission
- we even wrote some decent tests and were running CI
What's next for SWiF - Shop With Friends
We think there are some really exciting avenues to explore next. Certainly, we are looking at getting an app into the Square marketplace. At the moment the first likely step seems to be an app that gets the shop social presence (Instagram/Facebook/Twitter) and provides a collage through the snippet widget. This would then lead us into the core idea of ours which is brand ambassadors posting back to a site. We hope to get some validation of these ideas from the judging process, we have our fingers crossed.