
ProShop Essentials Project | tutorial video made with ngram
About the video
This tutorial video was made with ngram to walk through the build of an online shop called ProShop. It opens with a presenter speaking directly to camera from a home studio setup with a boom microphone, introducing the project before moving into a screen recording of the live site at buildproshop.com. The browser demo first shows a product catalog page labeled 'Latest Products,' displaying items such as AirPods Wireless Bluetooth Headphones, an Amazon Echo Dot 3rd Generation, a Sony PlayStation 4 Pro, and a Canon EOS 80D DSLR Camera, each with star-rating placeholders. The video then advances to the checkout flow, moving through Login, Shipping, Payment, and Place Order steps. The final screen shows a completed order summary with a shipping address, PayPal selected as the payment method, two Canon EOS 80D cameras and one pair of AirPods listed as order items, and a calculated total including tax and shipping before the Place Order button. Together the frames demonstrate the core shopping experience of the ProShop application, from browsing products to completing a purchase, giving viewers a clear look at how the catalog and checkout pages are structured and populated with sample data.
- ProShop
- Ecommerce
- Web Development
- Checkout Flow
- Product Catalog
- Coding Tutorial