🚀 High-Performance Headless Tebex Template
Stop losing customers to slow loading times and clunky default themes. This is a fully standalone, headless Tebex integration built on a cutting-edge web stack. It utilizes the Tebex Headless API to bypass standard design restrictions, giving you full control over the user experience while maintaining the security of the official Tebex gateway.
We focused purely on performance metrics (Lighthouse) and conversion optimization. No bloated assets, no unnecessary render blocking—just a clean, lightning-fast checkout flow designed to get players from "browse" to "purchase" instantly.
🔴 Live Demo
Want to feel the speed yourself? Check out the live deployment here:
🔗 https://sws-tbx-01.swisser.dev
⚡ Technical Stack (Built from Scratch)
This isn't just a CSS edit. It is a Single Page Application (SPA) engineered for speed:
-
Core: React 19 + TypeScript
-
Build Tool: Vite 7 (Instant HMR, highly optimized production build)
-
Styling: TailwindCSS v4 (Zero runtime overhead)
-
State Management: Zustand + TanStack Query (Smart caching, instant page transitions)
-
Animations: GSAP (Hardware accelerated, smooth performance)
📊 Benchmarks
-
Performance: 100/100 (Google Lighthouse)
-
SEO: 100/100 (Fully semantic HTML + OpenGraph tags)
-
Best Practices: 100/100
🛠️ Key Features for Server Owners
1. Single-File Configuration
You don't need to know React. The entire store is customized via one file (store.config.ts):
- Set your
tebexToken and currency.
- Define primary, secondary, and surface colors (hex codes).
- Toggle features like Announcements, Social Links, or Navigation.
- Inject your Google Analytics ID directly.
2. Conversion-Focused UX
-
Cart Persistence: Users won't lose items on refresh (Local Storage).
-
Instant Feedback: Non-intrusive toast notifications (via
sonner) for cart actions and errors.
-
Smart Loading: Skeletons and optimistic UI updates make the store feel instant, even on slow connections.
3. SEO & Discoverability
Built-in react-helmet-async integration ensures your store looks great everywhere. Automatically generates:
- Canonical URLs.
- Twitter/X Card metadata.
- Discord Embed previews (OpenGraph).
4. Hosting & Security
-
Secure Payments: All transactions are processed securely through Tebex; this template is purely a frontend interface.
-
Free Hosting: Since this is a static site using the API, you can host it for free on Cloudflare Pages, Vercel, or Netlify.
📦 How to Install
- Download the build files.
- Edit
config/store.config.ts with your details.
- Upload the
dist folder to any web host.