Steam Game Shop

Intro

Overview

Games are one of the most popular industries nowadays. With new games being created every minute and relayed through TV, radio, and the internet, the updated news on a game is already old by the next morning. That's why game publishers such as Steam created a website to help users get the most up-to-date information about games with ease.

So, game lovers on Steam read news and info on games from the convenience of their work desktops or mobiles. The traffic of these online services is rewardingly high—we could run ads and generate a good amount of money. 💰

UI design

We are making a Steam app store—ours will be better. Our inspiration is Steam. You can either make an exact clone or freestyle as you like. (🚀 It is more challenging to create an exact clone.)

• Steam original: store.steampowered.com
• Steam demo: (use as reference for layout and features)

Honorable submission: Here are good submissions from past students 👍 — e.g. Hieu Trung Nguyen.

Backend API

We often use API services from others to have dynamic and up-to-date data in our application.

The mentors at CoderSchool created an API service to help you get the latest game data. You are expected to find your way through this API by reading its documentation.

Base URL: https://cs-steam-api-production.up.railway.app/

API documentation: https://cs-steam-api-production.up.railway.app/docs

Example UI design

Our suggested design — simplified sketch:

• The dotted arrow from the Search button means: when clicked, the user sees a display with all search results.
• The arrows from each game mean: when clicked, the user sees a new screen with all news/details related to that game.

You can use Excalidraw or any mockup tool to sketch your initial UI. Go wild 🔥.

Requirements

User Stories

As a developer, you will get familiar with the term "user story" at the start of any project. It describes what the user will be able to do or see. Format:

Rocket bonus 🚀

User can click any game item in the gallery to see the detail of only that selection's detail (name, tags, description, price, developer...), replacing the current gallery.

There are 2 ways to make this happen. Redirect to a new HTML page and replace the HTML element of the current page:

The first method involves creating a new .html and .js page that will be rendered when an a tag is clicked. The challenge of this approach is passing the appId from the original script.js & index.html to the new .html & .js file so that the later duo could make the API request with the correct appId for example: https://someApi/appId/{appId}. Find more information about the window object mentioned in the lecture videos and look into the window.location property document to find the solution. This is the conventional way to render an item detail page in web development.

The second one involves creating a new HTML element to replace the current display of the page. For example: main, body, .gallery. The challenges of this approach are:

• Knowing when and where to clean the existing display before append the new content
• For user experiences, able to go back to the previous display after going to the app detail display and still seeing proper styling. Essentially you will have to select the right element; append the correct content; maintain or add appropriate attributes such as class ,id or event-listener. This is NOT the conventional way to render an item detail page in web development. However, this is still an acceptable solution for this assignment and a method to see how React would render a component of a page.

Outcomes and grading

What you'll practice

This project is designed to test your understanding of:

• Asynchronous JavaScript — requesting data from the API with fetch.
• DOM — accessing, creating, and editing HTML elements.
• JS basics — syntax and fundamentals.
• HTML & CSS — appropriate tags, attributes, selectors, and properties.

How we grade your project

You start with 100%; points are deducted for missing features. Passing grade is 80%.

Good luck, have fun coding! GLHF 🎮