An interactive web application that displays simulated real-time user locations on a map. Users can search, filter, and "follow" a specific user, causing the map to automatically center on their movements.
Live Demo: https://user-tracking-app-rifki.vercel.app/
- Map Visualization: Renders all users as markers on an interactive map powered by Mapbox.
- Real-time Search: Instantly search for users by Name or ID via the search panel.
- "Follow" Mode: Click on a user in the list or on the map to focus and track their movements. The map will automatically pan to keep the followed user centered.
- Interactive Panel: A sidebar that lists all users and allows for easy interaction.
- Real-time Updates: User locations are simulated to move randomly, providing a live tracking experience.
- Responsive Design: Adapts gracefully to various screen sizes.
- Light & Dark Theme: Supports the user's system theme preference.
- Framework: Next.js (React Framework)
- Language: TypeScript
- State Management: Jotai
- Mapping: Mapbox GL JS & React Map GL
- Styling: Tailwind CSS
- Deployment: Vercel
Follow these steps to run the project on your local machine.
- Node.js (v18.x or newer)
- npm, yarn, or pnpm
git clone https://github.com/rifkiandriyanto/user-tracking-app.git
cd user-tracking-appChoose your preferred package manager:
npm install
# OR
yarn install
# OR
pnpm installYou will need an access token from Mapbox.
-
Create a free account at mapbox.com.
-
Go to your access tokens page and copy your default public token.
-
Create a new file in the project root named
.env. -
Copy the following content into the
.envfile and replaceYOUR_MAPBOX_ACCESS_TOKENwith your actual token.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN=YOUR_MAPBOX_ACCESS_TOKEN
npm run dev
# OR
yarn dev
# OR
pnpm devOpen http://localhost:3000 in your browser to see the result.
This project is licensed under the MIT License. See the LICENSE file for more details.
Crafted with ❤️ by Rifki Andriyanto