Templates and Other Code - Zentoros/CS351-Project1 GitHub Wiki

Templates and Other Code

Project Template

Awrecking Goals was not created from a downloaded or commercially available website template. The website uses a custom React structure designed specifically for this project’s requirements.

The design was developed around a fictitious athletic footwear brand with a red and dark-gold color palette. The layout, product categories, filtering system, product pages, account forms, and shopping-cart interface were customized for Awrecking Goals.

Generative AI assisted with creating the initial website structure and template. The generated material was reviewed, edited, tested, and adapted to meet the assignment requirements.

Frameworks and Libraries

React

React was used to create the website as a single-page application. Reusable React components were used for the navigation bar, footer, product list, product cards, product details, forms, and shopping cart.

Website:
https://react.dev/

Vite

Vite was used as the development server and production-build tool. The command npm run dev starts the local website, while npm run build creates the static production files in the dist folder.

Website:
https://vite.dev/

Bootstrap 5

Bootstrap 5 was used for responsive containers, grid layouts, navigation, buttons, forms, spacing, and mobile-friendly components. Custom CSS was added to create the project’s red and dark-gold branding.

Website:
https://getbootstrap.com/

Lucide React

Lucide React provided interface icons used throughout the website, including navigation and shopping-cart icons.

Website:
https://lucide.dev/

Google Cloud Storage

Google Cloud Storage was used to host the production website as a publicly accessible static website.

Website:
https://cloud.google.com/storage

Live project:
https://storage.googleapis.com/dist_bucket_bruh/index.html

Original Code and Data

The product catalog is stored in src/data/products.json and contains 25 product records. Each record includes product information such as:

  • Product name
  • Audience
  • Category
  • Price
  • Description
  • Image path
  • Rating
  • Sizes
  • Colors
  • Features
  • Specifications
  • Care information

The ProductList and ProductCard components receive product information through props. The JavaScript .map() method is used to render the product catalog.

React’s useState hook manages the shopping cart, product selections, quantities, form values, and navigation state. Client-side JavaScript validation is used for the Account and Create Account forms.

The website uses hash-based client-side navigation so that its pages function correctly when hosted through Google Cloud Storage.

Custom Styling

The visual design was created with Bootstrap 5 and custom CSS. The custom styling includes:

  • Red and dark-gold brand colors
  • Responsive product grids
  • Mobile navigation
  • Product-detail layouts
  • Shopping-cart layouts
  • Form styling
  • Buttons and filter controls
  • Desktop and mobile media queries
  • Custom AG branding

The design represents women and men equally and includes footwear for running, basketball, cleats, tennis, and training.

Logo and Image Sources

The connected AG logo concept was based on my own original sketch. The design combines the letters A and G into a connected athletic shape. Generative AI assistance was used to refine the sketch into a digital logo suitable for the website.

The shoe photographs are original fictitious product concepts created with an AI image-generation tool for this student project. AI image editing was used to place the connected AG logo on the footwear designs.

AI-generated imagery was also used for the homepage hero section. The project does not claim that the shoes are manufactured products or that the pictured people are real customers or endorsers.

The image-generation prompts and branding prompts are documented in:

  • docs/image-generation-prompts.json
  • docs/branding-prompts.json

AI Assistance Disclosure

Generative AI was used during the planning, design, development, debugging, documentation, and image-creation stages of this project.

Website Template and Code

AI assisted with creating the initial React website template and project structure. It helped organize reusable components, the product catalog, hash-based navigation, forms, product filtering, and the shopping-cart interface.

AI also assisted with adapting the website to the assignment requirements, including the 25-product catalog, responsive Bootstrap design, Account page, Create Account validation, product-detail pages, and cart functionality.

The AI-generated code was reviewed, tested, modified, and organized for this project.

Images and Branding

AI image-generation tools were used to create the fictitious shoe designs and homepage imagery. The original AG logo idea was based on my own sketch. AI assistance was used to refine the sketch digitally and apply the resulting AG branding to the shoe images.

The product names, categories, descriptions, colorways, and branding were created specifically for the fictional Awrecking Goals store.

Debugging

AI assistance was used to diagnose and resolve development and deployment errors, including:

  • PowerShell blocking the standard npm script
  • Running npm commands from a folder without package.json
  • Missing project dependencies
  • The vite: command not found error
  • Incorrect Google Cloud folder structure
  • A white screen caused by incorrect JavaScript and CSS asset paths
  • Incorrect image paths after static deployment
  • Vite configuration for relative production paths

Documentation

AI assisted with organizing and editing portions of the README and GitHub Wiki documentation. The final documentation was reviewed and adjusted for the project.

Modifications and Student Contribution

AI was used as an assistance tool rather than as an unreviewed final submission. The project was directed and customized based on my design decisions and assignment requirements.

My contributions included:

  • Choosing the Awrecking Goals brand concept
  • Creating the original AG logo sketch
  • Selecting the red and dark-gold color palette
  • Requesting equal representation of women and men
  • Selecting the footwear categories
  • Adding the cleats section
  • Reviewing the website’s layout and content
  • Testing the desktop and mobile versions
  • Running the project locally
  • Building and deploying the website to Google Cloud
  • Reviewing and documenting errors encountered
  • Organizing the GitHub repository and Wiki

References

[1] Meta Platforms, Inc., “React documentation,” React. [Online]. Available: https://react.dev/. [Accessed: Oct. 2, 2026].

[2] Vite Contributors, “Vite guide,” Vite. [Online]. Available: https://vite.dev/guide/. [Accessed: Oct. 2, 2026].

[3] Bootstrap Team, “Bootstrap 5 documentation,” Bootstrap. [Online]. Available: https://getbootstrap.com/docs/5.3/getting-started/introduction/. [Accessed: Oct. 2, 2026].

[4] Lucide Contributors, “Lucide icon library,” Lucide. [Online]. Available: https://lucide.dev/. [Accessed: Oct. 2, 2026].

[5] Google, “Host a static website,” Google Cloud Documentation. [Online]. Available: https://cloud.google.com/storage/docs/hosting-static-website. [Accessed: Oct. 2, 2026].

[6] OpenAI, “ChatGPT,” OpenAI. [Online]. Available: https://chatgpt.com/. [Accessed: Oct. 2, 2026].