# Live Tracker Map [WIP]
Build with supabase auth, realtime and leafletjs. [[Demo App]](https://realtime-map-v2.vercel.app/)

<p align="center">
<kbd>
<img src="https://media.giphy.com/media/iDU80ngpsSddc0ObGI/giphy.gif" alt="Demo"/>
</kbd>
</p>

## How to use
#### Clone this folder
```bash
git clone https://github.com/supabase/supabase
cd supabase/examples/live-tracker-map
```

#### Install dependencies
```bash
npm install 
```

#### Start the app
```bash
# Open a terminal and run:
npm run dev
```
Visit http://localhost:3000 and start testing!

## Test with your own Supabase Project
#### Database schema
Go to [app.supabase.io](https://app.supabase.io/), create a new organisation and project if you haven't had one.  
Run this sql query to create required tables.
```sql
-- USERS
CREATE TYPE public.user_role AS ENUM ('DRIVER', 'MANAGER');
CREATE TABLE public.users (
  id uuid NOT NULL PRIMARY KEY, -- UUID from auth.users
  username text,
  role user_role DEFAULT 'DRIVER'::public.user_role
);
COMMENT ON table public.users IS 'Profile data for each user.';
COMMENT ON column public.users.id IS 'References the internal Supabase Auth user.';
ALTER TABLE public.users REPLICA IDENTITY FULL; -- Send "previous data" on change 
ALTER TABLE public.users ENABLE ROW LEVEL SECURITY;
CREATE POLICY "Allow logged-in read access" on public.users FOR SELECT USING ( auth.role() = 'authenticated' );
CREATE POLICY "Allow individual insert access" on public.users FOR INSERT WITH CHECK ( auth.uid() = id );
CREATE POLICY "Allow individual update access" on public.users FOR UPDATE USING ( auth.uid() = id );

-- LOCATIONS
CREATE TABLE public.locations (
  id bigint GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
  latitude numeric NOT NULL,
  longitude numeric NOT NULL,
  user_id uuid REFERENCES public.users NOT NULL
);
ALTER TABLE public.locations REPLICA IDENTITY FULL; -- Send "previous data" on change
ALTER TABLE public.locations ENABLE ROW LEVEL SECURITY;
COMMENT ON table public.locations IS 'Individual locations sent by each user.';
CREATE POLICY "Allow logged-in read access" on public.locations USING ( auth.role() = 'authenticated' );
CREATE POLICY "Allow individual insert access" on public.locations FOR INSERT WITH CHECK ( auth.uid() = user_id );
```

#### Setup env vars
Next, copy the `.env.local.example` file in this directory to `.env.local` (which will be ignored by Git):

```bash
cp .env.local.example .env.local
```

Then set each variable on `.env.local`:

- `NEXT_PUBLIC_SUPABASE_ENDPOINT` should be the **API URL**
- `NEXT_PUBLIC_SUPABASE_APIKEY` should be the **anon** key

You can get these values from your project dashboard at [app.supabase.io](https://app.supabase.io/).

The **anon** key is your client-side API key. It allows "anonymous access" to your database, until the user has logged in. Once they have logged in, the keys will switch to the user's own login token. This enables row level security for your data.

> **_NOTE_**: The `service_role` key has full access to your data, bypassing any security policies. These keys have to be kept secret and are meant to be used in server environments and never on a client or browser.