{"id":47759570,"url":"https://github.com/montasim/client-parser-demo","last_synced_at":"2026-04-03T05:10:58.288Z","repository":{"id":341184450,"uuid":"1169173064","full_name":"montasim/client-parser-demo","owner":"montasim","description":"Interactive demo website for the client-parser npm package","archived":false,"fork":false,"pushed_at":"2026-02-28T11:27:33.000Z","size":84,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-28T15:42:02.855Z","etag":null,"topics":["browser-detection","client-parser","demo","device-detection","os-detection","parser","user-agent","user-agent-parser"],"latest_commit_sha":null,"homepage":"https://client-parser-demo.netlify.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/montasim.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2026-02-28T09:32:21.000Z","updated_at":"2026-02-28T12:16:08.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/montasim/client-parser-demo","commit_stats":null,"previous_names":["montasim/client-parser-demo"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/montasim/client-parser-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/montasim%2Fclient-parser-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/montasim%2Fclient-parser-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/montasim%2Fclient-parser-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/montasim%2Fclient-parser-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/montasim","download_url":"https://codeload.github.com/montasim/client-parser-demo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/montasim%2Fclient-parser-demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31335349,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-03T04:42:29.251Z","status":"ssl_error","status_checked_at":"2026-04-03T04:42:12.667Z","response_time":107,"last_error":"SSL_read: 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":["browser-detection","client-parser","demo","device-detection","os-detection","parser","user-agent","user-agent-parser"],"created_at":"2026-04-03T05:10:57.640Z","updated_at":"2026-04-03T05:10:58.283Z","avatar_url":"https://github.com/montasim.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Client Parser Demo\n\n[![npm version](https://img.shields.io/npm/v/client-parser.svg)](https://www.npmjs.com/package/client-parser)\n[![npm downloads](https://img.shields.io/npm/dm/client-parser.svg)](https://www.npmjs.com/package/client-parser)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5-blue?logo=typescript)](https://www.typescriptlang.org/)\n\n\u003e Interactive demo website for the **client-parser** npm package - A lightweight, fast, and accurate user-agent parser for JavaScript and TypeScript.\n\n**[🌐 Live Demo](https://client-parser-demo.netlify.app/)** | **[📦 npm Package](https://www.npmjs.com/package/client-parser)** | **[💻 GitHub Repository](https://github.com/montasim/client-parser)**\n\n---\n\n## ✨ Features\n\n- 🚀 **Lightning Fast** - Optimized parsing algorithms for minimal performance impact\n- 🎯 **Highly Accurate** - Comprehensive regex patterns covering thousands of user-agent variations\n- 📘 **TypeScript Ready** - Full TypeScript support with comprehensive type definitions\n- 🌍 **Browser Detection** - Identify Chrome, Firefox, Safari, Edge, Opera, and more\n- 💻 **OS \u0026 Device Info** - Extract operating system, device type, brand, and model\n- ⚙️ **Engine Detection** - Detect WebKit, Blink, Gecko, and other rendering engines\n- 🔒 **Zero Dependencies** - Lightweight package with no external dependencies\n- 📱 **Mobile Detection** - Distinguish between mobile, tablet, desktop, and bot traffic\n\n---\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n- **Node.js** 18.x or higher\n- **pnpm** 9.x or higher (or npm/yarn)\n\n### Installation\n\n1. **Clone the repository**\n\n```bash\ngit clone https://github.com/montasim/client-parser-demo.git\ncd client-parser-demo\n```\n\n2. **Install dependencies**\n\n```bash\npnpm install\n```\n\n3. **Run the development server**\n\n```bash\npnpm dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) to see the demo website.\n\n---\n\n## 📦 Using the client-parser Package\n\n### Installation\n\n```bash\nnpm install client-parser\n# or\npnpm add client-parser\n# or\nyarn add client-parser\n```\n\n### Basic Usage\n\n```typescript\nimport { parseUserAgent } from 'client-parser';\n\n// In the browser\nconst userAgent = navigator.userAgent;\nconst result = parseUserAgent(userAgent);\n\nconsole.log(result.browser); // { name: 'Chrome', version: '120.0.0.0' }\nconsole.log(result.os); // { name: 'Windows', version: '10' }\nconsole.log(result.device); // { type: 'desktop' }\n```\n\n### Server-Side Usage (Node.js)\n\n```typescript\nimport { parseUserAgent } from 'client-parser';\nimport { IncomingMessage } from 'http';\n\nfunction getUserInfo(req: IncomingMessage) {\n  const userAgent = req.headers['user-agent'] || '';\n  const client = parseUserAgent(userAgent);\n\n  return {\n    browser: client.browser?.name,\n    os: client.os?.name,\n    isMobile: client.device?.type === 'mobile',\n  };\n}\n```\n\n### TypeScript Types\n\n```typescript\ninterface ParseResult {\n  browser?: {\n    name: string;\n    version: string;\n  };\n  os?: {\n    name: string;\n    version: string;\n  };\n  device?: {\n    type: 'mobile' | 'tablet' | 'desktop' | 'bot';\n    brand?: string;\n    model?: string;\n  };\n  engine?: {\n    name: string;\n    version: string;\n  };\n  cpu?: {\n    architecture: string;\n  };\n}\n```\n\n---\n\n## 🎨 Demo Website Features\n\nThis demo website showcases the client-parser package with:\n\n- **Interactive Demo** - Try parsing real user-agent strings in your browser\n- **Live Results** - See parsed browser, OS, device, and engine information instantly\n- **Sample User-Agents** - Pre-loaded examples from popular devices and browsers\n- **API Documentation** - Clear examples and type definitions\n- **Responsive Design** - Works beautifully on all screen sizes\n- **Dark Mode Support** - Easy on the eyes in any lighting condition\n\n---\n\n## 🏗️ Project Structure\n\n```\nclient-parser-demo/\n├── app/                    # Next.js App Router pages\n│   ├── layout.tsx         # Root layout with metadata\n│   ├── page.tsx           # Main demo page\n│   └── globals.css        # Global styles\n├── components/            # React components\n│   ├── navbar.tsx        # Navigation header\n│   ├── footer.tsx        # Footer with developer link\n│   ├── demo-section.tsx  # Interactive parser demo\n│   ├── feature-card.tsx  # Feature display cards\n│   ├── code-block.tsx    # Syntax highlighted code blocks\n│   └── ui/               # shadcn/ui components\n├── lib/                   # Utility functions\n│   ├── constants.ts      # App constants\n│   └── utils.ts          # Helper functions\n└── public/               # Static assets\n```\n\n---\n\n## 📜 Available Scripts\n\n| Command             | Description               |\n| ------------------- | ------------------------- |\n| `pnpm dev`          | Start development server  |\n| `pnpm build`        | Build for production      |\n| `pnpm start`        | Start production server   |\n| `pnpm lint`         | Run ESLint                |\n| `pnpm lint:fix`     | Fix ESLint issues         |\n| `pnpm format`       | Format code with Prettier |\n| `pnpm format:check` | Check code formatting     |\n| `pnpm typecheck`    | Run TypeScript type check |\n\n---\n\n## 🛠️ Tech Stack\n\n- **Framework**: [Next.js 16](https://nextjs.org/) with App Router\n- **Language**: [TypeScript 5](https://www.typescriptlang.org/)\n- **Styling**: [Tailwind CSS 4](https://tailwindcss.com/)\n- **UI Components**: [shadcn/ui](https://ui.shadcn.com/)\n- **Icons**: [Lucide React](https://lucide.dev/)\n- **Package Manager**: [pnpm](https://pnpm.io/)\n- **Deployment**: [Netlify](https://www.netlify.com/)\n\n---\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feat/amazing-feature`)\n3. Commit your changes (`git commit -m 'feat: add amazing feature'`)\n4. Push to the branch (`git push origin feat/amazing-feature`)\n5. Open a Pull Request\n\n---\n\n## 📝 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n---\n\n## 🙏 Acknowledgments\n\n- **[client-parser](https://github.com/montasim/client-parser)** - The amazing user-agent parser package\n- **[Next.js](https://nextjs.org/)** - The React framework\n- **[shadcn/ui](https://ui.shadcn.com/)** - Beautiful UI components\n- **[Tailwind CSS](https://tailwindcss.com/)** - Utility-first CSS framework\n- **[Lucide](https://lucide.dev/)** - Beautiful icons\n\n---\n\n## 👨‍💻 Developer\n\n**Montasim**\n\n- **GitHub**: [@montasim](https://github.com/montasim)\n- **npm**: [@montasim](https://www.npmjs.com/~montasim)\n\n---\n\nMade with ❤️ by [Montasim](https://github.com/montasim)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmontasim%2Fclient-parser-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmontasim%2Fclient-parser-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmontasim%2Fclient-parser-demo/lists"}