My First Public Website: Building a Multi-Sport Trivia Website
Created a sports trivia game using NextJS and hosted it on Vercel, acheiving 10K+ visitors.
Timeline
July 2023 - Present
Tools
NextJS, PostgreSQL, Python, Prisma, Vercel
Role
Lead Developer and Designer
Link
Introduction
"Connect Grid" is a sports trivia website that I designed and developed from the ground up. Inspired by the popularity of the Immaculate Grid website, which focused on baseball trivia, I recognized the opportunity to create a similar platform that extended beyond baseball and incorporated additional features. As my first venture into website hosting, Connect Grid presented a valuable learning experience, allowing me to gain insights into web development, data management, design principles, and user engagement.
Project Origins and Goals
The idea for Connect Grid was sparked by the limitations of the existing Immaculate Grid website, which lacked an unlimited mode and support for sports beyond baseball. Determined to create a more versatile and engaging experience, I set out to build a sports trivia website that encompassed the two other major sports (NFL and NBA) and introduced an unlimited mode.
Data Acquisition Challenges
One of the initial challenges I faced was obtaining the necessary sports data. While there was no direct API available for retrieving team player information, I resorted to web scraping. This approach, however, brought me into contact with rate-limiting issues. To overcome this, I strategically managed my data retrieval methods by scraping various sites. I implemented data storage within a PostgreSQL database hosted by Heroku. This allowed me to efficiently manage the data for NFL and NBA teams.
Development Journey
With the data infrastructure in place, I shifted my focus to building the frontend. Using Figma, I prototyped a clean and user-friendly design that aligned with my vision for simplicity. Originally, I was utilizing Flask routes with a Python backend, but I encountered unexpected challenges when combining them with a Next.js frontend. Consequently, I transitioned to a Next.js frontend and a Python backend for more consistent functionality.
Complex Database Queries and Unique Hints
Building the core functionality involved crafting intricate database queries to generate unique hints for users. These hints, such as "All-NBA" distinctions and the player's college, enriched the trivia experience. Debugging and addressing bugs was a vital part of this stage, ensuring a smooth user interaction.
User Engagement and Growth
Connect Grid quickly gained traction, attracting 1,000 users within a span of just 2 or 3 days. The integration of Google Analytics provided valuable insights into user behavior, enabling me to refine the user experience. To increase the number of users, I explored marketing strategies and initiated a Twitter account to connect with potential users.
Adapting to Complexity
As new features were introduced, including various game modes and answers modals, the project's complexity grew beyond my initial expectations. This realization prompted me to transition from using Local Storage for data storage to Redux, enhancing the application's performance and data management capabilities.
Continuous Learning and Enhancement
Throughout the project, I dedicated significant time to honing my skills in web development technologies. I immersed myself in learning Tailwind CSS, React, Flexbox, and mobile responsiveness. Additionally, I acquired insights into SEO strategies and marketing techniques, underscoring the importance of attracting and retaining users.
Conclusion
Connect Grid stands as a testament to my journey of creating a versatile and engaging sports trivia platform. From overcoming data acquisition challenges and implementing complex database queries to enhancing user engagement and exploring new technologies, this project encapsulates my commitment to innovation and continuous improvement. As I continue to add new features and refine the website, Connect Grid remains a dynamic and evolving showcase of my skills and passion for web development.