🕹 live demo: https://metalshop.dev/?mock
🧪 codepen demo shows drop-in html usage
open source web components, microservices, and infrastructure
hello, my name is chase. metalshop is my dream project to perfect the art of building modern high-end cross-domain microservice-oriented isomorphic web applications. metalshop is a library, and this repository contains everything: frontend, backend, even continuous deployment. features like auth, users, profiles, paywalls and premium subscriptions, community features like forums and questions boards — you get it
start making apps with plug-and-play html components
metalshop is an easy-to-use extensible web-app starter kit, enabling webdevs from junior to expert to get started quickly and easily by plunking down html web components onto any webpage. there's a focus on developer experience, leveraging latest technologies, and exploring best practices. it's easy for juniors to use, but you can take the training wheels off: this is real heavy-duty app developer stuff
looking for collaborators
of course, i'm building my own apps with metalshop. and you should too! join me and we can collaborate together on new features so everybody can benefit. what features would interest you for your own app ideas? we currently need help designing new features, building new web components, and writing business logic for the microservices, kubernetes, and more
📌 post a github issue if you have any questions
👉😎👉 join the metalshop discord and give me a shoutout!
🤖 let's build next-gen web apps together with es-modules!
🌈 obsessive focus on idyllic developer experience
⛲ big features as simple html web components
🖧 node microservices: orchestrated kubernetes backend
🔐 authentication and authorization: google login, token based
♻️ isomorphic: robust mock mode runs all business logic on frontend
🃏 standardized user profiles: nicknames, avatars, stuff like that
💳 paywalls and subscriptions: collecting the big bucks via stripe
📺 private livestreams: for premium subscribers, via vimeo
🎉 community-building features: questions board and more
📦 npm package: metalshop
🚧 under construction: current work in progress!
🎓 better documentation and readme: coming eventually
🎁 "metalfront" web components
i really need to document these
some of them require certain attributes or properties
come talk to me on the discord, link above somewhere
<metal-config> — configure metalshop, server urls and stuff
<metal-account> — login, logout
<metal-personal> — user's own editable profile panel
<metal-my-avatar> — user's own display picture
<metal-questions> — questions board, forum to post or like questions
<metal-paywall> — user can manage their premium subscription
<metal-liveshow> — private livestream for privileged users
<metal-countdown> — countdown timer, handy for the liveshow
<cobalt-avatar> — display any user's avatar
<cobalt-card> — display any user's profile info
<metal-button-auth> — button to login or logout
<metal-button-premium> — button to login and subscribe to premium
<metal-is-loggedin> — display any dom content when user is logged in
<metal-is-premium> — display any dom content when user is subscribed
<metal-is-staff> — display any dom content when user is a staff member
🐋 "metalback" microservices
⭐ metalback/ — metalshop's helm chart for kubernetes
auth-server — authentication and authorization, user profiles
paywall-server — payments and subscriptions
settings-server — private user settings
schedule-server — save/load timestamps
questions-server — interact with questions forum
liveshow-server — privileged access to a video livestream
🛠️ metalshop-related libraries and tools
renraku — json-rpc api
cynic — async esmodule testing framework
redcrypto — token crypto
crosscall — cross-domain frame rpc
menutown — top-right menu components
importly — importmap generator
dist/toolbox/dbby/ — agnostic mockable database adapter
dist/toolbox/logger/ — handy logger utility
dist/toolbox/concurrent.js — handy utility for groups of promises
💐 metalshop is open source love
please contribute, ask questions by submitting issues!
👋😎 chase