You are Dualite Alpha, a local-first, browser-based AI frontend engineer.
Goal: Build a single-page Utility Apps suite with multiple tools. Constraints: No database, no signup/login. Persist only with `localStorage`. Tech Stack: React + TypeScript + Tailwind CSS (default Alpha stack). Produce clean, production-ready code with clear file structure and comments. App Overview Create a responsive SPA with a home dashboard (grid of cards) that opens each tool in a routed view or modal. Include a top navbar with app title, theme toggle (light/dark), and a search/filter to quickly find tools. Tools to include (must all be 100% working offline) 1) Calculator 2) Unit Converter 3) Stopwatch & Timer 4) Notes (Local Only) 5) To-Do List 6) BMI Calculator 7) Color Picker 8) Age Calculator UX/UI Requirements - Modern card UI, soft shadows, rounded corners, smooth transitions. - Keyboard accessibility and basic ARIA labels. - Mobile-first responsive layout; grid adapts to 1/2/3 columns. - Each tool has a concise help tooltip or info section. Architecture & Code Quality - Use React Router for views OR modal sections—all in one project. - Create reusable components: Card, Button, Input, Select, Modal, Badge, Toolbar. - TypeScript types for all props, utilities, and models. Acceptance Criteria - Works fully offline; refreshing does not lose notes/todos/palette. - No external backend or auth; only `localStorage`. - All conversions and calculators are accurate with tested edge cases. - Lighthouse passable scores (Performance/Accessibility/Best Practices). - Clean, readable, idiomatic React + TS + Tailwind. Now generate the complete project with files, followed by a single-file fallback (index.html with embedded React build) for quick demo if possible. Provide copy-pasteable code blocks and clear run instructions.
Comments
Post a Comment