{"id":33760359,"url":"https://github.com/itsmetrina/smart-ux-assistant","last_synced_at":"2026-04-07T21:31:20.481Z","repository":{"id":326556509,"uuid":"1106099848","full_name":"itsmetrina/smart-ux-assistant","owner":"itsmetrina","description":"AI-powered UX microcopy generator built with Next.js 14, Tailwind, and OpenAI. Generate, improve, and translate UI text with a polished dark-mode interface.","archived":false,"fork":false,"pushed_at":"2025-11-30T13:07:29.000Z","size":122,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-12-01T19:42:18.153Z","etag":null,"topics":["ai","ai-tools","frontend-engineering","fullstack-app","microcopy","nextjs","openai","react","tailwindcss","typescript","ux-writing","vercel"],"latest_commit_sha":null,"homepage":"https://smart-ux-assistant.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/itsmetrina.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-28T16:20:27.000Z","updated_at":"2025-11-30T13:07:32.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/itsmetrina/smart-ux-assistant","commit_stats":null,"previous_names":["itsmetrina/smart-ui-copy-assistant","itsmetrina/smart-ui-assistant"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/itsmetrina/smart-ux-assistant","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsmetrina%2Fsmart-ux-assistant","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsmetrina%2Fsmart-ux-assistant/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsmetrina%2Fsmart-ux-assistant/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsmetrina%2Fsmart-ux-assistant/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/itsmetrina","download_url":"https://codeload.github.com/itsmetrina/smart-ux-assistant/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsmetrina%2Fsmart-ux-assistant/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31530641,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T16:28:08.000Z","status":"ssl_error","status_checked_at":"2026-04-07T16:28:06.951Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","ai-tools","frontend-engineering","fullstack-app","microcopy","nextjs","openai","react","tailwindcss","typescript","ux-writing","vercel"],"created_at":"2025-12-05T10:01:18.359Z","updated_at":"2026-04-07T21:31:20.457Z","avatar_url":"https://github.com/itsmetrina.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Smart UI Copy Assistant\n\nA polished **Next.js + AI** full‑stack learning project that generates UX microcopy (buttons, tooltips, banners, error messages) using OpenAI models. Includes advanced features like **Improve Copy**, **Translate Copy**, and a fully custom **dark‑mode professional UI**.\n\nThis project is to showcase:\n\n* Practical AI integration experience\n* Full‑stack skills using Next.js App Router\n* Building a portfolio‑ready AI product\n\n---\n\n# ✨ Features\n\n### ✔ AI‑powered UX Copy Generation\n\nEnter component type, tone, and context → AI generates 3 clean UX copy variations.\n\n### ✔ Improve Copy\n\nClick **Improve ✨** on any generated text to get a refined, higher‑quality version.\n\n### ✔ Translate Copy\n\nTranslate the generated copy into:\n\n* English\n* Hindi\n* Bengali\n\n### ✔ Fully Dark Mode UI\n\nCustom black theme powered by Tailwind + CSS variables.\n\n### ✔ Smooth UX\n\n* Animated fade‑in transitions\n* Non‑blocking result cards\n* Auto‑scroll to results\n* Card hover effects\n* Polished interactions\n\n---\n\n# 🛠️ Tech Stack\n\n* **Next.js 16** (App Router)\n* **React 19**\n* **TailwindCSS** (custom dark mode)\n* **OpenAI API** (`gpt-4o-mini`)\n* **TypeScript**\n\n---\n\n# 📦 Installation\n\n### 1. Clone the repository\n\n```bash\ngit clone https://github.com/itsmetrina/smart-ui-copy-assistant.git\ncd smart-ui-copy-assistant\n```\n\n### 2. Install dependencies\n\n```bash\nnpm install\n```\n\n### 3. Configure environment variables\n\nCreate a file named:\n\n```\n.env.local\n```\n\nAdd:\n\n```env\nOPENAI_API_KEY=your_key_here\n```\n\n### 4. Run the dev server\n\n```bash\nnpm run dev\n```\n\nOpen in browser:\n👉 [http://localhost:3000](http://localhost:3000)\n\n---\n\n# 🚀 Deploying to Vercel\n\nDeploying this project on Vercel is extremely simple.\n\n### Step 1 — Install Vercel CLI\n\n```bash\nnpm i -g vercel\n```\n\n### Step 2 — Login\n\n```bash\nvercel login\n```\n\n### Step 3 — Deploy\n\nInside the project directory:\n\n```bash\nvercel\n```\n\nOr use Vercel Dashboard:\n\n1. Go to [https://vercel.com/new](https://vercel.com/new)\n2. Import your GitHub repo\n3. Add environment variable:\n\n   * `OPENAI_API_KEY`\n4. Deploy\n\n### Vercel automatically:\n\n* Detects Next.js\n* Builds serverless API routes\n* Hosts frontend + backend together\n* Optimizes Tailwind\n\n---\n\n# 🗂️ Folder Structure\n\n```\napp/\n  ├── api/\n  │   ├── _lib/rateLimiter.ts\n  │   ├── generate/route.ts\n  │   ├── improve/route.ts\n  │   └── translate/route.ts\n  ├── components/\n  │   ├── CopyForm.tsx\n  │   ├── CopyPreview.tsx\n  │   ├── ImproveResult.tsx\n  │   └── TranslateResult.tsx\n  ├── hooks/\n  │   ├── useAI.ts\n  │   ├── useCooldown.ts\n  │   ├── useDebounce.ts\n  │   ├── useMobileHistorySheet.ts\n  │   ├── useScroolToResult.ts\n  ├── store/\n  │   ├── useHistory.ts\n  ├── layout.tsx\n  ├── page.tsx\n  └── globals.css\npublic/\n.env.local\n```\n\n---\n\n# 🧠 How It Works\n\n### **Frontend (Client Components)**\n\n* Form triggers `/api/generate`\n* CopyPreview renders suggestions\n* Improve + Translate trigger respective APIs\n* Smooth auto‑scroll brings results into view\n* Mobile bottom sheet shows full history\n\n### **Backend (Next.js Route Handlers)**\n\n* `/api/generate` → returns structured variations\n* `/api/improve` → returns refined copy\n* `/api/translate` → returns `en`, `hi`, `bn` JSON object\n\nAll routes run securely as server functions.\n\n---\n\n# 📘 Example Prompt\n\n```\nComponent: button\nTone: friendly\nContext: Checkout submit button\n```\n\nAI returns:\n\n```\n[\"Place Your Order\",\"Finish Checkout\",\"Complete Your Purchase\"]\n```\n\n---\n\u003c!-- \n# 🎨 UI Screenshots\n\n*(Optional — Add images once deployed)*\n\n--- --\u003e\n\n# 🤝 Contributing\n\nFeel free to open issues or PRs for improvements, new features, or suggestions.\n\n---\n\n# 🧩 Future Enhancements (Ideas)\n\n* Save copy to localStorage\n* Copy-to-clipboard button\n* History panel\n* Framer Motion animation upgrades\n\n---\n\n# 📄 License\n\nMIT License — free to use, modify, and share.\n\n---\n\n# 🚀 Final Note\n\nThis project is a clean, my portfolio‑ready demonstration of:\n\n* Next.js full‑stack skills\n* AI integration\n* UI/UX execution\n* Component architecture\n* Modern frontend engineering","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsmetrina%2Fsmart-ux-assistant","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitsmetrina%2Fsmart-ux-assistant","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsmetrina%2Fsmart-ux-assistant/lists"}