Explode Devlog

As we have been prototyping various way of developing the EXPLODE app, we have finally built what we wanted.

Bun is what we have decided on, we choose Bun of NodeJS due to the benchmarks. Bun is much quicker ⚡

We are using Cloudflare to deploy the app, with the following technologies:

1. CloudFlare Workers (Backend built with HonoJS+OAuth Providers+Drizzle-ORM)

2. CloudFlare Pages (Frontend HTMX/TWIND generated by backend/HonoJS)

3. CloudFlare D1 (Database for Userdata)

4. CloudFlare Workers KV (Key/Value Storage)

5. CloudFlare Workers AI (For Vectorize)

6. CloudFlare Vectorize (AthenaDB for relational data, recommended section)

7. CloudFlare Images and Stream (Stores user uploaded images and videos)

8. Cloudflare Call (WebSockets for live video)

9. Cloudflare R2 (Storing Music Files)

There will be approximately 120 CF Workers with CF Workers KV Namespaces and each will have a specific function.

One to handle public pages, with a worker and KV namespace for the search function, comment function, sign-ins, membership levels, Audio Player (AP), AP playlist function, AP modes (audio visualizer, lyrics, mini games), AP tracking, AP ads, AP miner, AP Premium, Video Player (VP), VP playlist function, VP modes (demand/live), Share function, donate/tip function, dashboards (admin, musician, podcaster, content creator, licensing, advertising, and developers), video upload, music upload, music distribution, earnings, musician, podcaster, content creator, advertiser analytics.

Every worker will process a KV namespace, to route *.explode.pro/function or function.explode.pro, using CloudFlare DNS.

DESIGN

With Tailwind CSS we styled the elements with what we created that can only be called Animated Stained Glassmophism.

Including our custom Glassmorphic CSS stylesheet, with elements containing the following tags:

1. ANIMATED-CONTENT

2. BACKDROP-BLUR-20

3. BACKDROP-CONTRAST-100

4. BACKDROP-SATURATION-100

With a dark mode set of similar settings, just offset for a dialed in experience in light or dark mode.

The background is an animated hue shifting background, as the animations occur behind the element is gives it a unique look; unlike any modern UI.

The more we design the UI, the more creative we get, we will be making the hue shifting background much more smoother with more fluid animations. As well as adding subpixel antialiasing to the fonts, we are using Inter for the fonts.

Our landing page is coming, along with our webapp.

Please follow us on https://x.com/ExplodeMediaG