While learning React, I wanted to build something substantially larger than standard tutorial apps. I came across basic blog tutorials that only supported simple text CRUD, but I felt inspired to take the concept much further.
I expanded the idea into a complete content platform: adding 5-star rating breakdowns, unique view counters, comment threads, creator dashboards, and public author profiles. Whenever I take on a project, I always push the scope to build something distinct and comprehensive.
Early in development, I experienced the classic React rite of passage: I accidentally DDOS'd my own backend.
A missing dependency array check inside a useEffect hook triggered an uncontrolled render cascade, firing hundreds of API calls per second. The browser froze, the developer console flooded with red errors, and my Appwrite rate limits triggered immediately. Fixing that bug forced me to deeply understand React lifecycles, hook memoization, and cleanup functions.
When I built this project, I hadn't yet learned Node.js backend development, so I utilized Appwrite as a Backend-as-a-Service. Being new to database architecture, I created separate Appwrite collections for ratings, views, author profiles, and comments.
This introduced the classic N+1 query problem on the client: rendering a feed required separate API queries for each post's metadata. Since my goal was mastering React rather than backend design, I compensated by architecting a heavy Redux Toolkit caching layer. By caching normalized post entities and user sessions in memory, the app felt instant and responsive despite the fragmented database design.
Once the features were stable, I went into obsession mode on performance and UX. I didn't want the platform to feel sluggish or unpolished.
I implemented client-side image compression via browser-image-compression (converting avatars to 50KB and covers to WebP), route-level code splitting, and skeleton loading screens. The result was a 91/100 Performance and 96/100 Best Practices score on Google PageSpeed Insights.
This project taught me one of the most critical lessons of my engineering journey: solid architecture is a non-negotiable requirement, whether you are using a BaaS or architecting a custom backend from scratch.
While client-side Redux caching solved the immediate performance bottlenecks here, relying on frontend workarounds for fragmented data access was not sustainable long-term. That realization pushed me to master backend systems directly. This led to projects like Blogify, where I took full ownership of unified schemas, automated asset lifecycles, and server-side rendering from day one.