Cross-course Project: GameHub - the universe of games

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/)

Screenshots

🛠 Languages and tools:

HTML, CSS modules, JavaScript modules, Local, WordPress WooCommerce API, Figma, HotJar, Adobe Illustrator, Trello, Netlify.

Site architecture

1. Home - Welcome to GameHub, links to gamegenres, gamecards, thumbnails, button to all the games page
2. Games - List of all the games, sorted by genres: adventure, action, horror, sports
3. Games page - showing the product details (product details such as the description of the product, price and add to cart button)
4. SignIn - page for user to create account or log in with username and password (not operational at this time)
5. Cart - in cart page, with buttons "continue shopping" and "continue to payment" (not operational at this time)
6. Payment - payment form, button "back to cart" and "confirm payment"
7. Success - success page, thank you for shopping with us
8. About - about gamehub and links to connect with fellow gamers
9. Contact - contact page for feedback or users can sell their games through gamehub

Roadmap to this project

• 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

This project has been the subject of several courses:

• 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)

Run Locally

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

Acknowledgements

• Awesome Readme Templates
• Awesome README
• How to write a Good readme