Omi Live Shopping
Duration: Two week sprint
Omi Live Shopping is a one-of-a-kind, green-first streaming platform that connects you with a community of eco-conscious shoppers who are passionate about supporting environmentally friendly businesses. Our platform provides an interactive experience where you can live stream your product, answer questions from viewers in real-time, and receive a sales commission on each purchase made during your stream. Omi Live Shopping is committed to showcasing authentic, sustainable products and practices and building trust between viewers and content creators.
Create a database named
omi_live. If you would like to name your database something else, you will need to change
omi_liveto the name of your new database name in
The queries in the
database.sqlfile are set up to create all the necessary tables. The project is built on Postgres, so you will need to have that installed. We recommend using Postico 2 to run those queries.
Open up your editor of choice and run an
npm installto install the necessary dependencies.
.envfile at the root of the project and paste this line into the file:
While you’re in your new
.env file, take the time to replace
superDuperSecret with some long random string like
25POUbVtx6RKVNWszd9ERB9Bb6 to keep your application secure. Here’s a site that can help you: https://passwordsgenerator.net/. If you don’t do this step, create a secret with less than eight characters, or leave it as
superDuperSecret, you will get a warning.
npm run serverin your terminal
npm run clientin your terminal
- Begin by creating an account with a username and password. Follow best practices for password security (some guidelines can be found here). Login with these credentials.
- A new account will default to be a Viewer account. If you want your account to be a Streamer/Admin account, you will need to go into Postico (or wherever you are running your database) and change the isAdmin column from FALSE to TRUE. Save your changes.
- When you login, you will first be brought to the home page and the Watch tab. If there is not a livestream happening, you will see “Sorry there are no streams currently available.” If a livestream is happening, you will see a preview of the video and a “Join” button. Click this button to join the stream.
- In the livestream, you will see the video, the chat panel, and the product panel.
- In the product panel, you can see the current product being featured in the stream, the option to purchase the product on an external site, or add the product to your wishlist for later. You can also see which products will be featured next in the stream.
- In the chat panel, you can send questions and comments to the streamer and other audience members in real time.
- From the home page, you can also take a look at all of the products under the Products tab, or view the items you have saved in your Wishlist.
- When you login, you will first see a list of Streams that you have created. You can click these streams to see more details about the stream.
- You can create a new stream from the home page by clicking the Create New Stream button. Enter the title, description, and choose a date for the stream.
- Once you have created your stream, you can add products that will be featured in the stream, either by creating a new product or choosing one already entered in the app.
- After selecting the products, you can reorder or delete products from the stream.
- Once you have finalized your products, you can click “Go Live” to enter the livestream controls page. (You will also need to start streaming on OBS – please see OBS Instructions).
- On the Livestream page, you can change which product you are currently featuring to the audience, view, send, and delete chats to audience members in the chat panel, and end the stream once you are finished.
- From the home page, you can view all products in the products tab. On the page for an individual product, you can edit the information or delete the product from the app entirely. You can also choose to make a product visible to viewers on the app by checking the Public checkbox.
- Postico 2
- Material UI
- Node Media Server
A huge thanks to our client Summer Lee for the idea and vision behind OMI Live Shopping. Thank you to Dane Smith and Prime Digital Academy for the training, support, and guidance through the process of building this application.