World Gymnastics Coaches
The World Gymnastics Coaches website is a dynamic platform designed to showcase podcast episodes featuring insights and interviews with gymnastics coaches from around the world. Built using Framer, the website integrates a CMS (Content Management System) to manage and display podcast episodes seamlessly. Each episode includes a title, description, duration, and an embedded Spotify player, providing visitors with an interactive and engaging experience.
The goal of the project was to create a visually appealing and user-friendly website that allows visitors to explore and listen to podcast episodes directly on the platform. The concept revolved around leveraging Framer's powerful design and development tools to build a fully dynamic website where content could be easily updated via a CMS. This approach ensures that the website remains scalable and easy to maintain as new episodes are added.
The website was developed using Framer's visual development tools and custom code components. Key features of the development process include:
CMS Integration: A custom CMS collection was created to manage podcast episodes, including fields for title, description, duration, image, and Spotify embed links.
Dynamic Components: A reusable
PodcastPlayercomponent was built using React (TSX) to dynamically display each episode. This component integrates the Spotify embed player, ensuring a seamless listening experience.Responsive Design: The website was designed to be fully responsive, ensuring optimal viewing and interaction across devices.
Repeat Functionality: Framer's Repeat feature was used to dynamically generate a list of podcast episodes based on the CMS collection, eliminating the need for manual updates.
The main challenge was to create a dynamic and scalable solution for displaying podcast episodes without requiring manual coding for each new episode. Additionally, integrating Spotify players directly into the website posed a technical hurdle, as standard Spotify links do not work in iframes. The goal was to ensure that each episode could be played directly on the website without redirecting users to external platforms.
The solution involved:
Spotify Embed Links: Using Spotify's embed links (generated from the "Share > Embed" option) to ensure the podcast players could be displayed directly within the website.
Custom Component: Developing a custom
PodcastPlayercomponent in Framer using React (TSX). This component dynamically pulls data from the CMS and renders the episode details along with the Spotify player.CMS-Driven Content: Leveraging Framer's CMS to manage all podcast content, making it easy to add, update, or remove episodes without touching the code.
Repeat Feature: Utilizing Framer's Repeat functionality to automatically generate a list of episodes based on the CMS collection, ensuring scalability and efficiency.
The result is a sleek, dynamic, and user-friendly website that showcases the World Gymnastics Coaches podcast in an engaging and interactive way. This project highlights the power of Framer for building modern, content-driven websites with minimal manual intervention.
