002 : SkineeDipping Website Build

Project Website

Creators: Gil Eskayo, Kaleb Perry, Bryce Ogburn, Joey Tursi

Date: 8 December 2023

Introduction

This project aims to revolutionize the experience of Counter-Strike: Global Offensive (CS:GO) players by providing an intuitive and user-friendly platform for accessing, filtering, and purchasing in-game skins. The core feature is a sophisticated yet easy-to-use search engine, allowing players to quickly navigate through an extensive database of skins based on various parameters like rarity, color, pattern, or price range. Users can apply multiple filters simultaneously to refine their search, making it effortless to find skins that align with their specific tastes and budget.

Additionally, the platform offers detailed views of each skin, including high-resolution images, background information, and user reviews, enabling players to make informed decisions. A unique comparison tool is also available, allowing users to juxtapose different skins side-by-side for a more comprehensive evaluation.

For those interested in acquiring skins, the platform facilitates a seamless purchasing process. It integrates a secure transaction system, ensuring a safe and reliable exchange. Users can buy skins directly from the platform or through trusted third-party vendors, all within a few clicks. This project not only enhances the accessibility of CS:GO skins but also enriches the overall gaming experience by making skin selection and acquisition more enjoyable and less time-consuming.

Video Demo

Personal Contribution

Working on the backend of our software development project has been a deeply engaging and rewarding journey. My role primarily revolved around laying the technical groundwork for the website. This task involved setting up intricate API calls that formed the backbone of key pages such as the login, register, home, discover, and user pages. This foundational work was not just about writing code; it was about crafting the core of our website's functionality and user experience.

One of my major contributions was developing and managing user authentication databases. This involved creating systems to efficiently log new users, prevent the creation of duplicate usernames, and, crucially, establish user sessions upon login. This feature was pivotal in ensuring that our website remained exclusive and secure, accessible only to authenticated users.

A particularly challenging yet fulfilling aspect of my work was integrating multer for file uploads on the user page. This feature lets users personalize their profiles with photos and descriptions, stored in a dedicated 'userPage' table. Implementing multer pushed me into new territories, requiring me to reconfigure the docker-compose.yaml file and craft a Dockerfile to ensure smooth integration and operation.

Towards the end of the project, I focused on developing the bookmark feature, a task that involved navigating through various backend complexities. This phase of the project was challenged when our API keys were blocked, exemplifying the unpredictable nature of software development and the reliance on external services.

Throughout this project, my role has been a blend of technical rigour and creative problem-solving, contributing significantly to shaping the website's functionality and curating the overall user experience.

Technology Stack

EJS 51.9% | JavaScript 42.0% | CSS 5.4% | Dockerfile 0.7%
  • Programming Languages: Python 3.9, JavaScript (Node.js)
  • Web Framework: Flask (Python) for the backend
  • Frontend Framework: React
  • Database: PostgreSQL for storing skin pricing data
  • API Development: Flask-RESTful for building the API endpoints
  • Web Development Tools: HTML, CSS, JavaScript, Bootstrap for frontend design
  • Data Analysis and Visualization: Pandas, Matplotlib, D3.js
  • Containerization: Docker for creating development and deployment environments
  • Version Control: Git and GitHub for source code management
  • Hosting and Deployment: AWS for cloud hosting, Docker Compose for container orchestration

Prequisites

  • Javascript (Node.js)
  • PostgreSQL for the database
  • Official API: The steam API
  • HTML, CSS, Javascript, Bootstrap for front-end applications
  • Containers will be using Docker, so having the latest version of Docker
  • Git and Github for collaborative work with other members
  • To run the container using Docker, make sure the "docker-compose.yaml" file has the correct code to run properly (the code is given in the final project). Make sure that all other containers currently running are shut down in order to run the current container for this project. To run the test, make sure Docker is running and open the localhost then start testing the code on your browser.

Deployment

In order to create a running accessible website for our project, we used Microsoft Azure to host a virtual machine that ran on linux. On the vm, I was able to download all the necessary docker files and then clone our github repository. After cloning the code locally on the vm, the docker file was available to be executed in order to get the site up and running for others to access without running any code on their own computer. The dns for our site was composed of our recitation number and our team number.

There is a limit to how long we could keep the website up with Azure so after to completion of the project I put it up with Amazon Web Services.