Map Interface Application

A PoC full-stack web application for managing and visualizing geographic points of interest (POIs) in Bulgaria. Built with Vue.js, Express.js, MongoDB, and Leaflet, containerized with Docker for easy deployment.

Features

Map Visualization

• Interactive map powered by Leaflet and OpenStreetMap
• Filter POIs by municipality
• Click markers to view detailed information about each location
• Responsive design using Bootstrap 5

Administration Panel

• Add new points of interest with coordinates, notes, and municipality
• Edit existing POIs
• Delete POIs with confirmation
• Form validation and error handling

Sample Data

Pre-populated with notable Bulgarian locations including:

• Sofia (Capital)
• Plovdiv, Varna, Burgas (Major cities)
• Valchedram, Montana, Nesebar (Towns and villages)

Technology Stack

Frontend

• Vue.js 3 - Progressive JavaScript framework
• Vue Router - Client-side routing
• Bootstrap 5 - CSS framework for responsive design
• Leaflet - Interactive map library
• Vite - Build tool and development server

Backend

• Node.js - JavaScript runtime
• Express.js - Web application framework
• MongoDB - NoSQL database
• Mongoose - MongoDB object modeling
• CORS - Cross-origin resource sharing

Infrastructure

• Docker - Containerization
• Docker Compose - Multi-container orchestration
• Nginx - Web server and reverse proxy

Development Environment

• Devbox - Reproducible development environments
• direnv - Environment variable management per project directory

Project Structure

├── client/                 # Vue.js frontend application
│   ├── src/
│   │   ├── views/         # Vue components for different pages
│   │   ├── components/    # Reusable Vue components
│   │   ├── router/        # Vue Router configuration
│   │   └── assets/        # Static assets and styles
│   └── package.json
├── server/                # Express.js backend API
│   ├── src/
│   │   └── main.js       # Main server file with API routes
│   └── package.json
├── docker/               # Docker configuration
│   ├── docker-compose.yml
│   ├── Dockerfile-frontend
│   ├── Dockerfile-backend
│   ├── init-mongo.js     # MongoDB initialization script
│   └── nginx.conf        # Nginx configuration
├── devbox.json          # Devbox configuration
├── devbox.lock          # Devbox lock file
├── .envrc               # direnv environment configuration
└── start_app.sh         # Application startup script

API Endpoints

The backend provides a RESTful API for managing places:

• GET /api/places - Retrieve all places
• GET /api/places/:id - Retrieve a specific place
• POST /api/places - Create a new place
• PATCH /api/places/:id - Update an existing place
• DELETE /api/places/:id - Delete a place

Requirements

For Docker Deployment

• Docker (version 20.0 or higher)
• Docker Compose (version 2.0 or higher)
• Bash (for running the startup script)

For Development Environment

• Devbox - Install devbox
• direnv - Install direnv (optional but recommended)

Installation & Usage

Development Setup with Devbox

This project uses Devbox to provide a consistent development environment with all necessary dependencies.

1. Clone the repository

   git clone <repository-url>
   cd mapapp

2. Start the devbox shell

   devbox shell

   This will automatically install Node.js, npm, Docker, and other required tools defined in devbox.json.

3. Enable direnv (optional) If you have direnv installed, allow the environment configuration:

   direnv allow

   This will automatically load the development environment variables when you enter the project directory.

Quick Start with Docker

1. Start the application

   chmod +x start_app.sh
   ./start_app.sh start

2. Access the application

   • Open your browser and navigate to http://localhost:8080
   • Use the navigation menu to switch between Home, Map, and Administration views

Application Commands

# Start the application
./start_app.sh start

# Stop the application
./start_app.sh stop

# Clean up (stop containers, remove images and volumes)
./start_app.sh clean

Environment Configuration

The application uses environment variables for configuration:

• MONGODB_USERNAME - MongoDB username (default: testuser)
• MONGODB_PASSWORD - MongoDB password (default: testpassword)
• API_PORT - Backend server port (default: 3001)

Environment variables can be configured in:

• .envrc file (loaded by direnv)
• .env file in the docker/ directory
• System environment variables

Development

Local Development Setup

With Devbox (Recommended):

# Enter devbox shell (installs all dependencies)
devbox shell

# Backend development
cd server
npm install
npm run dev  # Starts with nodemon for auto-reload

# Frontend development (new terminal)
cd client
npm install
npm run dev  # Starts Vite development server

Without Devbox: Ensure you have Node.js 22+ and npm installed, then:

1. Backend Development

   cd server
   npm install
   npm run dev  # Starts with nodemon for auto-reload

2. Frontend Development

   cd client
   npm install
   npm run dev  # Starts Vite development server

Code Quality

• ESLint - JavaScript/Vue.js linting
• Prettier - Code formatting
• EditorConfig - Consistent coding styles

# Lint and format frontend code
cd client
npm run lint
npm run format

Architecture

Data Flow

1. Vue.js frontend makes API calls to Express.js backend
2. Backend validates requests and interacts with MongoDB
3. Nginx serves the frontend and proxies API requests to backend
4. All components run in Docker containers for isolation

Authentication

Currently implements a mock authentication system. The admin routes are protected but authentication always returns true. This is intended for demonstration purposes only.

Future Enhancements

• Implement proper user authentication and authorization
• Add user management functionality
• Implement data import/export features
• Add search functionality for places
• Implement pagination for large datasets
• Add unit and integration tests
• Implement logging and monitoring

License

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

Contributing

This is a proof-of-concept project created for demonstration purposes. Feel free to fork and modify according to your needs.