{"id":15132976,"url":"https://github.com/kunal-jaiswal972/livetrackjs","last_synced_at":"2026-02-13T17:03:07.570Z","repository":{"id":254744763,"uuid":"846528258","full_name":"Kunal-jaiswal972/LiveTrackJS","owner":"Kunal-jaiswal972","description":"https://www.npmjs.com/package/livetrack-react","archived":false,"fork":false,"pushed_at":"2024-12-13T14:57:06.000Z","size":963,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-30T17:38:20.454Z","etag":null,"topics":["expressjs","mongodb","mongoose","nodejs","npm","reactjs","redis","shadcn-ui","socket-io","tailwindcss","vite","websockets"],"latest_commit_sha":null,"homepage":"https://live-track-js.vercel.app","language":"JavaScript","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/Kunal-jaiswal972.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}},"created_at":"2024-08-23T12:01:14.000Z","updated_at":"2024-12-28T14:38:08.000Z","dependencies_parsed_at":"2024-08-25T20:25:41.096Z","dependency_job_id":"a9b80fd4-a576-45bb-82e5-d3cd44eb6ed3","html_url":"https://github.com/Kunal-jaiswal972/LiveTrackJS","commit_stats":{"total_commits":37,"total_committers":3,"mean_commits":"12.333333333333334","dds":0.05405405405405406,"last_synced_commit":"a87126c4289984afbfcc3c87e9f797bad531cc32"},"previous_names":["kunal-jaiswal972/livetrackjs"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kunal-jaiswal972%2FLiveTrackJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kunal-jaiswal972%2FLiveTrackJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kunal-jaiswal972%2FLiveTrackJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kunal-jaiswal972%2FLiveTrackJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kunal-jaiswal972","download_url":"https://codeload.github.com/Kunal-jaiswal972/LiveTrackJS/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237807437,"owners_count":19369595,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["expressjs","mongodb","mongoose","nodejs","npm","reactjs","redis","shadcn-ui","socket-io","tailwindcss","vite","websockets"],"created_at":"2024-09-26T04:42:04.384Z","updated_at":"2025-10-23T09:31:11.117Z","avatar_url":"https://github.com/Kunal-jaiswal972.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# LiveTrack\n\n## Prerequisites\n\n- **React**: Ensure you have a React application setup.\n- **Tailwind CSS**: Install and configure Tailwind CSS in your project.\n\n## Getting Started\n\n### Create a React App using Vite\n\nFollow these steps to set up your React application:\n\n1. Create a new React app with Vite:\n\n   ```bash\n   npm create vite@latest my-app --template react\n   cd my-app\n   ```\n\n2. Install Tailwind CSS:\n\n   ```bash\n   npm install -D tailwindcss postcss autoprefixer\n   npx tailwindcss init\n   ```\n\n   Configure Tailwind in your project by updating the `tailwind.config.js` and adding the Tailwind directives to your CSS file.\n\n3. Install [LiveTrack NPM Package](https://www.npmjs.com/package/livetrack-react):\n\n   ```bash\n   npm i livetrack-react\n   ```\n\n## Usage\n\n### Wrap Your App with `LiveTrackProvider`\n\nTo integrate LiveTrack into your React app, wrap your application with the `LiveTrackProvider` and include the `LiveUsersWidget` component:\n\n```jsx\nimport { LiveTrackProvider } from \"livetrack-react\";\nimport { LiveUsersWidget } from \"./components/LiveUsersWidget\";\n\nfunction App() {\n  return (\n    \u003cLiveTrackProvider apiKey=\"your-api-key\"\u003e\n      \u003cLiveUsersWidget message=\"Viewing this page\" /\u003e\n    \u003c/LiveTrackProvider\u003e\n  );\n}\n\nexport default App;\n```\n\nReplace `\"your-api-key\"` with the API key you will generate in the dashboard.\n\n### Create a Custom Widget Using the Hook\n\nYou can use the `useLiveUsers` hook to create a custom widget. Here's an example:\n\nInstall Lucide React:\n\n```bash\nnpm install lucide-react\n```\n\n```jsx\nimport { useLiveUsers } from \"livetrack-react\";\nimport { BadgeCheck, LoaderCircle } from \"lucide-react\";\n\nexport const LiveUsersWidget = ({ message }) =\u003e {\n  const { liveUsers, error, isLoading } = useLiveUsers();\n\n  return (\n    \u003cdiv className=\"fixed bottom-4 left-4 inline-flex items-center p-4 px-5 bg-white text-sm font-medium font-poppins border rounded-full shadow-lg h-20 max-w-xs space-x-2 z-[9999]\"\u003e\n      \u003cdiv className=\"bg-pink-100 rounded-full w-14 h-14 flex items-center justify-center\"\u003e\n        \u003cdiv className=\"bg-pink-500 text-white rounded-full w-12 h-12 flex items-center justify-center font-bold text-lg animate-pulse\"\u003e\n          {isLoading ? \u003cLoaderCircle /\u003e : error ? \"??\" : liveUsers}\n        \u003c/div\u003e\n      \u003c/div\u003e\n\n      \u003cdiv className=\"flex flex-col items-start justify-center\"\u003e\n        {!isLoading \u0026\u0026 !error \u0026\u0026 (\n          \u003c\u003e\n            \u003cdiv className=\"text-lg font-semibold text-black\"\u003e\n              {`${liveUsers} people`}\n            \u003c/div\u003e\n            \u003cdiv className=\"text-gray-500 text-xs\"\u003e{message}\u003c/div\u003e\n            \u003cdiv className=\"flex items-center justify-center gap-1 text-blue-500 text-xs\"\u003e\n              \u003cspan\u003e\n                Verified by \u003cb className=\"font-mono\"\u003eLive\u003c/b\u003e\n              \u003c/span\u003e\n              \u003cBadgeCheck className=\"h-4 w-4 fill-blue-500 text-white\" /\u003e\n            \u003c/div\u003e\n          \u003c/\u003e\n        )}\n\n        {!isLoading \u0026\u0026 error \u0026\u0026 (\n          \u003cdiv className=\"font-semibold text-red-500 text-xs\"\u003e{error}\u003c/div\u003e\n        )}\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n## API Key\n\nYou can generate your API key from the [LiveTrack Dashboard](https://live-track-js.vercel.app). Visit the provided link to create an account and generate your key. Replace `\"your-api-key\"` in the examples above with the key from your dashboard.\n\n## After Successful Setup\n\nNow, when users visit your website, they will be able to see live user activity displayed via the `LiveUsersWidget` component.\n\n![Live Track Widget](https://imgur.com/Nceyps1.png)\n\n## Tech Stack\n\n- **Node.js**\n- **Express**\n- **React**\n- **Redis**\n- **MongoDB**\n- **Socket.io**\n- **ShadCN UI**\n- **Tailwind CSS**\n\n## Features\n\n1. **Real-time User Tracking**: Instantly see live user activity.\n2. **Responsive Design**: Optimized for all screen sizes.\n3. **Simple Integration**: Add live user tracking with minimal setup.\n4. **API Key Management**: Dashboard for managing API keys and usage.\n5. **Analytics Integration**: Integrates with analytics tools.\n6. **Scalable Architecture**: Uses WebSockets and Redis for performance.\n7. **Lightweight Package**: Minimal impact on app performance.\n8. **Plug-and-Play**: Easy to set up and use.\n9. **Tailwind Support**: Compatible with Tailwind CSS for styling.\n\n## GitHub\n\nVisit the [LiveTrack GitHub Repository](https://github.com/Kunal-jaiswal972/LiveTrackJS) for more details, bug reports, and contributions.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkunal-jaiswal972%2Flivetrackjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkunal-jaiswal972%2Flivetrackjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkunal-jaiswal972%2Flivetrackjs/lists"}