Summary

Chill Factory Gaming is a gaming store that display real-time data of available promo and deals across PlayStation Network by using API provided by PSN. The website is built using NextJS and TailwindCSS for the frontend and Flask for the backend.

Design Process

The design process of this website consist of 3 steps: Research, Design, and Development.

1. Research
The research process was conducted by examining other gaming store websites to identify the type of information they display. Additionally, we thoroughly reviewed the PlayStation Network API documentation to determine the available data points. During our research, we discovered PSDeals, a website that provides real-time data on promotions and deals across the PlayStation Network. We used PSDeals as a reference for our website. After completing the research phase, we compiled a list of features to implement on our website:

• The website should display the latest promotions and deals available on the PlayStation Network.
• Users should have the option to switch between two regions (ID and TR).
• The website should display game prices in the user's local currency.

2. Design
The website's design draws heavy inspiration from the concept created by Dmitry Reshetnikov. The primary design objective was to create a clean and user-friendly interface that is responsive across all screen sizes.

3. Development
The development process involved the use of several technologies:

• Frontend: We utilized Next.js and Tailwind CSS to build the frontend of the website. Next.js provided a robust foundation for creating a fast and responsive user interface, while Tailwind CSS facilitated efficient and maintainable styling.

• Backend: For the backend, we chose Flask, a lightweight and versatile Python web framework. Flask allowed us to handle data processing, routing, and API interactions effectively.

This project was developed accross three main feature : Category, Game Detail, and Search.

• Category:
  The Category feature allows users to browse games based on different categories or deals available. Users can easily navigate through a curated collection of games, making it convenient to discover titles that match their preferences.

• Game Detail:
  The Game Detail feature provides in-depth information about individual games. When users select a specific game from the category listings or search results, they are presented with a detailed page dedicated to that game. This page typically includes game description and pricing information with available deals.

• Search:
  The Search feature empowers users to find games quickly and efficiently. It offers a search bar where users can input keywords. The search functionality is designed to deliver accurate and relevant results, helping users locate specific games or content within the platform. An effective search system enhances user experience by saving time and reducing the effort required to find desired games or information.

These three core features work in harmony to create a user-friendly and informative gaming platform. Users can explore various game categories, delve into detailed game information, and easily find their desired games using the search functionality.

Tech Stack

• NextJS
  Next JS is a React framework that allows us to build static and server-side rendered applications. It is used to build the frontend of the website.

• TailwindCSS
  TailwindCSS is a utility-first CSS framework that allows us to build a website with a custom design system. On this project, TailwindCSS is combined with Flowbite to build the component and layout of the website.

• Flask
  Flask is Python framework that allows us to build a web application. Flask is used to create api endpoint that will be used by the frontend to fetch data from the PlayStation Network API.

Result

Home Page

Game List

The website is deployed and can be accessed on here.