FACEIT BANNER / DOCS
Developer documentation
This part explains how FACEIT Banner is built and how to extend it. The project is a static React app with no backend of its own; it loads player data straight from the FACEIT API.
Tech stack
- Vite 7, React 18, TypeScript (strict), react-router-dom 6
- styles: LESS, the 2026 look in widget/src/styles/*.less
- data: FACEIT Data API v4 called from the browser, no intermediate server
- deployment: Docker (node:22-alpine to build, nginx:1.27-alpine to serve), CapRover
Repository layout
| Path | Contents |
|---|---|
src/generator/ | the generator: Settings, Appearance and Statistics tabs |
src/components/ | shared generator UI (layout cards, thumbnails, size panel) |
src/settings/ | setting definitions and the manager (URL, localStorage) |
src/translations/ | interface texts: Polish, English, German |
src/docs/ | this documentation, rendered to HTML at build time |
widget/src/widget/ | the Widget component that runs in OBS |
widget/src/styles/ | banner and layout styles |
widget/src/utils/ | the FACEIT API client and the banner size logic |
public/ | static files, the wiki, robots.txt, sitemap.xml |
deploy/nginx.conf | nginx configuration for the container |
Updated: