PodHub Website
Next JS (React) • Typescript • GCP • CSS • UI Design • OAuth2 / APIs
Developed a fully reactive website to showcase a podcast network's work and expand their reach amongst listeners and other podcasters.
Integrated with Spreaker's API to pull podcast episode information and stats.
Users could authenticate with Google's Firebase Auth and make customizations to their page, such as embedding Twitch streams, tweets, or Patreon buttons.
Using a cloud function, scraped podcast episode data daily from the spreaker API, stored in firebase, and displayed an infinite scrolling list of all network episodes.
Filling out forms sent out emails to both parties via cloud functions.
Server-Side rendered pages in a cloud function and cached in Google's CDN for performance and SEO.
OAuth2 Handshake with Spreaker to fetch and store episode information and play statics for display in graphs visible to admins.
Try it out: podhub-bd87b.web.app
(⚠ The original podhub url has been abandoned as the group has disbanded, but it’s still accessible from the firebase hosting URL. Some images are also now broken)
In addition, almost all of the podcasts have been removed from the spreaker account, so this is the only podcast URL that still functions completely:
Skills Developed
Collecting vague requirements from clients and iterating on designs based on received feedback. A large percentage of time was spent on this.
Became much more familiar with Google cloud technologies. As well as utilizing the local emulation tools provided by google for local development and automated testing.
Gained tons of experience integrating with external APIs, Implementing the OAuth2 handshake, and managing data.
Technology
Next JS - Built on react.
Google Firebase for user auth, document store, and cloud functions.
Hosted as a cloud function. Static pages generated on request and cached in the CDN.
Completely custom, hand-crafted CSS. No UI framework of any kind.
Jest unit tests.
Showcase
Home page
This carousal is reactive. And I'm pretty proud of that spotlight animation! It works in both desktop and mobile.
The 'Podcasts' Page shows the latest episodes from ALL podcasts. This data is scraped daily by a cloud function which saves episode information into Firestore.
Podcast page
Responsive Design
Admin page
New podcasts could be added, edited, or hidden from the site from this page. A Spreaker ID still had to be added to the database manually so that the site could actually fetch the podcasts or statistics.
I added the ability for admins to generate one-time-use codes to give when onboarding podcast members so they had admin permissions for their Podcast. This page would manage that.
The system integrates with Spreaker’s API to get podcast information and statistics. This page verified we had access or would allow you to go through the OAuth2 handshake process to obtain an access token.
Edit Podcast Page
Thanks to React magic, get real time previews of changes as you make them. With working buttons you can verify on the edit page.
The sidebar could be customized with widgets, such as Twitch streams, tweets, custom message, patreon links, etc… When the page was viewed on mobile, the widgets above the “page split” would go above the podcast feed (of latest 5 podcasts). So they could put whatever was most important up top, and the rest go to the bottom.
Signup page
Validation:
Submissions would be sent via email using google cloud functions. Both the podhub team email list and the user submitting the form would get their own emails after completing this form.
