In this post, we’ll dive deep into how TV Shows Reminder is architected, exploring everything from the frontend to backend, infrastructure choices, and integrations that make the WebApp perform smoothly.

Introduction

TV Shows Reminder is designed to help users effortlessly keep track of their favorite TV shows, receiving timely notifications about upcoming episodes. The architecture behind this app blends modern frontend technologies, robust backend services, and cloud infrastructure, ensuring scalability, performance, and security.

Architecture Overview

At a high level, TV Shows Reminder employs a microservices-inspired architecture. The frontend uses ReactJS with Redux for state management, the backend relies on a .NET WebAPI, and Strapi is utilized as a separate content management service, all orchestrated seamlessly through Cloudflare’s infrastructure and various Azure services.

Frontend: ReactJS, Redux, TailwindCSS

The frontend is built with ReactJS, providing a responsive and dynamic user experience. TypeScript ensures type safety and robustness, minimizing bugs at compile-time. TailwindCSS offers a highly maintainable styling solution.

State management is streamlined with Redux, offering predictable state transitions. Data fetched from APIs and search results are cached in local storage, significantly enhancing response times.

The app leverages Cloudflare Pages for hosting, combined with Cloudflare Workers and Workers KV for serving static data such as show details, seasons, and episodes, minimizing backend hits and ensuring rapid content delivery.

Backend and Data Management

The backend services are powered by ASP.NET WebAPI (.NET 8), hosted on Ubuntu servers. Crucial data is cached using Redis, dramatically improving response times and minimizing database latency.

Strapi acts as a separate microservice, managing user-related information and homepage content. This modular approach helps maintain separation of concerns, easy updates, and better security by abstracting unnecessary details away from the frontend.

Firebase Authentication simplifies user credential management, eliminating the overhead of storing sensitive data on internal servers.

Image Handling and Optimization

Images are managed via Imbo, an image server deployed on DigitalOcean Spaces. Imbo offers real-time image resizing and manipulation capabilities, ensuring optimal image delivery speed and size.

Metadata for image lifecycle management is stored in Azure Table Storage, where image identifiers track images older than 60 days, enabling timely cleanup. Meanwhile, Imbo maintains duplicate copies of these images in DigitalOcean Spaces until deletion, ensuring consistency and availability.

Search and External Integrations

Search functionality integrates directly with TMDB’s robust search engine. Results are combined with optimized images from Imbo, ensuring accuracy and visual appeal.

When searches occur, resulting show IDs are queued into Azure Service Bus. This action triggers a .NET-based Worker Service deployed on a separate Ubuntu server. This service fetches detailed show data and updated images through imgcdn.in, communicating with both Imbo and the primary .NET WebAPI.

Notification Management

Notifications are orchestrated via Azure Logic Apps, triggered every 12 hours, and run on Azure App Services. This service processes upcoming shows and user subscriptions to generate personalized email notifications.

To prevent duplication and ensure robustness, notification data is first stored in MongoDB. Emails are dispatched primarily through SendGrid, with AWS Simple Email Service (SES) serving as a reliable backup.

Furthermore, OneSignal enables browser-based push notifications, extending user engagement beyond emails.

Security and Performance

Security is integral to the system architecture. JWT tokens and TOTP codes protect API endpoints, preventing replay attacks and ensuring authenticated access.

Redis caching dramatically reduces latency, enabling faster response times from backend services. Cloudflare Workers play an additional crucial role, managing caching and API security efficiently, offering protection against common web vulnerabilities.

Lessons Learned and Future Improvements

Building TV Shows Reminder provided several key insights:

• Separation of frontend and backend services significantly eases development and maintenance.
• Leveraging dedicated microservices like Strapi can significantly simplify content and user-data management.
• Caching and image optimization considerably enhance performance and scalability.

Looking ahead, there is potential for:

• Enhanced automation and refinement in image lifecycle management.
• Integration of machine learning for personalized user recommendations.
• Continuous improvements to the notification engine to deliver even more targeted and timely alerts.

Conclusion

TV Shows Reminder exemplifies a well-thought-out, scalable architecture using modern frontend frameworks, robust backend services, and strategic cloud integrations. The blend of best practices ensures an optimal user experience and a maintainable codebase poised for future growth and enhancements.