Inspiration

In our time the way we shop has been evolving drastically. Gone are the ways of traditional static eCommerce shopping. Retail store chains have been struggling with getting people into their stores as more of the public turns to shopping online. As everyone has gained the power of modern smartphones in their hands, social media has taken over and people are starting to share their daily lives with their friends through live-streaming. This is where Stream Shopper enters. We provide a dead simple way for sellers and consumers to purchase and shop for products in very simple steps. Tedious items like shipping and logistics are simplified thanks to the usage of ShipEngine to provide seller and shopper and simple mechanism to sell, deliever and receive packages. The application of this app is endless (e.g. flash sales, bargain shopping, personal shopper, garage sales). We believe that Stream Shopper will combine the fun of shopping in physical stores with the convenience of online shopping.

What it does

The app provides two user experiences, one as seller and the other shopper. On the seller side, the user needs to just take pictures of the items they want to sell, a title, price and weight of the item (for determining shopping logistics). After this setup, the seller starts the stream. On the buyer side, the user needs to just fill in his payment and address information (if they're browsing, the app can use their geolocation to infer the approx address to get estimate shipping). The user then signs into the stream, looks through the side panel catalog, answers questions in real time and can hear their live pitch. Once the user decides to order product, the shipping option is laid out in simple sections (think of it like UberX and UberBlack) showing their approx delivery time and the actual shipping cost. ShipEngine then automatically provides the labels for the seller and also provides tracking for the shopper.

How I built it

The app was built using react-native and redux for state management. We leveraged OpenTok PaaS so that we didn't need to create a WebRTC, streaming platform from scratch. We utilized the ShipEngine API for dynamically grabbing rates on individual weight of each item.
The navigation was built using the react-navigation library with some of our design elements coming from react-native-elements. The submission and credit card information views were first planned out through white-boarding. We then built using Expo.io which allowed us to see a live preview of the build as we coded.

Challenges I ran into

Javascript and React were completely new to both Desmond and Maria so it took some time for them to get up to speed. In fact, this has been Maria's first time programming with a text-based programming language. For the rest of us, we were new to React-native and ran into some issues trying to configure everything to run correctly on the machines. Working with android and ios and getting native components and fixing library linkage issues.

Accomplishments that I'm proud of

Desmond: "I overcame the obstacle of installing, learning, and coding on android studio and expo in JavaScript, all within a day. I also learned how it feels to start a project and brainstorm for project ideas, as this was my first Hackathon I have ever attended."

Maria: "As a beginner in Computer Science, knowing little to nothing at all about writing code, challenging myself during this weekend and being mentored by my amazing teammates to be able to write code in a platform called "Snack" and using React Native as a guide in order to perform a function was such a wonderful experience. I'm really proud of what I did because it was my first time."

David: "This was my first time ever using react-native and I am honestly still pretty green with React in general. I am just happy that I was able to get a much better handle on how it flowed and can see this is a platform I can possibly use for mobile development in the future. What I am most proud of, however, is just how far Maria and Desmond were able to accomplish and learn this weekend. I have been helping mentor the two of them for the last few months and I was blown away by what they were able to do in just a day."

Eugene: "Creating a full fledge working product, having the app actually stream with OpenTok and integrating ShipEngine to dynamically provide rates."

Presentation

https://youtu.be/ED74Ea9lAXk?t=479

Built With

Share this project:

Updates