> ## Documentation Index > Fetch the complete documentation index at: https://docs.modulex.dev/llms.txt > Use this file to discover all available pages before exploring further. # Architecture overview > How ModuleX fits together: one FastAPI backend, a Next.js app, a Socket.io realtime server, two SDKs, and an installable tool catalog, bound by managed storage, a shared in-memory store, and Clerk. export const MediaEmbed = ({id, type = 'screenshot', caption = '', ext, ratio = '16 / 9'}) => { const isVideo = type === 'video' || type === 'app_video'; const resolvedExt = ext || (isVideo ? 'mp4' : type === 'screenshot' ? 'webp' : 'svg'); const src = 'https://media.modulex.dev/' + id + '.' + resolvedExt; const [status, setStatus] = useState('loading'); const [isDev, setIsDev] = useState(false); const [inView, setInView] = useState(false); const boxRef = useRef(null); useEffect(() => { if (typeof window === 'undefined') return; const h = window.location.hostname; setIsDev(h === 'localhost' || h === '127.0.0.1' || h.endsWith('.mintlify.app')); }, []); useEffect(() => { if (inView) return; if (typeof IntersectionObserver === 'undefined') { setInView(true); return; } const el = boxRef.current; if (!el) return; const io = new IntersectionObserver(entries => { if (entries.some(e => e.isIntersecting)) { setInView(true); io.disconnect(); } }, { rootMargin: '300px' }); io.observe(el); return () => io.disconnect(); }, [inView]); if (status === 'missing') { if (!isDev) return null; return
{id} {type}
{caption || 'Media not uploaded yet.'}
Upload to R2 as {id}.{resolvedExt} β€” preview only, hidden in production.
; } const mediaStyle = { display: status === 'loaded' ? 'block' : 'none', width: '100%', height: 'auto', borderRadius: '0.75rem' }; const media = isVideo ?