UmroAyyar quiz

Muhammad Yahya

Web Designer
Database Engineer
Fullstack Engineer
Google Apps
Node.js
Svelte

The Product:

The client required a quiz capable of handling tens or even hundreds of thousands of participants who would watch their movie. They wanted a way for the viewers to interact with the quiz after watching the movie and distribute prizes to the winners. This demanded a high availability solution with minimal down time in order to pull this off.

Technical Considerations:

The client had mostly given me free reign over which technologies I used. They had only two requirements, which were:
Build them a URL-Shortener as they wanted to have an in house solution for shortening and creating dynamic URLS.
Export user-submitted form data to CSV format, ideally integrating with Google Sheets.
Both requirements were straightforward and simple to implement, however it was important that both worked reliably and under high loads.

Design:

The client provided me with a rough design sketch. They asked me to follow the sketch as a guideline. They also gave me the freedom to make some minor changes to improve the design. However, I had to stay relatively close to the original template they had provided.
I adjusted colours, fonts, and the overall layout to better align with the movie's aesthetic, resulting in a design the client was highly satisfied with.

Choosing the Correct Technologies

URL Shortener: the main constraint here was the client's budget. For this reason, I proposed a proven open-source solution. This approach not only significantly reduced costs but also offered the long-term benefits of a free, actively maintained platform. They now have a sustainable solution that fits their financial goals perfectly.
Alternatives Considered:
Google Sheets Integration: A direct API connection proved insufficient under the anticipated load of thousands of requests. This would have significantly slowed our network. To solve this, I implemented Redis caching for all requests, batching them before uploading. This drastically reduced form submission times from 5-12 seconds to a mere 1-3 seconds, while also freeing up valuable server resources.
Key Rationale: The open-source URL shortener provided an ideal balance of features and maintainability. Redis was chosen for its speed, simplicity in this use case, and widespread adoption as a caching and buffering solution.

Implementation

Making the most of the limited time: The seamless deployment of the open-source URL shortener freed up development time for optimizing the critical data handling pipeline. I implemented a robust Redis strategy for efficient caching and uploading, focusing on:
User-Centric Frontend: I chose Sveltekit for its developer-friendly design, rapid prototyping capabilities, and inherent performance. This ensured a responsive and reliable user experience.
Performance and Cost Optimization: My solution delivered a win-win scenario:
Financially Sound Choices: Selecting the open-source URL shortener yielded significant savings:

Remarks:

By implementing strategic caching with Redis, I reduced user wait times by up to 90% and significantly improved server efficiency during peak loads. This solution empowers the client with the insights they need while delivering a smooth experience for a massive participant base.
Partner With Muhammad
View Services

More Projects by Muhammad