Decoder2704/python-chatbot-jay

1# Frontend redesign plan — premium SaaS / AI product (React + Vite)2 3**Scope:** UI/UX and frontend structure only. **No backend, API, or chatbot logic changes.** Same chat request/response contract and response parsing in `api.js`.4 5**Stack:** React 18, Vite 5, CSS (recommend **CSS variables + modules** or a single `tokens.css` + component-scoped classes). Add **React Router** for multi-page navigation.6 7---8 9## 1. Design system (tokens)10 11Centralize in `frontend/src/styles/tokens.css` (imported once in `main.jsx`).12 13| Token | Suggestion | Notes |14|--------|----------------|-------|15| **Page background** | `#f4f5f7` or `#f1f3f6` | Light gray, full viewport |16| **Surface / card** | `#ffffff` | White cards |17| **Border** | `1px solid rgba(15, 23, 42, 0.08)` | Soft |18| **Shadow (card)** | `0 1px 3px rgba(15,23,42,0.06), 0 8px 24px rgba(15,23,42,0.06)` | Subtle elevation |19| **Shadow (hover)** | Slightly stronger | Cards / buttons |20| **Primary** | `#6366f1` (indigo-500) | Buttons, links, focus ring |21| **Primary hover** | `#4f46e5` | |22| **Primary subtle** | `rgba(99, 102, 241, 0.1)` | Badges, selected nav |23| **Text primary** | `#0f172a` (slate-900) | Headings |24| **Text secondary** | `#64748b` (slate-500) | Body secondary |25| **Radius** | `12px` cards, `10px` inputs, `9999px` pills | Consistent rounding |26| **Spacing scale** | `4, 8, 12, 16, 24, 32, 48, 64` px | Use as `--space-1` … `--space-8` |27| **Container max-width** | `1120px` or `1200px` | Marketing sections; chat can be `720px` inner column |28| **Typography** | `system-ui, "Inter", …` or Google **Inter** | Bold H1/H2 (600–700), body 400–500 |29 30**Hierarchy:** Display / H1 → H2 → H3 → body → small / caption (line-height 1.5–1.6).31 32---33 34## 2. Reusable components (library)35 36| Component | Responsibility |37|-----------|----------------|38| `Layout` | Shell: `TopNav` + `<Outlet />` + optional footer |39| `TopNav` | Logo, links (Home, Chatbot, Features, Docs, Tech Stack), Login / Sign Up CTAs; sticky optional; mobile hamburger |40| `Button` | Variants: `primary`, `secondary`, `ghost`, `danger` (optional); sizes `sm` / `md` / `lg` |41| `Card` | Variants: `default`, `elevated`, `outline`; optional `CardHeader`, `CardBody` |42| `Section` | Vertical padding + max-width container + optional title/subtitle |43| `PageHeader` | Title + description for inner pages |44| `Input` / `Label` | For Login/Sign Up forms (even if demo-only) |45 46Place under `frontend/src/components/ui/` (primitives) vs `frontend/src/components/layout/`.47 48---49 50## 3. Routing structure51 52Install: `react-router-dom`.53 54```text55/                 → Home (landing)56/chat             → Chatbot (existing chat UI, wrapped in layout)57/features         → Features58/docs             → Docs (static in-app documentation)59/tech-stack       → Tech Stack60/login            → Login (UI only; can be static demo)61/signup           → Sign Up (UI only)62```63 64**Chat API:** Keep `frontend/src/services/api.js` as-is; `ChatWindow` only mounted on `/chat` (or embedded on Home as optional CTA section — prefer dedicated `/chat` for clarity).65 66---67 68## 4. Page-by-page outline69 70### Home (`/`)71- Hero: headline + subcopy + primary CTA “Open chatbot” → `/chat`, secondary “View features” → `/features`72- 3-column feature strip (icons + short bullets) — teaser, links to `/features`73- Social proof strip (optional): “Stack Overflow data · TF-IDF · FastAPI”74- Footer: minimal links + GitHub75 76### Chatbot (`/chat`)77- Narrow centered column (`max-width ~720px`) inside a **white `Card`** on gray page background78- Reuse existing bubbles/input; apply design tokens (purple send button, soft borders)79- Optional: compact **page title** “Chat” + one-line product subtitle80 81### Features (`/`)82- `Section` blocks: retrieval, API, UI, deployment (recruiter bullets)83- Alternating text + placeholder visuals (simple CSS illustrations)84 85### Docs (`/docs`)86- Static markdown-style sections OR bullet list87- High-level architecture and deployment notes only (no HTTP path reference in copy)88 89### Tech Stack (`/tech-stack`)90- Grid of tech chips/cards: React, Vite, FastAPI, scikit-learn, pandas, Docker, HF, etc.91 92### Login / Sign Up (`/login`, `/signup`)93- Centered **Card** with form fields (email/password), primary button94- Disclaimer: “Demo UI — no authentication wired” if not implementing auth (recruiter-transparent)95 96---97 98## 5. Responsive behavior99 100- **Nav:** Horizontal links collapse to hamburger `<768px`101- **Containers:** Horizontal padding `16px` mobile, `24px` tablet+102- **Chat:** Full width on mobile with safe padding; max-width on desktop103- **Typography:** Slightly smaller H1 on mobile104 105---106 107## 6. File structure (target)108 109```text110frontend/src/111  main.jsx112  App.jsx                 # <BrowserRouter> + routes113  styles/114    tokens.css115    global.css            # reset + base body116  components/117    layout/118      Layout.jsx119      TopNav.jsx120      TopNav.css121    ui/122      Button.jsx123      Card.jsx124      Section.jsx125    chat/                 # existing ChatWindow, MessageBubble, SampleQuestions — restyle imports126  pages/127    Home.jsx128    ChatbotPage.jsx       # wraps ChatWindow129    Features.jsx130    DocsPage.jsx131    TechStack.jsx132    Login.jsx133    Signup.jsx134  services/135    api.js                # unchanged136```137 138---139 140## 7. Implementation phases (realistic)141 142| Phase | Work |143|-------|------|144| **1** | Add `react-router-dom`, `tokens.css`, `global.css`, `Layout` + `TopNav` shell |145| **2** | Build `Button`, `Card`, `Section`; migrate **Chat** page + restyle existing chat components |146| **3** | Implement **Home**, **Features**, **Tech Stack** with placeholder content |147| **4** | **Docs** page + **Login/Sign Up** static forms |148| **5** | Responsive nav, a11y pass (focus, landmarks), visual polish |149 150---151 152## 8. Constraints (rechecked)153 154- **API:** Keep existing `api.js` request/response handling unchanged155- **No env changes required** for same-origin HF; dev proxy in `vite.config.js` unchanged156- **Backend:** untouched157 158This plan is ready to hand to implementation as a sprint backlog; adjust copy and section order per portfolio preference.159