Marley White

Casual Gamer Tales

A personal project aimed at reigniting a passion for gaming, built with a custom CMS and optimized for SEO.

Client: Personal ProjectTimeline: Approximately 2 months (Ongoing)Tech Stack: Next.js, TypeScript, SCSS, Custom CMS
Casual Gamer Tales project overview

Goals and Objectives

The primary goal for Casual Gamer Tales was to dive into Next.js, exploring its capabilities for dynamic routing, SEO, and page performance optimization. I aimed to familiarize myself with Google Search Console and Bing Webmaster to enhance the site visibility and reach.

Another objective was to create a custom CMS, a project within a project, tailored to my growing needs as I develop. This allowed me to experiment with a range of backend and frontend features, building a solid foundation for future projects.

Additionally, this project was an opportunity to share my enthusiasm for web development with a friend, bringing him on board with the concept of a gaming website we both can enjoy.

Process & Development

Research & Planning

With years of experience exploring gaming websites, I had a general idea of the site structure, flow, and visual style. However, when I began implementing Server-Side Rendering (SSR) in Next.js, it quickly became clear that performance and SEO optimization would play a much larger role than expected. Working with SSR meant rethinking components for better load times and higher performance, which led to multiple redesigns of the hero section and refinements in the overall site structure.

SEO and page performance were essential focus areas. I invested time in studying SEO best practices, such as URL structuring and efficient slug generation, and implemented techniques to enhance my site search visibility. Working with Google PageSpeed Insights introduced an engaging, iterative challenge; I treated each test as an opportunity to refine the site load time, accessibility, and SEO impact, ultimately striving for perfect scores across key metrics. This effort required ongoing optimizations, particularly in managing how assets loaded and ensuring critical content appeared promptly for users.

Development & Challenges

A primary goal for the Hero Section was implementing dynamic content loading while maintaining smooth, responsive data handling. This section displays a featured post alongside a grid of secondary posts, where a skeleton loader bridges the gap during data loading, maintaining visual continuity and enhancing user experience even in slower network conditions.

Firestore, Firebase database solution, was essential for managing the site content, allowing easy separation of primary and secondary featured items. I chose to load the main featured post server-side, improving page speed and SEO impact, while client-side loading was implemented for other elements, like the Footer and RecommendedGames, to maintain a balanced performance.

Performance optimization was a consistent challenge throughout development. Achieving top PageSpeed Insights scores required testing, refining, and experimenting with various rendering strategies. Structured error handling and skeleton loaders played a crucial role in maintaining a stable, responsive UI, particularly under less-than-ideal network conditions. This approach allowed for a dynamic, engaging experience without sacrificing load speed or performance.

Routing & CMS Integration

One of the most rewarding parts of this project was implementing structured, SEO-friendly routing within the custom CMS. I designed the CMS to allow easy content classification, enabling me to tag posts with categories such as Blog, News, or Review. Each content type would then dynamically load on its respective page, with correct routing that aligns with SEO best practices.

Through the CMS, I can specify content types that not only drive the dynamic loading of posts into their designated pages but also ensure meaningful URLs that support search visibility. The CMS currently offers a streamlined content creation and publishing process that both my friend and I can use. The routing integration required careful planning, as each category—/blog, /news, /review—needed to load its respective content smoothly while retaining high SEO value.

Tools & Tech Stack

  • React
  • Next.js
  • SCSS
  • Firebase

Reflection & Lessons Learned

Building Casual Gamer Tales has been an invaluable learning experience, not only in terms of developing with Next.js but also in managing content dynamically through a custom CMS. The site CMS allows both my friend and me to log in, create posts, and set content locations (like Blog, Guide, or News), ensuring each piece lands in the right spot dynamically.

Through multiple iterations and adjustments, I have gained insights into effective database management and fine-tuned my understanding of page performance and SEO. I also learned that layouts don’t need to be static; evolving them to suit the content needs is often beneficial, enhancing both usability and engagement. There is still plenty of content to create, but Casual Gamer Tales now has the framework to support it as we continue to expand the site.

Interested in learning more about this project or seeing more of my work?