GameHub is an online shop where users can purchase computer games. This gaming marketplace lets you buy tons of video games online for any device. Target audience: Aged 18 to 25 who are interested in computer games, and would either like to purchase games or would like to sell games they have finished playing. (https://hch-cms-ca.netlify.app/)
HTML, CSS modules, JavaScript modules, Local, WordPress WooCommerce API, Figma, HotJar, Adobe Illustrator, Trello, Netlify.
- Home - Welcome to GameHub, links to gamegenres, gamecards, thumbnails, button to all the games page
- Games - List of all the games, sorted by genres: adventure, action, horror, sports
- Games page - showing the product details (product details such as the description of the product, price and add to cart button)
- SignIn - page for user to create account or log in with username and password (not operational at this time)
- Cart - in cart page, with buttons "continue shopping" and "continue to payment" (not operational at this time)
- Payment - payment form, button "back to cart" and "confirm payment"
- Success - success page, thank you for shopping with us
- About - about gamehub and links to connect with fellow gamers
- Contact - contact page for feedback or users can sell their games through gamehub
- create highfidelity prototype in Figma
- "redesign" the logo and illustrations of games given by Noroff
- build site with HTML, CSS, and JS locally
- add content to WordPress CMS, use WP REST API to fetch content
- check responsiveness of site
- validate, check accessibility/ARIA/WCAG
- deploy with Netlify
- install Hotjar, user-test the site
- fix bugs and improve site based on feedback
- write report and deliver
- Design (I used Adobe Illustrator to change the colorpalett of the logo. Then recreated the playbox logo of the games with Figma and changed the colors of the games images)
- HTML and CSS (Semantic HTML, DRY CSS, Image below 200kb, WCAG friendly, Media Queries)
- JavaScript1 (DOM manipulation, API calls, modular javascript, error handeling)
- Interaction Design (HotJar, usertesting, bug-fixing)
- Content Management System (WordPress WooCommerce API)
Clone the project
git clone https://link-to-project
Go to the project directory
cd my-project
Install dependencies
npm install
Start the server
npm run start