Hydra PC’s is a computer hardware store with a focus for custom bespoke gaming PC’s where users can pick and choose parts for their personal needs. The project's goals are to deliver a streamlined storefront for users to build up a PC from case to storage with a part tracker and price tracker to accompany it updating after each part is selected in the form of a list. The user can then go to checkout to complete their order or save the computer's specs by saving it by sending an email to them with the list of parts they chose.

• 1.0 UX

  • 1.1 User goals
  • 1.2 User needs and goals
    • 1.2.1 User needs:
    • 1.2.2 How the user needs are met
  • 1.3 Developer and business goals
    • 1.3.1 Goals of the business
  • 1.4 User stories
  • 2.0 Design choices
    • 2.4 Wireframes
    • 2.5 Mockups
  • 3.0 Features
    • 3.1 Existing features
    • 3.2 Features left to implement
  • 4.0 Technologies used
  • 5.0 Testing
    • 5.1 Code validator
    • 5.2 Nav-bar
    • 5.3 Footer
    • 5.4 Home page
    • 5.5 Build your PC
    • 5.6 Contact us
    • 5.7 Checkout
  • 6.0 Development life cycle
  • 7.0 Deployment
    • 7.1 How to run this project locally/logically
    • 7.2 GitHub links
  • 8.0 Credits
    • 8.1 Content
    • 8.2 Code

  Table of contents generated with markdown-toc

Hydra PC’s target audience is the PC gaming market for users who want the pre-made quality built machine but with the flexibility of building their own PC from scratch with a wide array of PC parts to meet their needs and budgets.

User needs:

1. Accessibility for users
2. Responsive contact form page
3. Custom PC part tracker
4. Custom PC price tracker
5. Build custom PC selector
6. Images and info of the PC parts
7. Company contact info
8. Save PC part list
9. Checkout page

1. Alt tags for videos and images, text transcript, colour contrast, form labels, clear feedback for required forms fields * and device support
2. Contact page that sends and automated email to confirm that their enquiry had been received
3. The user's selected parts a stored in a list for the user to see as they build their PC
4. Selected parts each have a value (price) that is added or subtracted when a part is selected or changed
5. The user can pick parts from 9 sections each with different hardware
6. Images and information about the hardware will be provided
7. Company contact information
8. The user will be able to enter their email and name to send an email with their custom PC’s specs
9. A page where the users custom PC’s price will display with a small overview of the product and a form for the user to complete the order

1. The website attracts both novice and adept users to PC hardware
2. The website can retain the same traffic through word of mouth
3. Sell Pre built computers
4. Sell custom computers
5. To promote users to build PC’s to their needs

1.4.1 User is looking to custom build a PC 1.4.2 User wants a purchase a computer 1.4.3 User needs to contact customer service 1.4.4 User wants to save there custom PC specs 1.4.5 User wants to know the total price of their PC

1.4.1 The user wants to build a custom PC without having to buy the parts individually or have to build the PC themselves, build PC being the core feature of the website can be accessed universally on the nav, footer and homepage once their the user can pick from 9 subsections for different hardware compiling their selected parts into a list with the prices being totaled up beneath the spec list.

1.4.2 The user has created a PC and wants to purchase it which they can do from the sidebar or through direct links (pre built PC’s) where the user can select the shipping method and enter their personal details, receiving an email with the product summary and confirmation of purchase.

1.4.3 The user needs help with an enquiry about an issue or PC question from the hydra PC team, users can find the contact page universally on the nav and footer where they can enter their personal details as well as a message, once submitted the user will receive an email confirming that their message has been sent.

1.4.4 After building a custom PC on the build PC page the user may not want to purchase straight away or come back to which rather than having to remember the parts they picked. The user can enter their name and email at the bottom of the sidebar sending an email to them with the list of parts and the cost.

1.4.5 The user is creating a custom PC within a budget restraint with each part having their individual price next to them which once selected totals up or down updated after each change in part. The total cost located on the bottom of the sidebar follows the user as they scroll up and down the page making it always accessible to the user.

Titles and subtitles will be in Orbitron:

Orbitron

Text will be in Noto Sans TC:

Noto Sans TC

Font awesome:

• YouTube icon
• Facebook icon
• Instagram icon
• Twitter icon
• Home icon (Home page)
• Computer icon (Build PC)
• Phone icon (Contact us)
• Shopping trolley icon (Checkout)

#0E0B16 - Primary colour (Void)

#4717F6 - Secondary #1 colour (Jewel)

#A239CA - Secondary #2 colour (Fuschia)

#E7DFDD - Background colour (Stark)

Colours used #2 Neon tones

Wireframe pdf

Checkout wireframe pdf

Home desktop wireframe

Home tablet wireframe

Home mobile wireframe

Custom PC desktop wireframe

Custom PC tablet wireframe

Custom PC mobile wireframe

Checkout desktop wireframe

Checkout tablet wireframe

Checkout mobile wireframe

Contact us desktop wireframe

Contact us tablet wireframe

Contact us mobile wireframe

Mock-up pdf

Home page desktop mock up

Home page tablet mock up

Home page mobile mock up

Build PC page desktop mock up

Build PC page tablet mock up

Build PC page mobile mock up

Checkout page desktop mock up

Checkout page tablet mock up

Checkout page mobile mock up

Contact us page desktop mock up

Contact us page tablet mock up

Contact us page mobile mock up

• Functional checkout section - Full form for user to fill out their personal details and submit button to send email with their order summary
• Build custom PC - 9 subsections with different parts to build up a full computer
• Cost tracker when building PC - Tracks the user’s selected parts costs totaling all of the parts costs up or down
• Functional slideshow - Intractable slideshow that auto shuffles as well as buttons for user to switch slides
• Functional contact us form - Contact form for user’s details and message with submit button to send to user’s email
• Selected part tracker - Each selected part is put into a list on the build PC sidebar that follows the user as they scroll so it always visible
• Save PC list - Small form for name and email which when submitted send the list of PC parts through email
• Animation - Hover and transition animation to give a more refined and less static user experience
• Navbar and footer - On every page for user to quickly navigate the website constantly

• Find your PC questionnaire - Users could pick answers from 4 questions narrowing down pre-built PC’s to meet their requirements
• More hardware subsections - Additional external and other hardware options
• Sign up page - Page for users to sign up/into removing the need for returning users to fill out the same forms to save or contact hydra PC’s

This project uses HTML to structure its pages

This project uses CSS to style its pages

This project uses the bootstrap framework to further improve styling of its pages

This project uses JS to be made interactable

This project uses jQuery to shorten the amount of JS being written for more efficient and readable code

EmailJS is used in this project for sending the user information such as custom PC spec lists, order conformations and contact us messages

This project uses balsamiq to design the wireframes

Github is used as a repository to upload the project to

Additions:

• File structure
• Responsive CSS
• Responsive JS
• README structure

Additions:

• Basic nav-bar structuring for desktop
• Very basic footer structuring for Desktop
• Added documentation
• Updated wireframes

Additions:

• Added carousel (not functional)
• Added top PC section
• Added social media section

Additions:

• Nav-bar desktop responsive breakpoints
• Nav-bar Tablet responsive breakpoints
• Nav-bar Mobile responsive breakpoints
• Nav-bar small mobile responsive breakpoints

Additions:

• Footer desktop responsive breakpoints
• Footer Tablet responsive breakpoints
• Footer Mobile responsive breakpoints

Additions:

• Basic HTML for Pre-built PC's page
• Basic HTML for Contact us page
• Basic HTML for Create account page

Additions:

• Basic HTML for Custom PC page
• Basic HTML for Checkout page

Additions:

• Added images for pre built pc cards
• Added Wireframes
• collapse.js added but not yet functional
• pre-built-pc.js added dictionaries for all 18 pcs

Additions:

• FPC Collapsible button works
• Test.md file added
• Fix to image sizing on FPC cards

Issues - FPC images don't resize correctly on tablets or smaller devices

Additions:

• Added parent object to pre built PC's
• The correct information for the PC's is displayed

Issues - The pre built PC cards have commas from the objects which need to be removed

Additions:

• Links to checkout from pre built PC's
• Wireframe additions (Change in how saving custom PC will work)
• Changes to logo
• Changed color's nav-bar (subject to change)
• Find PC questionnaire responds in console

Issues - Trying to add values to pre-built computers that respond to the questionnaire

Additions:

• Removed the sign in pages from the nav-bar
• Added the sidebar for custom built PC
• Added the case parts to custom built page
• Added values to pre built PC's for questionnaire

Issues - Sidebar stuck behind the pc part's

Additions:

• Images and titles added for all PC part categories
• Fixed sidebar being stuck behind pc parts

Issue RESOLVED - Sidebar stuck behind the pc part's (6.12)

Additions:

• Added 3 Pre built PC recommendations to home page
• Added basic CSS for price tracker box
• Added basic CSS and JS for spec tracker
• Added prompt for save JS (Not including emailJS yet)

Additions:

• Collapsible sections for custom PC section
• Added radio buttons to each part (to select parts)
• When selecting a case it displays the correct value (only case)

Additions:

• All parts appear on the custom PC side bar when selected
• All prices added to each part for custom PC's
• Progress made on price tracker (Doesn't work yet)
• Progress on pre built PC filter

Issues - The price tracker can't target the correct data because of shared classes on each section and therefore the data cannot be converted into numbers as it cannot be targeted.

Issues - The pre built PC filter does respond but always filters the same things regardless of which one is selected and once selected unless the page is refreshed the page stays the same.

Additions:

• Custom PC emailJS
• Checkout emailJS
• Functional checkout form
• Contact us emailJS
• Functional contact us form

Removed:

• Custom PC alert for customers when they want to save their custom PC and changed to a small form where they add their details

Additions:

• customPc.js for price tracker and pc priceTracker
• Home page advertisement for build PC
• Solved PC card issue

Removed:

• Find PC from nav-bor
• Find PC from footer
• Removed social media section from home page

Issues - Slide show isn't working get error message saying .carousel isn't a function

Issues - Problem with the priceTracker identify the selected item

Issues RESOLVED - Trying to add values to pre-built computers that respond to the questionnaire (6.11)

Issue RESOLVED - Comma appearing in between each part (6.10)

Additions:

• Links to home page on title and logo on the nav-bar
• Updated the logo
• Change in colour scheme (Work in progress)
• Documentation updated 6.18 missing issue RESOLVED now corrected

Removed:

• Find PC HTML File
• Sign up HTML File
• Test.md File
• fpc-find-pc.js File

Additions:

• Slideshow images added
• Text and links Added
• Alt tags corrected
• PC card CSS
• Home page colour updated

Additions:

• Shadow boxes
• Build your PC text
• Button hover animation
• Link hover animation
• Icon hover animation
• Breakpoints to home build your PC section
• Transparent backgrounds to Pre built PC's

Additions:

• Transparent PC spec Images
• Changes to contact us layout
• Changes to checkout layout
• Added collapse all button for build PC tracker
• Added expand all button for build PC tracker
• Added prices to each PC part

Additions:

• Rotating logo image
• Animation to title link
• Added tab image
• Finished collapse buttons Build PC
• Improvements to nav-bar breakpoints
• Improvements to footer breakpoints
• Improvements to home page build breakpoints

Additions:

• Laptop nav-bar breakpoints
• Changes to customPc.js
• Updated README project description
• Updated UX README section

Additions:

• Updated README user stories
• Updated README design choices

Additions:

• Updated README existing features
• Updated README features left to implement
• Updated README technologies used

Additions:

• Updated README credits content
• Updated README credits code

Additions:

• Home page pre built PC's breakpoints work
• Updated README Testing
• Spec tracker works
• Part picker works

Removed:

• bpc-custom-pc.js
• bpc-price-tracker.js

Additions:

• Spec cards completed
• Total cost functional
• Progress on custom PC breakpoints
• Updated README Nav-bar testing
• Updated README Footer testing
• Updated README Home page testing

Addtions:

• Updated README Custom pc testing
• Updated README Code validation testing
• Updated README Checkout testing
• Updated README Contact us testing

Additions:

• Functional Slideshow
• Home page breakpoints finished
• Updated README Home page testing

Additions:

• Expand and collapse button works
• Updated README Wireframes
• Wireframe images

Additions:

• Checkout total price Functional
• EmailJS checkout summary Functional
• EmailJS save custom PC Functional
• Updated README testing

Additions:

• Custom PC page sidebar footer problem fixed
• Custom PC page breakpoints complete
• Updated README testing

Additions:

• Updated README testing
• Tested all HTML files using W3C Markup validator
• Tested all CSS files using W3C CSS validator
• Tested all JS files using JSHint validator

Additions:

• Table of contents

Additions:

• Mock-ups
• Mock-up file, pdf and images

Additions:

• README deployment

Additions:

• Hydra PC's deployed to GitHub pages

This project was developed on Atom.

To create the project these steps where taken:

1. Create a new repository through atom
2. Connect the repository to GitHub account
3. Create necessary files to write code in
4. All code written locally (on atom) will need to be pushed to GitHub
5. Once connected to GitHub stage, commit and push files / code to GitHub repository

To upload the project these steps where taken:

1. Go to the projects repository
2. Click on settings and scroll down to GitHub pages
3. Select a branch
4. Select a folder then click save

The project is published to GitHub pages

Hydra PC's

• Logo - hydra-logo.jpg
• None selected - none-selected.jpg
• Home page welcome to hydra PC's section Text used from

• Slide 1 - hydra-slide1.jpg
• Slide 2 - hydra-slide2.jpg
• Slide 3 - rtx-30-series.jpg

• Lian Li Lancool-215 - lian-215.jpg
• Corsair 220T - corsair-220t.jpg
• Corsair 4000D - corsair-4000d.jpg
• MSI Vampiric 010 - msi-vamp-010.jpg
• NZXT H710 ATX - nzxt-h710.jpg
• MSI MAG VAMPIRIC 100R ARGB - msi-vamp-100r.jpg
• MSI MAG FORGE 100R - msi-forge-100r.jpg
• CORSAIR OBSIDIAN SERIES™ 500D SE CASE - corsair-500d.jpg
• CORSAIR 175R RGB - corsair-175r.jpg
• Cyberpower ONYXIA - cyberpower-onyxia.jpg
• Cyberpower Lancool PC-008 - cyberpower-pc-008.jpg
• Phanteks Eclipse P400 - phanteks-p400.jpg
• Kolink Castle - kolink-castle.jpg
• Corsair iCue 5000X - corsair-5000x.jpg

• Ryzen 5 3600 - amd-3600.jpg
• Ryzen 9 5950X - amd-5950x.jpg
• Ryzen 7 5800X - amd-5800x.jpg
• i5-11400 - i5-11400.jpg
• i9-11900K - i9-11900k.jpg
• i3-10100 - i3-10100.jpg
• Ryzen 9 5900X - amd-5900x.jpg
• Ryzen 6 5600X - amd-5600x.jpg
• I7-9700k - i7-9700k.jpg
• Ryzen 7 3700X - amd-3700x.jpg
• Ryzen 3 3200G - amd-3200g.jpg
• I7-10700k - i7-10700k.jpg

• RTX 3060 - rtx-3060.jpg
• GTX 1660 SUPER - gtx-1660-super.jpg
• RTX 3070 ti - rtx-3070-ti.jpg
• RX-6700 XT - rx-6700-xt.jpg
• RTX 2060 - rtx-2060.jpg
• RTX 3090 - rtx-3090.jpg
• GTX 1650 - gtx-1650.jpg
• RX 6900 XT - rx-6900-xt.jpg
• RX 6800 - rx-6800.jpg
• RTX 3080 ti - rtx-3080-ti.jpg
• RTX 3070 - rtx-3070.jpg

• ASUS A320M-K - asus-a320m-k.jpg
• MSI B450M PRO-VDH MAX - msi-b450m.jpg
• MSI X570-A Pro - msi-x570-a.jpg
• MSI B550M PRO-VDH - msi-b550m.jpg
• MSI B560M Pro-VDH Wi-Fi - msi-b560m.jpg
• MSI MEG Z590 ACE - msi-meg-z590.jpg
• ASUS PRIME H410M-D - asus-prime-h410m-d.jpg
• MSI MAG B560M MORTAR WIFI - msi-mag-b560m.jpg
• ASUS ROG STRIX X570-F - asus-rog-strix.jpg
• ASUS TUF B550-PLUS - asus-tuf-b550.jpg
• MSI B460M-A PRO - msi-b460m.jpg
• MSI Z590-A PRO - msi-z590-a.jpg
• Z390 Asus TUF WI-FI - asus-tuf-z390.jpg
• Gigabyte B450 - gigabyte-b450.jpg
• MSI A320M-A PRO - msi-a320m-a.jpg
• MSI Z490-A PRO - msi-z490-a.jpg
• MSI B550-A PRO - msi-b550-a.jpg

• 8GB 2666Mz - 8gb-2666mz.jpg
• 8GB 3200Mz - 8gb-3200mz.jpg
• 16GB 3200Mz - 16gb-3200mz.jpg
• 16GB 3200Mz RGB - 16gb-3200mz-rgb.jpg
• 32GB 3200Mz - 32gb-3200mz.jpg
• 32GB 3600Mz - 32gb-3600mz.jpg

• InWin A55 550W 80+ - inwin-a55-550w.jpg
• InWin A45 450W 80+ - inwin-a55-450w.jpg
• Corsair TX750M 750W - corsair-tx750m-750w.jpg
• Cooler Master MWE 750W - cooler-mwe-750w.jpg
• InWin A65 650W - inwin-a65-650w.jpg
• Corsair RM850 850W - corsair-rm850-850w.jpg
• 400Watt Power Supply - ATX-400W.jpg
• MSI MPG Series A650GFW 650W - msi-mpg-650w.jpg
• Corsair RM850 850W - corsair-rmx-850w.jpg
• 700W 80Plus Bronze - 700w-80plus.jpg

• ADATA 240 - adata-240gb.jpg
• Kingston A400 - kingston-240gb.jpg
• WD Blue SN550 - 2tb-wd-blue.jpg
• Samsung 850 EVO - samsung-500gb.jpg
• WD Blue SN450 - 500gb-wd-blue.jpg

• WD Blue SN550 - wd-blue-sn550.jpg
• Seagate Firecuda - seagate-firecuda.jpg
• Intel 670P - intel-670p.jpg
• ADATA XPG - adata-xpg.jpg

• Seagate HDD - seagate-hdd.jpg
• WD blue HDD - wd-blue-hdd.jpg

• Bootstrap V4.5 Nav-bar - Third one down
• Bootstrap V4.5 Carousels - Fourth one down
• Bootstrap V4.5 Collapse - First one down
• Bootstrap V4.5 Accordion collapse - Third one down
• W3Schools collapse JS - W3Schools collapse
• W3Schools display objects - W3Schools objects
• Stack overflow JS parent objects - Stack overflow objects
• Medium.com radio button filters using jQuery - Medium.com filters
• Side-bar using CSS - Sidebar
• W3Schools carousel bootstrap - Carousel JS
• W3Schools carousel javaScript - Carousel JS
• Stack overflow rotating image with hover - How to rotate image
• Checkout.html total cost slack