Mobile_Ready Demo - Zentoros/CS351-Project1 GitHub Wiki

Mobile-Ready Demo

This demonstration shows the responsive mobile version of the Awrecking Goals online athletic footwear store. The mobile testing was completed on an iPhone 15 Pro Max and is divided into two video recordings.

Video Demonstration

Together, the two videos demonstrate the website’s responsive navigation, product catalog, product filtering, product-detail pages, shopping cart, and Create Account form.

Live Website

[Open the Awrecking Goals Website](https://storage.googleapis.com/dist_bucket_bruh/index.html)

Testing Information

  • Device: iPhone 15 Pro Max
  • Screen orientation: Portrait
  • Application type: Responsive React single-page application
  • Hosting service: Google Cloud Storage
  • Color palette: Red and dark gold

Features Demonstrated

The two-part mobile demonstration includes:

  1. Opening the Awrecking Goals website on an iPhone 15 Pro Max.
  2. Viewing the responsive homepage and branded design.
  3. Opening and using the mobile navigation menu.
  4. Navigating between the main sections of the website.
  5. Browsing the complete athletic footwear catalog.
  6. Viewing products designed for women and men.
  7. Filtering products by audience and footwear category.
  8. Opening the cleats section.
  9. Opening an individual product-detail page.
  10. Viewing product images, descriptions, prices, features, sizes, and colors.
  11. Selecting available product options.
  12. Adding a selected product to the shopping cart.
  13. Opening the cart and reviewing the selected product.
  14. Viewing and using the Create Account form on a mobile screen.
  15. Scrolling through the website without horizontal overflow.

Responsive Navigation

On smaller screens, the desktop navigation changes into a mobile-friendly navigation menu. The menu provides access to the main areas of the website:

  • Home
  • Shop
  • Women
  • Men
  • Cleats
  • Account
  • Cart

The responsive menu allows customers to access the main website sections without overcrowding the smaller screen.

Responsive Product Catalog

The product catalog automatically adjusts to the available screen width. Product cards are displayed in a mobile-friendly layout while continuing to show important product information, including:

  • Product image
  • Product name
  • Footwear category
  • Intended audience
  • Rating
  • Price
  • Short description

Product images scale to fit the mobile layout without becoming distorted. Product information remains readable, and each product card can be opened to view additional details.

Product Details

Individual product pages adjust to fit the mobile screen. Product information and controls are arranged vertically so customers can:

  • View the product image and description
  • Review product features and specifications
  • Select an available size
  • Select an available color
  • Choose a quantity
  • Add the product to the shopping cart

The AG logo remains visible on the shoe designs and scales with the product images.

Shopping Cart

The shopping cart uses a responsive layout that allows customers to review their selections on a mobile device. The cart displays:

  • Selected product
  • Selected size and color
  • Product quantity
  • Individual price
  • Line total
  • Cart subtotal

Customers can adjust quantities or remove products while using the mobile version of the website.

Mobile Account Form

The Create Account page adjusts from its desktop layout to a mobile-friendly vertical layout. Form fields remain readable and usable on the iPhone screen.

The form includes the following required fields:

  • Username
  • Email
  • Password
  • Confirm password

It also includes optional shipping fields:

  • Street address
  • City
  • State
  • ZIP code
  • Phone number

Client-side validation continues to function on the mobile version. Invalid fields are highlighted, explanatory messages are displayed, and the form confirms when all entered information passes validation.

Mobile Testing Results

Testing on the iPhone 15 Pro Max confirmed that:

  • Text remained readable.
  • Images scaled correctly.
  • Product images were not distorted.
  • Buttons and links remained accessible.
  • Form fields fit within the screen.
  • The mobile navigation menu worked correctly.
  • Products could be browsed and filtered.
  • Product options could be selected.
  • Products could be added to the cart.
  • Cart information remained readable.
  • Form validation worked correctly.
  • Pages could be scrolled without horizontal overflow.
  • The website’s main features remained functional on mobile.

Conclusion

The two-part mobile demonstration confirms that Awrecking Goals provides a responsive and usable shopping experience on an iPhone 15 Pro Max. The website successfully adapts its navigation, product catalog, product-detail pages, shopping cart, and forms to a smaller screen while maintaining its branding and functionality.