Skip to content

Home

Jump to bottom
Zentoros edited this page Oct 3, 2026 · 2 revisions

Awrecking Goals

Live Website

View Awrecking Goals on Google Cloud

Project Description

Awrecking Goals is a responsive online athletic footwear store created as a React single-page application. The store provides footwear for women and men across five categories: running, basketball, cleats, tennis, and training. It includes 25 original shoe designs with AI-generated product images and a custom AG logo based on an original sketch.

Customers can browse and filter products, open individual product pages, choose available sizes and colors, and add products to a shopping cart. The website also contains account sign-in and account-creation forms with client-side validation. Awrecking Goals is a fictitious student storefront, so it does not process real orders, payments, or user accounts.

The website uses a red and dark-gold color palette. It was designed to represent women and men equally and includes responsive layouts that work on desktop and mobile screens.

Website Architecture and Components

Awrecking Goals was built as a client-side React single-page application using Vite. The application does not use a backend or database. Product information is stored locally in a JSON file, and temporary shopping-cart information is managed with React state.

Main Technologies

  • React for building the user interface and reusable components
  • Vite for local development and production builds
  • Bootstrap 5 for responsive layout and interface styling
  • Custom CSS for the red and dark-gold branding
  • Lucide React for interface icons
  • Google Cloud Storage for static website hosting
  • JSON for storing the 25 product records

Application Pages

  • Home: Introduces the Awrecking Goals brand and provides links to featured products, women’s shoes, men’s shoes, and footwear categories.
  • Shop: Displays all 25 products and allows customers to filter by audience and footwear category.
  • Product Details: Shows an individual product’s image, description, price, features, sizes, colors, specifications, and care information.
  • Account: Contains a demonstration sign-in form with client-side validation.
  • Create Account: Contains required account fields and optional contact and address fields. The form validates usernames, passwords, email addresses, phone numbers, and addresses.
  • Cart: Displays selected product variants, quantities, prices, line totals, and the cart subtotal. Customers can increase quantities, decrease quantities, or remove products.

Reusable Components

  • Navbar: Provides navigation to Home, Shop, Women, Men, Cleats, Account, and Cart.
  • Footer: Provides secondary navigation and storefront information.
  • ProductList: Receives product information through props and uses the JavaScript .map() method to display products.
  • ProductCard: Displays the image, name, category, audience, rating, price, and description of each product.
  • Product Detail View: Displays complete information for one selected product.
  • Cart Components: Display cart items, quantities, selected variants, and totals.
  • Form Components: Collect and validate account and create-account information.

Data and State Management

The product catalog is stored in src/data/products.json. Each record contains information such as the product name, category, audience, price, image, sizes, colors, description, features, and specifications.

React’s useState hook manages the shopping cart, selected product options, quantities, navigation menu, and form values. Cart data remains available while the application is open but resets when the page is refreshed because the project does not use a database or permanent storage.

Navigation

The website uses hash-based client-side navigation. Examples include:

  • #/ for the homepage
  • #/shop for the complete catalog
  • #/shop?audience=Women for women’s products
  • #/shop?category=Cleats for cleats
  • #/product/1 for an individual product
  • #/account for account sign-in
  • #/create-account for account creation
  • #/cart for the shopping cart

Hash-based navigation allows the React application’s pages to work correctly when hosted as a static website on Google Cloud Storage.

Responsive Design

Bootstrap’s grid system, responsive navigation, containers, buttons, and form classes are used throughout the project. Custom media queries provide additional adjustments for smaller screens. Product grids change their number of columns based on screen width, and the navigation menu changes to a mobile layout on smaller devices.

Clone this wiki locally