JingleFm
A Next.js-based SSR app for a podcast search engine. with a heavy focus on performance optimization, a smooth and interactive experience, and pixel-precise design execution.
Check the Complete DemoMy role
Front-end Development
Page performance
SEO Optimisation
Custom Audio Player
Branding
UI Design
Tools used
Next.js
React
SCSS
SWR
HTMLCanvas
SEO
Figma (UI)
Completed
Mar 2021 to Sep 2021
A SSR web app with unique requirements
The app had millions of podcast pages that need good SEO & social visibility (opengraph). Next.js is the obvious choice for this project that has high server rendering needs. But it has its own unique requirements, making the app a hybrid of SPA (Single Page Application) & MPA (Multiple Page Application).
Next.js, Next/router, prerendering - SSR & ISR
Static components like a sidebar (like youtube) & a audio player (like spotify) that doesn't rerender with every new page load but keeps it state active in between the transition of pages, making a multi page application act as an SPA.
ISR - Incremental Static regenration for Genre & Trending pages that need to be regenrated every 12 hours.
Serving the podcast/episode pages with a dynamic stale/cache period so as to decrease the load on server.
Nested Routes for an episode in a podcast & how the SEO is setup for such a complex application.
Trays with large lists & DOM manipulation.
JingleFm as a podcast explorer required lots of items to be displayed on the same page without making the website clunkier and heavy. The solution was Virtualized lists. i.e the Podcast Trays are DOM manipulated real-time using react-window, every view that gets out of bounds in the list gets destroyed, thus maintaining a smaller memory size even for a list larger than 1000 items.
React-window, DOM manipulation, Virtualising Lists
An In-depth implementation of Search.
Search is the primary feature of this project and there were a lot of sub-requirements & sub-features within it. From the Instant Searchbox that instantly shows quick search suggestions to the Search result page with a variety of filters and In-podcast searchbox that searches all episodes of a particular podcast.
SWR, Search Results pagination, Next/Router
A varied set of filters ranging from Release date of Podcast, Time length of Podcast, Genre, Safe Browse/Explicit Tags, and sorting modes based on popularity, release date or ranking.
SWR for client side caching of search results based on the query keys. using conditional fetch & preventing waterfall chaining in some pages where a second request need to made depending on the Search Tab
A clean Query URL for Search results page with all filters attached in query params. So that if a user copy-paste the url, then the seach will be reloaded with same filters selected.
Use of shallow routing to prevent a page reload if the user is already on the search page, yet the search query in th URL changes
The Instant searchbox was built with a debounced listener to the input, and the resulting instant search results are navigatable with TAB,UP,DOWN keys and selectable with ENTER key.
Building a custom audio player with waveforms
The technical requirement was the generation and rendering of waveforms on the basis of the pitch of the podcast audio. We used a mix of HTML Canvas Drawing, Media Recorder & Capture Stream. The audio stream from the podcast is captured in a blob format and analysed using AudioAnalyzer and the waveform is drawn per frame in an HTML canvas while cleaning up the previous frame draws.
HTML Canvas, Media Recorder, Capture Stream
A Responsive & Pixel-Precise UI.
Although the UI may look and feel smooth and simple, there were many hidden criteria, that needed some extra work from the development prespective.
Figma (UI Design), SCSS, Bootstrap
The dominant theme of the web app was darker shade, inspired from spotify and other podcast apps, and as always, the UI design for a dark theme is tough, as there will not be many variations for hovering actions, the greys of the app needed to be picked carefully.
Delivered a responsive web app for all screen sizes (mobile, tablet, laptop, TV) and supports all modern browsers (Chrome, Firefox, Edge, Brave, and IE11).
Search Engine Optimisation (SEO).
Designing SEO for bulk websites that have upto 2 million web pages is both important and complicated. For a small site, generating a sitemap would be more than enough, but for a large scale application, sitemaps are although useful, page level SEO settings like 'robots' meta header and app level SEO setting with robots.txt define the crawler patterns.
Generated XML Sitemaps, Robots.txt, page level SEO settings, Stuctured JSON-LD
SSR is a big help for SEO as the page is pre-rendered with all the meta-info & links, unlike client side hydration in React.
A dynamic XML sitemap is genrated through the api for all links avaialable in few of the important pages like homepage, tending, latest, genres etc..
A page level SEO setup with 'robots' metaheader defining index,follow, noindex,nofollow
An App level SEO setup for disabling crawling into unwanted routes of the application.
Structured JSON-LD for out sourcing In-App Search functionality to Google & other search engines.
