https://github.com/kunal-jaiswal972/livetrackjs
https://www.npmjs.com/package/livetrack-react
https://github.com/kunal-jaiswal972/livetrackjs
expressjs mongodb mongoose nodejs npm reactjs redis shadcn-ui socket-io tailwindcss vite websockets
Last synced: about 1 month ago
JSON representation
https://www.npmjs.com/package/livetrack-react
- Host: GitHub
- URL: https://github.com/kunal-jaiswal972/livetrackjs
- Owner: Kunal-jaiswal972
- Created: 2024-08-23T12:01:14.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-13T14:57:06.000Z (12 months ago)
- Last Synced: 2025-01-30T17:38:20.454Z (10 months ago)
- Topics: expressjs, mongodb, mongoose, nodejs, npm, reactjs, redis, shadcn-ui, socket-io, tailwindcss, vite, websockets
- Language: JavaScript
- Homepage: https://live-track-js.vercel.app
- Size: 940 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# LiveTrack
## Prerequisites
- **React**: Ensure you have a React application setup.
- **Tailwind CSS**: Install and configure Tailwind CSS in your project.
## Getting Started
### Create a React App using Vite
Follow these steps to set up your React application:
1. Create a new React app with Vite:
```bash
npm create vite@latest my-app --template react
cd my-app
```
2. Install Tailwind CSS:
```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
```
Configure Tailwind in your project by updating the `tailwind.config.js` and adding the Tailwind directives to your CSS file.
3. Install [LiveTrack NPM Package](https://www.npmjs.com/package/livetrack-react):
```bash
npm i livetrack-react
```
## Usage
### Wrap Your App with `LiveTrackProvider`
To integrate LiveTrack into your React app, wrap your application with the `LiveTrackProvider` and include the `LiveUsersWidget` component:
```jsx
import { LiveTrackProvider } from "livetrack-react";
import { LiveUsersWidget } from "./components/LiveUsersWidget";
function App() {
return (
);
}
export default App;
```
Replace `"your-api-key"` with the API key you will generate in the dashboard.
### Create a Custom Widget Using the Hook
You can use the `useLiveUsers` hook to create a custom widget. Here's an example:
Install Lucide React:
```bash
npm install lucide-react
```
```jsx
import { useLiveUsers } from "livetrack-react";
import { BadgeCheck, LoaderCircle } from "lucide-react";
export const LiveUsersWidget = ({ message }) => {
const { liveUsers, error, isLoading } = useLiveUsers();
return (
{isLoading ? : error ? "??" : liveUsers}
{!isLoading && !error && (
<>
{`${liveUsers} people`}
{message}
Verified by Live
>
)}
{!isLoading && error && (
{error}
)}
);
};
```
## API Key
You 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.
## After Successful Setup
Now, when users visit your website, they will be able to see live user activity displayed via the `LiveUsersWidget` component.
## Tech Stack
- **Node.js**
- **Express**
- **React**
- **Redis**
- **MongoDB**
- **Socket.io**
- **ShadCN UI**
- **Tailwind CSS**
## Features
1. **Real-time User Tracking**: Instantly see live user activity.
2. **Responsive Design**: Optimized for all screen sizes.
3. **Simple Integration**: Add live user tracking with minimal setup.
4. **API Key Management**: Dashboard for managing API keys and usage.
5. **Analytics Integration**: Integrates with analytics tools.
6. **Scalable Architecture**: Uses WebSockets and Redis for performance.
7. **Lightweight Package**: Minimal impact on app performance.
8. **Plug-and-Play**: Easy to set up and use.
9. **Tailwind Support**: Compatible with Tailwind CSS for styling.
## GitHub
Visit the [LiveTrack GitHub Repository](https://github.com/Kunal-jaiswal972/LiveTrackJS) for more details, bug reports, and contributions.