📍 SpotSync

Modern Employee Location Tracking & Management System

SpotSync is a comprehensive solution designed for organizations to manage regional campuses and track employee locations in real-time. Built with a modern tech stack, it provides a seamless experience for administrators to define geographical boundaries (campuses) and monitor employee presence within them.

✨ Features

• 🏢 Organization Management: Create and manage multiple organizations under a single user account.
• 🗺️ Regional Campus Mapping: Define campus boundaries using interactive Google Maps polygons.
• 📍 Employee Tracking: Track employee locations with timestamped logs and status updates.
• 📊 Interactive Dashboard: A powerful dashboard to visualize data, manage entities, and view analytics.
• 🔐 Secure Authentication: Robust user authentication and management powered by Clerk.
• 🌗 Dark/Light Mode: Fully responsive UI with theme support.

🛠️ Tech Stack

Frontend

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: Radix UI & Shadcn UI
• Maps: @react-google-maps/api
• Icons: Lucide React
• Charts: Nivo & Recharts

Backend & Database

• Database: PostgreSQL (via Vercel Postgres)
• ORM: Drizzle ORM
• Authentication: Clerk

🚀 Getting Started

Follow these steps to set up the project locally.

Prerequisites

• Node.js (v18 or higher)
• npm or yarn or pnpm or bun
• A Google Maps API Key
• A Clerk account
• A PostgreSQL database (or Vercel Postgres)

Installation

1. Clone the repository

   git clone https://github.com/yourusername/spotsync.git
   cd spotsync

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install
   # or
   bun install

3. Environment Setup Create a .env file in the root directory and add the following variables:

   # Database
   POSTGRES_URL="postgres://user:password@host:port/dbname"
   
   # Authentication (Clerk)
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
   CLERK_SECRET_KEY=sk_test_...
   
   # Google Maps
   NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_google_maps_api_key

4. Database Setup Push the schema to your database:

   npm run push

   (Optional) Open Drizzle Studio to view/edit data:

   npm run studio

5. Run the Development Server

   npm run dev

   Open http://localhost:3000 with your browser to see the result.

📂 Project Structure

spotsync/
├── app/                  # Next.js App Router
│   ├── (auth)/           # Authentication routes
│   ├── (landing)/        # Landing page
│   ├── api/              # API routes
│   ├── dashboard/        # Dashboard pages
│   └── db/               # Database schema and connection
├── components/           # Reusable UI components
├── lib/                  # Utility functions
├── public/               # Static assets
└── drizzle.config.ts     # Drizzle ORM configuration

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.