Back to Blog
Full-stack development setup
Web Development5 min read

Building My First Full-Stack Website: A Journey of Growth and Grit

By Ian ZhuWritten on February 20, 2025Posted on March 20, 2025

Embarking on my first full-stack website project felt like stepping into uncharted territory. But through trial, error, and relentless learning, I not only built a functional system but also gained invaluable insights into web development. Here's how it unfolded.

The Tech Stack: Foundations of the Project

I chose a modular approach to ensure scalability. For the frontend, I relied on JavaScript, CSS, and HTML, paired with Bootstrap for responsive design—a decision that streamlined styling and future maintenance. The backend was powered by Node.js and Express, with MSSQL handling database connections. To secure sensitive data, I integrated encryption using the Crypto package.

Data Integration: Real-World Challenges

Populating the database taught me the importance of reliable sources. Player and team data came from official websites and Wikipedia, while event and match details were pulled from specialized trackers. User data, however, required manual input during testing—a tedious but eye-opening process that highlighted the need for automation in future projects.

The Hurdles: When Theory Meets Practice

The biggest challenge? Database complexity. Displaying comprehensive match and event details meant querying five or more tables simultaneously. Early attempts with stored procedures led to inefficiencies and omitted data, forcing me to rethink my approach. This pushed me to optimize queries and adopt a more modular table structure, ensuring each component had a clear responsibility.

Lessons in Maintainability and Growth

One key takeaway was the value of modular design. By organizing tables around specific functions, debugging became simpler, and updates no longer risked breaking unrelated features. For example, adding a hypothetical "MediaPlatform" table for streaming integration would now be straightforward—a testament to the system's extensibility.

Why This Project Changed My Perspective

Building this website wasn't just about coding; it was about problem-solving under pressure. I learned to embrace iterative improvements, prioritize user experience, and appreciate the balance between flexibility and structure.

If you're starting your own development journey, my advice is simple: begin with a clear modular plan, expect roadblocks, and treat every error as a stepping stone. The satisfaction of seeing your system handle real-world data? Worth every late night.

This project solidified my passion for full-stack development—and reminded me that the best learning happens when you're knee-deep in code. 🚀

Check Out the Project

Want to see the Esports Data Tracking System in action? Visit the project page to explore the features and learn more about the implementation.

View Project Details