SS Stream

Business automation, sold clearly. Managed without code.

Website · Admin panel · API docs

The public website and admin panel of SS Stream. Every price, discount and service on the site comes from the admin panel, and every lead reaches the team in Telegram.

SS Stream builds accounting systems, omnichannel CRM and AI sellers for businesses in Kazakhstan. This repository is the place where clients compare plans in Kazakh or Russian and leave a request, and where the team answers that request in a couple of clicks.

Prices live in the database, not in the markup.

Preview

Home · Pricing · Services · Request · Admin

Features

• Two languages: Kazakh by default, Russian one tap away. The choice is remembered, and catalog content is entered in both languages in the admin panel.
• Light and dark themes: the site follows the system setting on the first visit, then remembers the visitor's choice.
• Systems and plans: each product (accounting, omnichannel CRM and anything added later) has its own set of plans with features, notes and a "popular" mark.
• Discounts: a percentage per plan. The site shows the old price crossed out next to the final one.
• Negotiable prices: an empty price is shown as "Келісім бойынша" or "Договорная".
• Additional services: price lists with "from" prices and units: one-time, per hour or per month.
• Lead capture: the form pre-selects the plan the client clicked, validates input on both sides and is protected by a honeypot and rate limiting.
• Telegram delivery: each new lead is posted to the team's Telegram channel; the admin panel shows whether it arrived.
• Lead inbox: colored statuses, search, filters, pagination and a full lead card behind the eye icon.
• WhatsApp replies: one button opens the client's chat with a ready message in the language the client used on the site. Templates for both languages are edited in Settings.

Design

The palette comes from the SS Stream logo: rising bars, a growth arrow and a coin.

• Brand blue: #2563EB for actions, links and focus states.
• Growth gradient: #EC2F6B → #F97316 → #FBBF24, used in the logo arrow.
• Money green: #22C55E → #059669 for the "SS" wordmark and success states.
• Backgrounds: #F7F8FB in light mode, #0B1120 in dark mode, with surfaces one step lighter.
• Typography: Inter, with full support for Kazakh Cyrillic letters (ә, ғ, қ, ң, ө, ұ, ү, һ, і).
• Status colors: blue for new, amber for in progress, green for closed and red for rejected leads.

Technical Shape

• Backend: Python 3.13, FastAPI, SQLAlchemy 2 (async), asyncpg, Alembic, Pydantic v2, JWT, pipenv.
• Frontend: React 19, TypeScript, Vite, Tailwind CSS v4, TanStack Query, React Router, react-i18next, React Hook Form and Zod.
• Database: PostgreSQL. Translatable fields are JSONB objects ({"kk": "...", "ru": "..."}), so a new language needs no migration.
• Layers: api → services → models. Routers only handle HTTP, business rules live in services, external calls live in integrations/.
• Tests: pytest on an in-memory database for the API, Vitest for the frontend.

ss-stream/
├── backend/
│   ├── app/
│   │   ├── api/v1/          # routers: public/ and admin/
│   │   ├── core/            # settings, database, security, rate limiting
│   │   ├── models/          # SQLAlchemy tables
│   │   ├── schemas/         # Pydantic request and response models
│   │   ├── services/        # business logic
│   │   ├── integrations/    # Telegram
│   │   ├── seed/            # initial catalog
│   │   ├── cli.py           # management commands
│   │   └── main.py          # application factory
│   ├── migrations/          # Alembic
│   ├── tests/
│   └── Pipfile
├── frontend/
│   └── src/
│       ├── app/             # providers and router
│       ├── features/        # landing, leads, catalog, auth, admin
│       └── shared/          # api client, i18n, theme, ui kit, utils
├── docs/readme/             # images for this file
└── README.md

Getting Started

You need Python 3.13, pipenv, Node.js 20+ and PostgreSQL 15+.

Create a database and put its address into backend/.env:

DATABASE_URL=postgresql+asyncpg://USER:PASSWORD@localhost:5432/ss_stream

Start the backend from the backend folder:

cp -n .env.example .env

pipenv install --dev

pipenv run migrate && pipenv run seed && pipenv run create-admin

pipenv run dev

Start the frontend from the frontend folder:

npm install

npm run dev

The site opens on http://localhost:5173 and the admin panel on /admin. Vite proxies /api to the backend on port 8000. If that port is busy, run the backend on another port and start the frontend with API_PROXY_TARGET=http://localhost:8001 npm run dev.

To deliver leads to Telegram, create a bot with @BotFather, add it to your channel as an administrator and set TELEGRAM_BOT_TOKEN and TELEGRAM_CHAT_ID in backend/.env.

Everyday commands:

• pipenv run test and pipenv run lint check the backend.
• npm test, npm run lint and npm run build check the frontend.
• pipenv run create-admin also resets the password of an existing admin.

Roadmap

• Lead cards instead of a table on small screens in the admin panel
• Kazakh plan names in Kazakh WhatsApp messages
• Company contacts editable from the admin panel
• Lead export to Excel
• Docker Compose for one-command setup

License

All rights reserved © SS Stream.