Recapio User Interface

Below is a detailed prompt you can provide to your AI agent to build the “Recapio” UI using ReactJS and MUI. Feel free to adapt or refine as needed. Prompt: Build the Recapio User Interface (UI) with ReactJS and MUI 1. Project Overview • Name: Recapio • Goal: Create a web application that allows users to input or upload text, summarize the content, and store/view previous summaries. • Tech Stack: • ReactJS (latest version) • Material UI (MUI, version 5 or latest) • (Optional) Redux or React Context for state management if needed • (Optional) React Router for routing between pages 2. Design Guidelines • Layout • Use a responsive layout that works on desktop, tablet, and mobile. • Primary pages or sections: 1. Login / Registration (if user accounts are needed) 2. Dashboard (overview of user’s saved summaries) 3. Summary Editor (the main page where users enter or upload text to be summarized) 4. History / Archive (past summaries, ordered by date/time) • Navbar or AppBar at the top with the Recapio brand/logo, navigation links, and user account details (if needed). • Color Palette • Primary: #1976D2 (MUI default blue) or a slightly darker shade for brand identity. • Secondary: #FFC107 (amber) or any complementary accent color. • Background / Surface colors: typical MUI gray tones, e.g., #f5f5f5. • Typography • Use MUI’s default typography settings (Roboto) or a brand specific font. • Headings (h1, h2, h3) should be bold and clearly distinguished. • Spacing and Sizing • Follow Material Design spacing (multiples of 8px). 3. Component Architecture Component Description Key Props / State App Root component; contains routing and global layout (AppBar, footer, etc.). Global state (user session, theme), React Router routes. NavBar MUI AppBar with brand/logo, navigation links, user account button. Logged in user info, navigation handlers. Footer Simple footer, optional – references, version info, or contact. N/A Dashboard Landing page after login; shows recent summaries, quick links to create new summary. Summaries list, user ID, fetch status. SummaryEditor Main text input or file upload area; triggers the summarization. Text content, summarization status, error messages. SummaryCard Card displaying an individual summary (title, short snippet, options to view/edit/delete). Summary data (title, snippet, date), callback to handle actions. History Displays a list of past summaries, sorted by date. Summaries array, filters, search string. Login / Register Pages for user authentication if needed (otherwise can be omitted or replaced with a single “guest” flow). Authentication status, form data, validation states. 4. Key Features and Interactions 1. User Registration & Login (Optional) • Email/password fields, plus UI for error messages. • MUI <TextField> components for inputs, <Button> for submissions. 2. Dashboard • Display recent summaries using MUI <Card> or <Paper> components in a grid or list format. • Action: “Create New Summary” button that routes to the SummaryEditor. 3. SummaryEditor • Text Input: A large <TextField> (multiline) or <Editor> like component for typing/pasting content. • File Upload (optional): MUI <Button> with an upload icon to handle file selection. • Summarize Button: On click, calls an API or function to generate the summary. • Output Display: After summarization, show the final text in a read only text field or a <Typography> block. • Save/Discard: Buttons to save the summary to the user’s history or to discard. 4. History • List of saved summaries (with date, short snippet). • Sort and filter capabilities (date range, search). • Clicking an item opens its detailed view (could be on the same page or a detail view). 5. Settings / Profile (Optional) • Option for user to change preferences (theme light/dark, notification settings, etc.). 6. Responsive Design • Ensure the layout collapses to a drawer on mobile or uses responsive breakpoints from MUI. 5. Implementation Steps 1. Initialize Project • Use create react app recapio or Vite. • Install dependencies: npm install @mui/material @mui/icons material react router dom 2. Project Structure recapio/ ├── public/ ├── src/ │ ├── components/ │ │ ├── NavBar.jsx │ │ ├── Footer.jsx │ │ ├── SummaryCard.jsx │ ├── pages/ │ │ ├── Dashboard.jsx │ │ ├── SummaryEditor.jsx │ │ ├── History.jsx │ │ └── Login.jsx │ ├── App.jsx │ ├── index.js │ └── themes/ (optional) ├── package.json └── ... 3. Routing (react router dom) • Set up routes in App.jsx: <BrowserRouter> <NavBar /> <Routes> <Route path="/" element={<Dashboard />} /> <Route path="/editor" element={<SummaryEditor />} /> <Route path="/history" element={<History />} /> <Route path="/login" element={<Login />} /> </Routes> <Footer /> </BrowserRouter> 4. NavBar • Use MUI <AppBar> and <Toolbar> with brand title. • Include nav links (Dashboard, Editor, History). • Optionally include a user avatar or login/logout button. 5. Dashboard • Fetch or display a list of recent summaries in a grid. • Include a “Create New Summary” button linking to /editor. 6. SummaryEditor • Large MUI <TextField multiline> for text input. • Summarize button that triggers an API call or internal function. • Display result in a MUI <Paper> or <Card> with the summarized text. • Save or discard the summary. 7. History • Use MUI <List> or <Grid> to show saved summaries. • Summaries displayed with <SummaryCard> components. • Each card has a snippet, date, and a link to the full summary. 8. Global State (Optional) • Use React Context or Redux to store user data, summary results, or loaded history for consistent access. 9. Theming • Create a custom MUI theme if needed in /themes/. • Use MUI’s <ThemeProvider> in index.js or App.jsx. 10. Styling • Rely primarily on MUI’s theming system. • Keep inline styling minimal; use the sx prop or makeStyles/styled components if needed. 11. Testing & Validation • Use React Testing Library or Jest for component tests. • Validate text input fields for length, no empty submissions, etc. 6. API Integration (If Using Summarization Service) • API Endpoint: e.g., POST /api/summarize with raw text to get a summary. • Fetch Example: const summarizeText = async (inputText) => { const response = await fetch('/api/summarize', { method: 'POST', headers: { 'Content Type': 'application/json' }, body: JSON.stringify({ text: inputText }), }); return response.json(); // expected: { summary: "..." } }; • Error Handling • Display Alert or Snackbar if an error occurs. • Use loading spinners (CircularProgress) while waiting for the API response. 7. Final Deliverables • A fully functional React application using MUI for styling and layout. • Pages: Login (optional), Dashboard, SummaryEditor, History. • Basic user flow: 1. Open App > Login (if enabled) > Dashboard 2. Create a new summary (SummaryEditor) 3. Save summary > Appear in Dashboard and History 8. Additional Notes / Considerations • Accessibility: Use proper ARIA attributes, alt tags, labels on form fields. • Security: If user accounts are integrated, handle token storage securely (localStorage or HTTP only cookies), and protect private routes. • Deployment: Ensure the build is optimized via npm run build (or equivalent). Use all of the above information to guide the AI’s development of the Recapio UI. Make sure it generates or outlines the relevant React components, sets up routing, applies Material UI theming, and integrates summarization logic or stubs where appropriate.