# Friendzy Social A polished Gen Z social media prototype for FRIENDZY — “Where memories become bonds” — with React SPA screens plus a minimal PHP/MySQL backend scaffold. ## Masterplan - Build a premium mobile-app-feeling social prototype centered on friendships, memories, rooms, reels, chat, and emotional compatibility. - Target Gen Z users who want visually rich social interactions beyond a plain feed: stories, DNA matching, voice status, rooms, and locked memory capsules. - Deliver the wireframe flow from splash → onboarding → auth → profile setup → core social pages without adding unrelated sections. - Maintain two current runtimes: the polished generated SPA in `index.html`/`src/*`, and a XAMPP PHP/MySQL backend scaffold in root `*.php` files. ## Tech Stack & Architecture - **Primary UI:** Browser-native React 19 loaded from `https://esm.sh` via ES modules. - `index.html` loads Google Font Poppins, Tailwind CDN, `styles/main.css`, GenMB capability scripts, and mounts `src/main.js` into `#root`. - JSX is not compiled; components use `htm` through `src/jsx.js` and template literals: `html\`

\``. - **SPA routing:** Hash-based routing in `src/App.js`. - Routes are mapped to components: `#/home`, `#/reels`, `#/friends`, `#/dna`, `#/chat`, `#/voice`, `#/rooms`, `#/capsules`, etc. - Splash is the fallback route and automatically redirects to `#/onboarding` after 3 seconds. - **State management:** Local React state only. - Auth/session wrapper is `src/mainProviders.js`. - Sample social data lives in `src/data/sample.js`. - Page interactions such as likes, chat messages, search, DNA count-up, onboarding slide index, and avatar preview are component-local. - **Capabilities integration:** `index.html` includes generated GenMB Auth SDK; `src/mainProviders.js` uses `window.genmb.auth`. - Supports Google sign-in, magic link, password sign-up with OTP verification, password login, and reset through capability SDK. - Note: this differs from the original “no OTP/external APIs” PHP-only auth requirement; document/code currently includes GenMB auth in the SPA. - `src/pages/ProfileSetup.js` uses `` and `` for file storage/avatar preview. - **Backend scaffold:** PHP + MySQL for XAMPP exists in root PHP files and `backend/*`. - `backend/config.php` creates a PDO connection to MySQL database `friendzy_db` and starts secure-ish sessions. - `backend/auth.php` handles PHP registration, login, logout, and route protection. - `backend/functions.php` contains current-user, post fetch/create, and chat save helpers. - `backend/upload.php` accepts authenticated image/video/audio uploads into `/uploads`. - **Styling:** The SPA uses `styles/main.css` for the full visual system. The PHP pages use minimal `assets/css/style.css`. - `assets/js/app.js` only adds a generic button ripple span and is not wired into the SPA. - **Important architecture gotcha:** There are two parallel apps: 1. **Polished SPA prototype:** `index.html` + `src/*` + `styles/main.css`. 2. **Minimal PHP/XAMPP pages:** `login.php`, `signup.php`, `home.php`, etc. with backend/database support. Do not assume changes in one automatically affect the other. ## File Structure ```text /friendzy ├── index.html # Main SPA entry; loads React/htm from CDNs, GenMB auth/storage capabilities, styles/main.css, src/main.js ├── styles/main.css # Main FRIENDZY visual system for the React SPA ├── src/main.js # React root mount; wraps App with Providers ├── src/jsx.js # htm binding used instead of compiled JSX ├── src/mainProviders.js # Auth context around GenMB auth SDK; notices/toasts and auth actions ├── src/App.js # Hash router, shell layout, Sidebar/BottomNav visibility ├── src/data/sample.js # Static stories, posts, friends, and room names used by SPA pages ├── src/components/Logo.js # Splash/logo lockup component ├── src/components/Sidebar.js # Desktop/sidebar navigation card with required menu items ├── src/components/BottomNav.js # Floating mobile bottom nav ├── src/pages/Splash.js # Cinematic 3s splash with logo, particles, loading bar ├── src/pages/Onboarding.js # 3-slide onboarding carousel with skip/next ├── src/pages/AuthPage.js # SPA login/signup/reset/magic-link/Google UI via GenMB auth ├── src/pages/ProfileSetup.js # Avatar upload via GenMB uploader, full name, username, bio ├── src/pages/Home.js # Static/sample stories and feed cards with local like state ├── src/pages/Reels.js # Scroll-style reel mockups and double-tap heart burst ├── src/pages/Friends.js # Searchable static friends list and friendship metrics ├── src/pages/DNA.js # Animated 92% Soul Match compatibility card ├── src/pages/Chat.js # Local in-memory chat UI with send-on-enter ├── src/pages/VoiceStatus.js # Voice status cards with waveform UI ├── src/pages/Rooms.js # Teleport room cards from sample data ├── src/pages/Capsules.js # Locked memory capsule cards ├── assets/css/style.css # Minimal PHP-page styles, not equivalent to SPA styling ├── assets/js/app.js # Simple ripple attachment for plain PHP buttons ├── backend/config.php # PDO config for XAMPP MySQL and session startup ├── backend/auth.php # PHP auth helpers: clean_input, register_user, login_user, require_login ├── backend/functions.php # PHP DB helpers for users, posts, chats ├── backend/upload.php # Authenticated upload endpoint into /uploads ├── friendzy_db.sql # MySQL schema and seed rooms ├── login.php # PHP login page using backend/auth.php ├── signup.php # PHP signup page using backend/auth.php ├── home.php # PHP protected feed page fetching DB posts ├── profile.php # PHP protected upload/profile form; currently posts only file to upload.php ├── reels.php # PHP protected placeholder ├── friends.php # PHP protected placeholder ├── dna.php # PHP protected placeholder ├── chat.php # PHP protected placeholder ├── voice-status.php # PHP protected placeholder ├── rooms.php # PHP protected placeholder ├── capsules.php # PHP protected placeholder └── uploads/ # Runtime upload destination expected by backend/upload.php ``` ## Key Features ### SPA product screens - **Splash:** `src/pages/Splash.js` - Shows `Logo`, particles, and loading bar. - Redirects to `#/onboarding` after 3000ms. - **Onboarding:** `src/pages/Onboarding.js` - Three slides, dots, skip, next/start CTA. - Final slide routes to `#/login`. - **Auth:** `src/pages/AuthPage.js` - Tabs: login/signup. - Fields for email, password, display name, confirm password, verification/reset codes as needed. - Uses GenMB auth methods in `src/mainProviders.js`, not the PHP backend. - On login success routes to `#/home`; on verified signup routes to `#/profile`. - **Profile setup:** `src/pages/ProfileSetup.js` - Avatar upload through ``. - Preview uses ``. - Continue routes to `#/home`; entered profile fields are not persisted in current SPA state. - **Home feed:** `src/pages/Home.js` - Top bar, horizontal stories, post cards. - Likes are local state only and reset on reload. - Posts/stories come from `src/data/sample.js`. - **Reels:** `src/pages/Reels.js` - Fake full-screen reel panels. - Double click or like button triggers temporary heart burst. - No real video source/autoplay currently. - **Friends:** `src/pages/Friends.js` - Live search filters `friends` from `src/data/sample.js`. - Includes metric cards for levels, active now, mood, streaks. - **Friendship DNA:** `src/pages/DNA.js` - Count-up animation to 92%. - Circular progress uses CSS variable `--value`. - **Chat:** `src/pages/Chat.js` - Local message array; send button/Enter adds right-side message. - No backend sync in SPA. - **Voice Status:** `src/pages/VoiceStatus.js` - Static audio cards, waveform markup, record CTA. - **Teleport Rooms:** `src/pages/Rooms.js` - Static room cards using names from `src/data/sample.js`. - **Memory Capsules:** `src/pages/Capsules.js` - Static locked cards with day counts and create button. ### PHP backend/API surface Current PHP endpoints are page-based rather than JSON APIs, except upload. - `backend/config.php` - Connects to MySQL `friendzy_db` with `root`/empty password. - Uses PDO exceptions, associative fetches, native prepared statements. - Starts session with `httponly` and `samesite=Lax`. - `backend/auth.php` - `register_user(PDO $pdo, string $email, string $username, string $password): bool` - Validates email, requires password length >= 8, stores `password_hash`. - `login_user(PDO $pdo, string $email, string $password): bool` - Looks up by email, verifies password, regenerates session ID, sets `$_SESSION['user_id']`. - `require_login(): void` - Redirects unauthenticated users to `/friendzy/login.php`. - `logout_user(): void` - Clears and destroys the session. - `backend/functions.php` - `current_user($pdo)` returns current user profile fields. - `fetch_posts($pdo)` joins `posts` to `users`, newest first. - `create_post($pdo, $userId, $caption, $mediaPath)` inserts a post. - `save_chat($pdo, $sender, $receiver, $message)` inserts a chat message. - `backend/upload.php` - Requires PHP session login. - Expects multipart field `file`. - Accepts MIME types: `image/jpeg`, `image/png`, `image/webp`, `video/mp4`, `audio/mpeg`, `audio/wav`. - Saves random filename in `/uploads`. - Returns JSON: `{ "path": "uploads/" }`. ### Database `friendzy_db.sql` creates: - `users`: auth/profile fields. - `posts`: feed media/captions. - `reels`: reel videos. - `comments`: post comments. - `likes`: unique `(post_id, user_id)`. - `chats`: text or voice chat messages. - `friends`: friendship status, level, streak. - `rooms`: voice room metadata; seeded with Late Night Talk, Study Together, Gaming Zone, Music Lounge, Chill Vibes. - `memory_capsules`: title, message, unlock date. ## Design Guidelines - Brand colors follow the prompt: - Primary purple `#6C3BFF` - Light purple `#9F7AEA` - Dark background `#0F0F14` - Card background `#1A1A22` - White `#FFFFFF` - Gray `#B0B3C0` - Yellow accent `#FFD84D` - Border `rgba(255,255,255,0.08)` - Glow `rgba(108,59,255,0.35)` - Typography: Poppins loaded in `index.html` with weights 300–700. - Visual style: dark premium Gen Z social app, glass panels, purple glow, rounded cards, soft shadows, animated hover/entrance effects. - Layout: - SPA pages render inside `.main-content`; app pages also show `Sidebar` and `BottomNav`. - Splash/onboarding/auth hide app navigation by route check in `src/App.js`. - Bottom nav is intended for mobile-style navigation; sidebar provides desktop/large layout navigation. - Reuse existing classes from `styles/main.css`: `screen`, `center-screen`, `glass-panel`, `primary-btn`, `page`, `narrow`, `mini-avatar`, `topbar`, etc. - PHP pages currently do not match the polished SPA design except basic `assets/css/style.css`; if visual parity matters, port SPA markup/styles or share the design tokens. ## App Flow - First load: 1. `index.html` → `src/main.js` → `Providers` → `App`. 2. If no hash, `App` sets `#/`. 3. Unknown or `/` route renders `Splash`. 4. `Splash` waits 3 seconds then routes to `#/onboarding`. - Onboarding: - Next advances slides. - Skip or final CTA routes to `#/login`. - Auth: - Password login routes to `#/home` after `auth.loginPassword`. - Signup starts GenMB password signup, then enters verification mode; verification routes to `#/profile`. - Magic link and Google sign-in use `window.genmb.auth`; messages display through the toast in `App`. - Main app: - Sidebar links and bottom nav links are hash anchors. - `src/App.js` decides whether to render `Sidebar`/`BottomNav` based on route not being `/`, `/onboarding`, or `/login`. - Edge cases: - If GenMB auth is unavailable, `Providers` catches boot errors but auth actions may fail if called; guard new auth UI accordingly. - SPA pages are not protected by current user checks; routes can be accessed by changing the hash. - PHP protected pages require `$_SESSION['user_id']` and redirect to `/friendzy/login.php`; this hardcoded path assumes the project folder is named `friendzy` under the web root. - `profile.php` posts directly to `backend/upload.php`; it does not currently update `users.full_name`, `username`, `bio`, or `avatar`. ## Conventions - **SPA components:** one component per file under `src/pages` or `src/components`; export named functions. - **JSX style:** use `html` from `src/jsx.js`; do not introduce a build step unless intentionally migrating the app. ```js import { html } from '../jsx.js'; export function NewPage() { return html`

Title

`; } ``` - **Routing:** add a route by: 1. Creating `src/pages/NewPage.js`. 2. Importing it in `src/App.js`. 3. Adding it to the `routes` object with a hash path like `'/new'`. 4. Adding sidebar/bottom-nav links only if it belongs in core navigation. - **State:** keep transient UI state local with `useState`; shared auth/notice state belongs in `src/mainProviders.js`. - **Data:** sample/static content should go in `src/data/sample.js`. Do not duplicate room/friend/post arrays inside many components unless page-specific. - **Styling:** prefer existing semantic classes in `styles/main.css`; add component-specific classes there rather than inline styles, except dynamic CSS variables like DNA progress. - **Backend:** use prepared statements through PDO. Reuse `require_once __DIR__ . '/backend/auth.php'` and `require_login()` for protected PHP pages. - **Uploads:** when using `backend/upload.php`, the form field must be named `file`, and the user must be authenticated through PHP sessions. - **Security gotchas:** keep `password_hash`/`password_verify`, `session_regenerate_id(true)`, MIME validation, and prepared statements. Add CSRF protection before making PHP forms production-facing. - **Do not mix auth models accidentally:** SPA auth is GenMB capability auth; PHP auth is MySQL/session auth. If implementing persistence for the SPA, decide whether to bridge to PHP APIs or stay fully in GenMB capabilities first. ## Platform (GenMB) This app is built and hosted on GenMB. **Runtime:** Browser sandbox (iframe) or Cloud Run. No Node.js server — all code runs client-side unless `backend/` exists. **Dependencies:** CDN-only (esm.sh, cdn.tailwindcss.com, unpkg). Use ES module imports with full CDN URLs. No `npm install` at runtime. **Entry point:** `index.html` must include all CDN script tags. Tailwind via CDN with inline config. **Built-in services (relative API paths only, never hardcode domains):** - `/api/ai/completion` — AI proxy | `/api/data/{appId}/*` — PostgreSQL (DataConnect SDK) - `/api/storage/{appId}/*` — File uploads (GCS) | `/api/auth/google/*` — Google OAuth - `/api/contact/submit` — Contact form | SDKs: `window.genmb.db`, `.storage`, `.auth` **File structure:** `index.html` (entry), `src/` (source), `styles/` (CSS), `backend/` (optional FastAPI), `CLAUDE.md` (this file). **Cannot:** Install npm packages at runtime, access filesystem, make direct server-side calls from frontend, modify infra.