Your colors. Your people. A multilingual social and dating web application for the LGBTIQA+ community and respectful allies, aged 18 and over.
Website · Brandkit · Documentation contents · Getting started · Issues · Download for VS Code
English · नेपाली · ខ្មែរ · Türkçe · Deutsch · Español · Français · العربية · বাংলা · فارسی · עברית · हिन्दी · 繁體中文(香港) · Bahasa Indonesia · 日本語 · 조선말 · 한국어 · Polski · Português · Русский · ไทย · 繁體中文(台灣) · 简体中文
The app and this documentation include 23 locale variants. Each localized overview uses its own landing-page hero. Chinese and Korean regional variants retain the application's existing locale codes. Language reference.
CoolVibes brings community publishing, friendship, dating, nearby discovery and conversations into one responsive browser application. Members can build expressive profiles, share posts and media, find people and places, manage friendships and private-photo access, and personalize their experience.
This repository contains the web frontend, its static artwork and localization resources, and development fixtures. The API, account database, socket services, moderation operations and payment providers are separate services. A successful frontend build does not mean those services are configured or that every live workflow has been tested.
| Area | Frontend capabilities | Dependencies and boundaries |
|---|---|---|
| Community feed | Posts, replies, media, reactions, bookmarks, polls, event creation and responses | Persistence, uploads, content availability and permissions come from the API |
| Profiles | Biography, personal attributes, interests, preferences, followers and engagement lists | Sensitive fields respect visibility settings; optional missing values remain explicit |
| Friends and photos | Friend requests, public/private photo tabs, upload review, photo-access requests and revocation | Private media requires server authorization; an interface control is not a substitute for it |
| Discovery and dating | Search, profile discovery, likes, matches and nearby views | Location permission, API results and feature gates apply |
| Places and check-ins | Place discovery, maps, business details and check-in flows | Place data and location services are external dependencies |
| Messaging | Private and group conversations, replies, edits, forwarding, pinned messages, attachments, stickers and GIFs | Socket/API services are required; the README does not claim end-to-end encryption |
| Groups | Member selection, group details, public/private groups and invitation links | Membership and invite validity are enforced by the service |
| Live | Broadcast discovery, camera/microphone setup and participation requests | Agora, media permissions, service tokens and membership gates apply |
| Classifieds | Community listings and requests, categories and detail screens | Listings are API-backed; categories do not imply verified providers or services |
| Wallet and referrals | Balance/history views, deposit/withdraw interfaces, referral links and rewards | Availability depends on backend and payment providers; some payment options are placeholders |
| Appearance | Light/dark/system themes, accent colors, message size, chat gradients and wallpaper | Preferences are retained locally; uploaded assets use the existing storage flow |
| Public pages | Localized landing, authentication entry, legal/community center and downloadable brandkit | Public reading is separate from account creation and authentication |
Explore the product guide for routes, interactions and practical limits.
These are browser captures of the actual application, not design mockups. Authenticated screens use isolated fictional profiles and intercepted local API responses. No real accounts, private messages or production records were created for the screenshots. Localized landing screenshots use the appropriate regional hero artwork. Capture method and reproduction.
| Arabic / RTL | Nepali | Khmer |
|---|---|---|
![]() |
![]() |
![]() |
See Chinese, Japanese, Turkish, Hindi and Indonesian captures.
| Layer | Implementation |
|---|---|
| App | React 19, TypeScript, Vite 8 |
| Routing | Browser-history router in src/router; route composition in src/App.tsx |
| UI | Shared React controls, CSS/Tailwind, Lucide icons, Framer Motion/GSAP where used |
| Localization | i18next / react-i18next, locale JSON, RTL handling and region-specific heroes |
| Networking | Axios API client and Socket.IO client |
| Collections | react-virtuoso for existing virtualized long lists |
| Editing | Lexical editor modules, rich content, media and polling/event flows |
| Maps | Leaflet / React Leaflet and MapLibre GL |
| Live media | Agora RTC SDK |
| Quality | ESLint, custom interface regressions and Playwright fixture suites |
This is a Vite SPA, not a Next.js App Router application. dist/ is generated output.
Use Node.js 22.12+ on the 22.x line, or another version satisfying the installed Vite package (^20.19.0 || >=22.12.0), and Yarn Classic. The repository includes yarn.lock.
yarn install --frozen-lockfile
yarn devOpen http://localhost:5173 (or the port Vite prints if it is occupied). Public pages include /landing, /legal and /brandkit.
Authenticated functionality needs the separate backend. By default, local development uses HTTP 4001 and socket ports 4002/4003, as configured in src/appSettings.tsx. No database setup or production account credentials are included here. Configuration details.
yarn lint
yarn build
yarn startyarn build runs ESLint and creates the Vite bundle. yarn start runs Vite preview, a local preview server rather than a production hosting service. A deployment must serve dist/, provide SPA route fallback, and connect the required backend services.
src/
entry/ providers and application root
router/ browser navigation and links
screens/ route-level screens
features/ auth, chat, profile, post, discovery, editor, maps, media...
components/ui/ shared controls, dialogs, navigation and empty states
contexts/ auth, settings, theme, sockets and shared state
services/ HTTP client, API methods, actions and types
locales/ common, landing, auth and legal strings per locale
styles/ shared interface foundations
seo/ metadata and locale registry
public/ icons, artwork, fonts, animations, manifest and worker
scripts/ regression checks, fixtures and documentation capture
docs/ guides, translated overviews, screenshots and audit evidence
Architecture and integrations explains the relationships between these areas.
CoolVibes combines a responsive interface with an expressive visual identity: the CoolVibes wordmark, CV app icon, turquoise and violet colors, and illustrations celebrating community.
The interface supports localized navigation, light and dark themes, keyboard operation, touch interaction and reduced-motion preferences.
The Brandkit page exposes the transparent wordmark, app icons, social cover, palette and ZIP download. Source files are in public/images/brand/dott-v3/. These are raster assets; an editable vector master is not included.
# Static and production checks
yarn lint
yarn build
node scripts/check-interface-regressions.mjs
node scripts/check-public-locales.mjs
node scripts/check-documentation.mjs
# Documentation screenshots: fictional local fixtures, no real account writes
node scripts/capture-readme.mjsPlaywright capture uses installed Chrome on macOS by default; PLAYWRIGHT_CHANNEL can select another installed channel. The fixture suites exercise DOM, canvas, media and API response behavior. They do not certify real-device behavior, production payments, email delivery or live broadcast reliability.
Keep changes focused, use the @/ import alias for new shared imports, preserve permissions and localization, and record what you actually verified. Include reproduction steps and relevant visual evidence in pull requests. Testing guide.
This README is the English landing page for both GitHub and a GitBook Git Sync space. gitbook-docs.yaml defines the site structure and maps CoolVibes Documentation to the repository root. SUMMARY.md provides page navigation; .gitbook.yaml declares the space's root and entry files. In GitBook's Content mapping screen, choose gitbook-docs.yaml with the repository root as the Project directory. Translated overviews are ordinary Markdown pages with relative image links, so they remain usable in the repository too.
The files are ready to import; this change does not create or publish an external GitBook site. GitBook setup.
Privacy controls, blocking/reporting and sensitive-media visibility are part of the product, but this repository is not evidence of a completed security or accessibility certification. The current HTML includes Google Analytics integration, and external media providers can be used; this README therefore does not claim “no tracking.”
Package metadata declares ISC, while no top-level license text is currently present. Confirm the intended project license before redistribution. Third-party components retain their respective licenses.








