Mapper

A map-first storage space marketplace built with SvelteKit, MongoDB, and Socket.IO. Mapper lets storage providers list their spaces and gives customers an intuitive, location-based experience to discover, visualize, and reserve storage — from browsing to booking.

Key capabilities:

• Interactive map interface with location-based search (Google Maps)
• Guided multi-step booking flow with real-time availability
• Storage layout designer (Fabric.js canvas drawing)
• Real-time notifications via WebSockets when spaces become available
• Google OAuth & email/password authentication with OTP verification
• Shareable storage listing links
• Admin and user roles with per-space management

Tech Stack

Layer	Technology
Frontend	SvelteKit 2, Svelte 5, TailwindCSS 4, Bootstrap 5
Backend	SvelteKit API routes + Express / Socket.IO
Database	MongoDB
Auth	JWT, Google OAuth 2.0, bcrypt
File Storage	Dropbox API
Maps	Google Maps JavaScript API
Real-time	Socket.IO
Containerization	Docker, Docker Compose

Prerequisites

• Node.js 20+
• MongoDB 7+ (local install or Docker)
• npm 10+
• A Google Cloud project with Maps & OAuth credentials (see Environment Variables)

Getting Started

1. Clone the repository

git clone <repository-url>
cd mapperpoc

2. Install dependencies

npm install

3. Configure environment variables

cp .env.example .env

Open .env and fill in the values. See the Environment Variables section below for details on obtaining each value.

4. Seed the database (optional)

Populate MongoDB with demo users and sample storage spaces:

node seed.js

This creates two demo accounts:

Role	Email	Password
Admin	admin@demo.com	Admin@123
User	user@demo.com	User@123

5. Run in development

Start both the Vite dev server and the Socket.IO server concurrently:

# Terminal 1 — SvelteKit dev server
npm run dev

# Terminal 2 — Socket.IO / Express server
npm run startSocket

The app will be available at http://localhost:5173. The Socket.IO server runs on port 3000 by default.

6. Build for production

npm run build
node server/index.js

The production server serves both the SvelteKit app and Socket.IO on a single port (default 3000).

Docker Setup

Quick start with Docker Compose

# Copy and configure environment variables
cp .env.example .env
# Edit .env with your values

# Build and start all services
docker compose up --build

# Seed the database (optional, run once)
docker compose exec app node seed.js

The app will be available at http://localhost:3000.

Docker Compose services

Service	Description	Port
app	SvelteKit + Socket.IO app	3000
mongo	MongoDB 7	27017

When using Docker Compose, set MONGO_URI in your .env to:

MONGO_URI=mongodb://mongo:27017/mapper

Build the Docker image standalone

docker build -t mapper .
docker run -p 3000:3000 --env-file .env mapper

Environment Variables

Create a .env file in the project root (see .env.example). All variables are required unless noted otherwise.

Database

Variable	Description	Example
MONGO_URI	MongoDB connection string	mongodb://localhost:27017/mapper

Authentication

Variable	Description	How to generate / obtain
JWT_SECRET	Secret key for signing JWT tokens	Run: node -e "console.log(require('crypto').randomBytes(32).toString('base64'))"
SHARING_SECRET	Secret for signing shared URLs	Run: node -e "console.log(require('crypto').randomBytes(24).toString('hex'))"

Google Maps

Variable	Description	How to obtain
PUBLIC_GOOGLE_MAPS_API_KEY	Google Maps JavaScript API key	1. Go to Google Cloud Console 2. Create or select a project 3. Enable Maps JavaScript API, Places API, and Geocoding API 4. Create an API key under Credentials

Google OAuth 2.0

Variable	Description	How to obtain
GOOGLE_CLIENT_ID	OAuth 2.0 Client ID	1. Go to Google Cloud Console > Credentials 2. Create an OAuth 2.0 Client ID (Web application) 3. Add http://localhost:5173 to Authorized JavaScript origins 4. Add the redirect URI to Authorized redirect URIs
GOOGLE_CLIENT_SECRET	OAuth 2.0 Client Secret	Shown when you create the OAuth Client ID above
GOOGLE_REDIRECT_URI	OAuth callback URL	http://localhost:5173/api/auth/google/callback (update for production)

Email (Gmail SMTP)

Variable	Description	How to obtain
EMAIL_USER	Gmail address for sending OTPs	Your Gmail address
EMAIL_PASS	Gmail App Password	1. Enable 2-Step Verification on your Google account 2. Go to App Passwords 3. Generate a password for "Mail"

File Storage

Variable	Description	How to obtain
DROPBOX_ACCESS_TOKEN	Dropbox API access token	1. Go to Dropbox App Console 2. Create an app 3. Generate an access token under OAuth 2

Server (optional)

Variable	Default	Description
PORT	3000	Port for the production server
CORS_ORIGIN	*	Allowed CORS origins

Project Structure

mapperpoc/
├── server/
│   └── index.js                # Express + Socket.IO server (production entry point)
├── src/
│   ├── hooks.server.js         # SvelteKit server hooks (JWT auth middleware)
│   ├── lib/
│   │   ├── components/         # Shared Svelte components
│   │   │   ├── Storage/        # Storage-specific components (Draw, FileUploader, etc.)
│   │   │   ├── Stepper.svelte  # Multi-step form wizard
│   │   │   └── ...
│   │   ├── db/                 # MongoDB connection utilities
│   │   ├── stores/             # Svelte stores (auth, map, UI state)
│   │   └── Utils/              # Helpers, geocoder, email/OTP services
│   └── routes/
│       ├── (pages)/            # User-facing pages (map view, storage listing)
│       ├── api/                # SvelteKit API endpoints
│       └── auth/               # Login & registration pages
├── static/                     # Static assets
├── seed.js                     # Database seeder (demo data)
├── Dockerfile
├── docker-compose.yml
├── .env.example
├── svelte.config.js
├── vite.config.js
└── package.json

Available Scripts

Command	Description
npm run dev	Start Vite dev server (hot reload)
npm run startSocket	Start the Socket.IO / Express server
npm run build	Build for production
npm run preview	Preview the production build
npm run prepack	Sync SvelteKit, package library, and lint
node seed.js	Seed the database with demo data

License

This project is proprietary software. All rights reserved.

---

Built by Aviasole | Crafted with care by the team at aviasole.com