[ Selected work ] / 2025
Veredillas FM
>>> Summary
Web platform for the IES Las Veredillas school podcast and radio: seasonal episodes, live radio, blog, listener leaderboard and digital collectible cards.
- Role
- Design & Development full-stack
- Stack
- Astro, Cloudflare R2, MongoDB, Tailwind
- Year
- 2025
>>> Details
Veredillas FM represents the technological evolution of traditional school radio into an educational "Backend-as-a-Service" platform. Designed to overcome the limitations of legacy platforms like Blogger, this project serves as a dynamic social hub that centralizes content distribution and fosters secure interaction within the educational community.
Architecture and Technology Stack
The system is built upon engineering decisions focused on performance (Core Web Vitals), security, and data sovereignty:
- +Frontend (Astro & TypeScript): Utilizing "Islands Architecture," the site delivers static HTML by default ("Zero JS"), hydrating only interactive components—such as the audio player or chat—as needed. The entire codebase is strictly typed with TypeScript to ensure robustness and maintainability.
- +Database (MongoDB): A NoSQL solution used for persistent storage, allowing for flexible data structures such as user profiles, comments, and episode metadata.
- +Automation (n8n & Oracle Cloud): A self-hosted VPS orchestrates complex business processes (e.g., sending newsletters, verifying email addresses) asynchronously, offloading these tasks from the application's main execution thread.
Functional Innovation
1. Two-Factor Comment Verification System
To moderate user-generated content (UGC) without creating excessive friction, a secure protocol has been implemented: when a user posts a comment, the backend generates a cryptographic token, and n8n sends a validation email via Mailjet. The comment is only published once confirmed, effectively preventing spam and abuse.
2. "App-Like" Web Experience
- +Fluid Navigation: View Transitions allow users to navigate the site without interrupting audio playback.
- +Command Palette: A "fuzzy search" feature, accessible via
Ctrl+K, provides instant access to content. Glassmorphism Design:* A modern interface featuring real-time blur effects, an adaptive dark mode, and fluid animations.
3. Real-Time Interactivity
The platform transcends passive consumption by integrating dynamic social features:
- +Live Chat & Reactions: Synchronous communication during premieres, complete with "flying emojis."
- +Optimistic UI: Instant interface updates that eliminate the perception of latency.
Infrastructure and Challenges
One of the primary challenges involved managing CORS policies within a distributed environment. Communication between the frontend (serverless, hosted on Vercel) and the automation backend (a VPS on Oracle Cloud) required precise network engineering: analyzing CIDR ranges, whitelisting IP addresses within the Oracle VCN, and fine-tuning rules in the Cloudflare WAF to permit legitimate automation traffic without compromising perimeter security.
Impact
Veredillas FM is more than just an audio repository; it serves as an empirical demonstration of how the convergence of modern technologies can address real-world communication challenges. It provides students with a tool for autonomous, secure, and cutting-edge expression.