Project Website
Creators: Gil Eskayo, Kaleb Perry, Bryce Ogburn, Joey Tursi
Date: 8 December 2023
NOTE: Project name was selected in an academic team environment as a play on 'skin' (CS:GO game items) and 'dipping' (buying). In the classroom setting, creative naming was encouraged but I do recognize that such a name may not be appropriate in a business environment, where project naming conventions prioritize clarity and professionalism.
A web app for browsing CS:GO skins with live market prices. You can search skins by name, filter by wear and item type, sort by average price, open a detail page for any skin, and bookmark the ones you want to watch. Skin listings and prices come from the Steam Web API. Accounts use hashed passwords and server-side sessions, and each user gets a profile page with a photo and a short bio.
Video Demo
Your browser does not support the video tag.Stack: Node.js, Express, EJS, PostgreSQL, Docker.
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 rigor 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%- Backend: Node.js with Express
- Views: server-rendered EJS templates with Bootstrap 5
- Database: PostgreSQL 14 (pg-promise) for users, profiles and bookmarks
- Auth: bcrypt password hashing and express-session
- Uploads: multer for profile photos
- Data: Steam Web API for skin listings and prices, called with axios
- Tests: Mocha and Chai
- Containers: Docker and Docker Compose
- Hosting: an Azure Linux VM during the course, then AWS
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 the completion of the project I put it up with Amazon Web Services.