Development of the Explode App (UPDATED)

The Explode Webapp Development Overview

Our goal is to build a fast and responsive webapp that using a serverless infrastructure. Using modern web technologies attempting to accomplish this has never been easier. With HTMX 2.0 + extensions, AlpineJS + Extensions, TailwindCSS + Extensions, hono.JS, DrizzleORM, postal.js, websocket, Cloudflare R2, D1, Workers, and the Stripe API we building something awesome!

How we are using modern web technologies...

HTMX 2.0 + Extensions (htmx-ext-alpine-morph + head-support + ws + idiomorph + preload + response-targets + ajax-header + class-tools + client-side-templates + disable elementv+ event-header + include-vals + json-enc + loading-states + multi-swap + path-deps + path-params + restored + json-enc-custom + replace-params + shoelace + htmx-modal + htmx-ai + htmx-glue + Philosophy / Anatomy / Ergonomics).
AlpineJS + Extensions (Morph + $component/$parent + $fetch/$get/$post + $interval + $range + $refresh + $screen + $scroll + $truncate + $undo + x-markdown + x-tooltip + alpine router + spruce + mask + intersect + persist + focus + collapse + anchor + sort + dropdown + modal + accordian + carousel + + Tabs + Notifications + Radio Group + Toggle + Tooltip + Charts.js + Trix + Choices.js + Flatpickr + Date Range Picker + Glide + CSP + async).
Tailwind CSS + Extensions (Typography + Forms + Aspect Ratio + Container Queries + Static & Dynamic Utilities + Prefix & Important + Static & Dynamic Variants + Modal + Full Screen Modal + Mega Menu + Accordian + Alerts + Repsonsive Table + Centered Page + Carousel + Searchy + Counter + Badge + Circular Avatar + Progress Bar + Shimmer + Skeleton Loading + Price Box + Button Components + Page Sections + DaisyUI + Eccomerce Components + 404 components + Stamps + UI blocks + Icon Configurator + Colors + Gradient Generator + Chai HTML Builder + Hypercolor + Tailbone + ThemeSwitcher + Typography Playground + Profile Card + Fixed Header + NotusJS + Svelte).
SQLite.js is being used with Cloudflare R2. User Data*(user accounts, artist accounts, creator accounts, musician accounts, author accounts); Media Data(images, music, podcasts, video, ebooks, games, simulations); Interaction Data(upvotes, downvotes, audio comments, video comments, ebook comments, podcast comments, blog comments, game comments, simulation comments); User micro-blog Data*; **Game Data(single player, multiplayer)\; Simulation Data is based on categories, and modes (CATEGORIES: multiverse, time travel, farming, mining, space, world builder, interdimensional travel, virtual music festival, and more - WIP) + (MODES: Collaboration, VR/AR Experience, WebXR, Text Based, Realistic, Cyberpunk, Cartoon, Multiverse, Web, and more - WIP); all stored in a sqlite.js file with all reads and writes stored on Cloudflare R2. Blog Data (Hashnode); Payment Data* (Stripe+Stripe Connect+Stripe Issue*).
postal.js is an in-memory message bus - very loosely inspired by AMQP - written in JavaScript. Postal.js runs in the browser. It takes the familiar "eventing-style" paradigm and extends it by providing "broker" and subscriber implementations which are more sophisticated than what you typically find in simple event emitting/aggregation. (WIP)
websockets using the reconnecting-websocket.js library in a peer to peer configuration, powered by Cloudflare Calls for TURN. (WIP)
CloudFlare is how we piece it all together, we are using Cloudflare R2 as a way to store media files, and sqlite.js databases that are on D1 from the Explode App. Cloudflare Calls for websockets, under development. CloudFlare Workers to help move the content from the Explode App to R2, and back. CloudFlare Web3, is how we will develop Web3 applications without having to run infrastructure; Web3 Gateway DNS records. CloudFlare Zaraz allow us to add third party or custom native frameworks the Explode App without slow it down. (WIP)
Stripe we will be using Stripe for payments, and Stripe Connect for payouts for musicians, and content creators. (WIP)