003 : Website Build

Creators: Gil Eskayo

Date: 14 January 2024

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.

• 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 initially, with data management transitioning to Python scripts for CSV output
• API Development: Flask-RESTful for building the API endpoints, with APIs being run through Python and outputting data into a CSV file
• Web Development Tools: HTML, CSS, JavaScript, Bootstrap for frontend design
• Data Analysis and Visualization: Pandas, Matplotlib, D3.js for data handling and visual representation
• Containerization: Initially considered Docker for development and deployment environments; however, this was not utilized in the final deployment
• Version Control: Git and GitHub for source code management
• Hosting and Deployment: Hosted on HostGator with the site set up as a WordPress website for ease of content management and deployment

The guiding principle behind the design of my website was to create an elegant, user-centric platform that emphasizes simplicity and functionality. Inspired by the minimalist design philosophy, I aimed to craft an environment where content is king, and the user experience is streamlined and intuitive. This approach led to a deliberate choice of a black and white color scheme, which not only imbues the site with a timeless elegance but also serves a practical purpose. By minimizing color usage, the website directs users' attention to key areas and features that do incorporate color, making them stand out and enhancing the overall navigational experience.

Responsiveness and accessibility were also central to the design process. Recognizing the diverse range of devices and screen sizes users might employ to access the site, I prioritized a responsive layout that ensures content is displayed optimally across all platforms. This not only improves usability but also contributes to a more inclusive digital environment, accommodating users with varying needs and preferences.

Typography was chosen with readability and user comfort in mind, employing clean, sans-serif fonts that complement the minimalist aesthetic while ensuring text is easy to read on any device. This careful selection enhances the site's accessibility, making it welcoming to a broader audience.

The design process was supported by a range of tools that facilitated the creation of mockups, wireframes, and prototypes, allowing for a thorough exploration of design concepts before moving into development. Figma emerged as the primary tool of choice, offering a versatile platform for designing, prototyping, and collaborating. Its intuitive interface and comprehensive feature set enabled me to efficiently translate my design vision into a tangible, interactive prototype that served as a blueprint for the website's development.

Through a combination of Figma's robust capabilities and the foundational design principles of minimalism, responsiveness, and user-centricity, the website was crafted to not only showcase my Python skills but also to provide users with a seamless, engaging experience. The journey from concept to reality was significantly influenced by the skills and insights gained from a comprehensive zero-to-mastery class, which provided a solid foundation in both design and development disciplines.