Ads Marketplace

Appearance

Frontend Stack ​

The frontend is built on SolidJS, avoiding unnecessary React abstractions to ensure small bundle sizes, fast hydration, and fine-grained reactivity. The entire project is written in TypeScript for long-term maintainability and type safety.

This stack is optimized for Telegram Mini Apps, high-performance mobile UIs, and TON-based payments.

Core Framework ​

  • solid-js – Reactive UI framework with fine-grained reactivity (no virtual DOM).
  • @solidjs/router – Client-side routing for Mini App navigation.
  • solid-transition-group – Animated view/page transitions.
  • solid-devtools (dev) – Debugging and reactive graph inspection.

State, Data & Performance ​

  • @tanstack/solid-query – Server state management, caching, and background refetching.
  • @solid-primitives/scheduled – Frame/timeout/task scheduling utilities.
  • @nozbe/microfuzz – Fast client-side fuzzy search.

Telegram & TON Integration ​

  • @telegram-apps/sdk-solid – Telegram Mini Apps API bindings and lifecycle events.
  • twallpaper – Telegram-style animated wallpapers and backgrounds.
  • @tonconnect/sdk – TON wallet connection layer.
  • @tonconnect/ui – Prebuilt TON wallet modal & UI components.

Animations & Visual Effects ​

  • lottix – Render Lottie / TGS animations (gzip → JSON inflation).
  • animate.css – Predefined CSS animations.
  • solid-transition-group – UI transitions & enter/exit effects.

UI, Gestures & Interaction ​

  • swiper – Sliders, carousels, tab views.
  • pulltorefreshjs – Native-like pull-to-refresh gesture.
  • @types/pulltorefreshjs – Type definitions for TypeScript.
  • solid-icons – Icon packs optimized for Solid.
  • solid-toast – Toasts & user notifications.

Date, IDs & Utilities ​

  • dayjs – Lightweight date/time formatting.
  • uuid – Unique ID generation.
  • plausible-tracker – Custom event & analytics tracking (server-side friendly).

Internationalization ​

  • @solid-primitives/i18n – Multilingual support with reactive translations.

Styling System ​

  • Tailwind CSS – Utility-first design system.
  • @tailwindcss/vite – Native Vite integration.
  • SCSS (sass) – Advanced styling & variables.
  • postcss – CSS transformation pipeline.
  • autoprefixer – Cross-browser CSS compatibility.
  • postcss-reporter – CSS lint/error reporting.

Tooling & Build ​

  • Vite – Ultra-fast bundler and dev server.
  • vite-plugin-solid – SolidJS compiler & HMR.
  • vite-plugin-solid-svg – Import SVGs as Solid components.
  • vite-plugin-purgecss – Removes unused CSS in production.
  • Biome – Unified formatter + linter.
  • TypeScript – Static typing across the codebase.

Why This Stack Works for Telegram Mini Apps ​

  • Mobile-first performance (SolidJS + Vite)
  • Native Telegram UX (twallpaper, pull-to-refresh, swiper)
  • TON-ready (TonConnect SDK + UI)
  • Scales to large datasets (virtual lists + query caching)
  • Production-grade tooling (Biome, PurgeCSS, Devtools)