🦅 HawkShop - Bookstore

Hawkshop redesign project for CP317 - Software Engineering @ Wilfrid Laurier University

Project Description:

We redesigned the Laurier Bookstore (HawkShop) into a cleaner, easier, and more modern shopping experience. Using an agile workflow, we moved through brainstorming, iterative improvements, sprint cycles, and clear documentation to deliver a polished front-end redesign.

Assignment Milestones & Sprints

• Milestone 01 - Project Description and Objectives: Check it out here!!
• Milestone 02 - Requirements & Backlog Expansion: Check it out here!!
• Sprint 01 - Implementation and Initial Prototype: Check it out here!!
• Sprint 02 - Feature Enhancement and Integration: Check it out here!!
• Sprint 03 - System Integration and Final Delivery Planning: Check it out here!!
• Final Project - Complete System Delivery: Check it out here!!

Technologies

• HTML – Structures web content.
• CSS – Styles the user interface.
• JavaScript – Adds interactivity.

Project features:

• Account Creation
• Mobile Accessibility
• Wishlists
• Order History and Tracking
• Inventory reporting
• Reviews and Ratings
• Promotion and Discounts
• Cart
• Responsive buttons and navigation bar

Set up Instructions:

Follow the instructions below to download, open, and run the project locally. This project was created using static HTML, CSS, and JavaScript, so npm, databases, and any external databases or systems are not required.

System Requirements to run:

• Visual Studio Code
• Live Sever Extension
• Any modern web browser (Chrome, Safari, Brave, Firefox, etc.)
• No npm install backend or database needed

Step 1: Clone the GitHub Repository

Make sure that Git is installed on your device.

git clone https://github.com/jayden-graneta/HawkShop-Redesign.git
cd HawkShop-Redesign

Alternatively, the GitHub Repo can also be downloaded from the Zip file and extracted into your computer!

Step 2: Opening project in VS Code

• Launch Visual Studio Code Application.
• Click File -> Open Folder.
• Select the project's root directory (HawkShop-Redesign/homepage/)
• Wait for the workspace to load.

Step 3: Install Live Server

This project uses an extension called Live Server, which allows developers to see Live changes to Code on their preferred browser.

• Open the Extension panel in VS Code.
• Search for Live Server.
• Download Live Server by Ritwick Dey.
• Reload VS Code to apply the new extension.

Step 4: Run the Project:

• In VS Code's File Explorer, find index.html.
• Right-click on the file.
• Select Open with Live Server.
• Your Browser will then open at a URL like:

http://127.0.0.1:5500/

or

http://localhost:5500/

• Any changes that you make to the HTML, JavaScript or CSS will instantly show up in the reloaded browser!

Troubleshooting

• Live Server not working
  • Restart VS Code.
  • Reinstall Live Server Extension.
  • Try launching from a different HTML file.
• Page not loading
  • Confirm that you started the site with Live Server, not just opening the file directly.
  • Make sure that VS Code stays open.
  • Check that the file paths inside HTML are correctly downloaded
• CSS or JS not loading:
  • Try refreshing the browser using Ctrl + Shift + R

Contributors

• Jayden Graneta
• Yashika Sharma
• Rabia Durrani
• Ravishan Thanarajah
• Ismail Elhadi
• Daniel Kim