Design Landing Page and Write the instruction Document

[yimingStar]

Design instruction documentation for both Sellers and Buyers, the steps will use to build a landing page

@chouhy @llerenabarruetos Please post them into

https://github.com/UF-CEN5035-2022SpringProject/GatorStore/blob/main/seller-frontend/seller-instructions.md

or

https://github.com/UF-CEN5035-2022SpringProject/GatorStore/blob/main/buyer-frontend/buyer-instructions.md

[yimingStar]

Buyers Documentation

[llerenabarruetos]

General:

• What is Gatorstore?
  • GatorStore is an online shopping platform that combines buying with video livestreaming. Using the YouTube API, it allows sellers to create livestreams centered around their products and buyers to watch, buy, and chat on an interactive platform.

Buyer:

• Login: Press the "Sign-in" button on the top right to use your Google account within Gatorstore. After granting usage permission, you will be re-directed to the landing page.
• Landing page: On this landing page, you can find a list of popular stores beneath the "Recommended Stores" section.
• Store Page: The Store Page is the hub for live user interactions and browsing through the products. You can visit each of the products to buy them by clicking on "View More" beneath each. If the store is live, the YouTube livestream and chat will automatically be embedded in the top of the page, alongside its featured products. Even when not livestreaming, you will be able to browse through a store's products on the lower portion of the page.
• Product Page: The Product Page displays the key information for a listed product, such as its title, image, price, and description. The product's store is listed on the right side, alongside a link to visit it. If the product is in stock, the "Purchase Product" button will allow you to buy one of it if you are logged in.
• My Orders: In the Orders Page, you have access to every order you have made, as well as their price, quantity, product ID, and a link to visit the product.

Seller:

• Landing Page: On this landing page, you can find a list of popular stores beneath the "Recommended Stores" section.
• Sign-in: Press the "Sign-in" button on the top right to use your Google account within Gatorstore. After granting permission, you will be re-directed to the landing page.
• Store List Page: After signing-in, you will arrive at your Store List Page, where you will have access (via buttons to other pages) to all of your stores' pages (by clicking on the name itself), order & livestream histories, and other information. Press the "+ New Store" to create a new store, after which you will be prompted to input its name. You can also delete each store individually with the purple "Delete" button on each.
• Store Page: The Store Page is the hub for creating new products, starting livestreams, and viewing your store's list of products.
  • Starting a Livestream: To start livestreaming, click on the "Start Livestream" red button on the top right. You will be prompted to select the stream's title and featured products - a subset of your store's inventory you wish to showcase in the stream. Once processed, you will receive your new stream's URL and Key, the latter of which you should input into a broadcaster software such as OBS Studio. After copying those into your livestreaming software, you can click on "Go Live" to change the status of your store to "LIVE" for both your browser and everyone else's, embedding the YouTube stream and chat windows into the page. To stop livestreaming, click on the "Stop Livestreaming" button on the top right.
  • Creating a new Product: To create your latest listing, click on the "+ Create Product" button, which will create a pop-up asking you for the listing's title, price, and description. Once the "Create Button" button is clicked on the pop-up, you will be able to see your new listing in the store!
  • Viewing a Product's Page: To visit a product's page, click on the "View More" button beneath it.
• Product Page: A Product's Page allows you to see the basic information for one of your products, as well as the store in which it was created. To edit its details, click on the "Edit Details" button. It is here that you can also delete a listing with the "Delete Product" button.