ArtScape 🎨

Location-Based AR Art Gallery

Experience art in augmented reality, anchored to real-world locations. Admins can place virtual art installations at specific GPS coordinates, and users can discover and view them through their phone cameras.

Features

• 📍 Location-Based Art - Virtual art anchored to real GPS coordinates
• 📱 AR Camera View - View art through your phone camera in augmented reality
• 🎨 Admin Panel - Place and manage art installations
• 🔐 User Authentication - Secure login/signup system
• 🌍 Geospatial Queries - Find art installations near you
• 📊 Dashboard - Track art statistics and nearby installations

Tech Stack

Frontend

• HTML5, CSS3, JavaScript
• Three.js (3D rendering)
• Geolocation API
• Device Orientation API

Backend

• Node.js
• Express.js
• MongoDB (with geospatial indexing)
• JWT Authentication
• Multer (file uploads)

Installation

Prerequisites

• Node.js (v14 or higher)
• MongoDB (local or MongoDB Atlas)

Setup

1. Clone or navigate to the project directory:

   cd ArtScape

2. Install backend dependencies:

   cd backend
   npm install

3. Configure environment variables:

   cp .env.example .env

   Edit .env and update:

   • MONGODB_URI - Your MongoDB connection string
   • JWT_SECRET - A secure random string

4. Start MongoDB:

   • Local: mongod
   • Or use MongoDB Atlas (cloud)

5. Start the server:

   npm start

   Or for development with auto-reload:

   npm run dev

6. Access the application: Open your browser to http://localhost:3000

Usage

For Users

1. Sign Up/Login - Create an account or login
2. View Dashboard - See stats and nearby art
3. Start AR Experience - Grant camera and location permissions
4. Explore - Walk around to discover art installations

For Admins

1. Access Admin Panel - Available on dashboard for admin users
2. Capture Location - Go to desired location and capture GPS coordinates
3. Upload Art - Add title, artist, description, and upload image/3D model
4. Place Art - Submit to anchor art to that location
5. Manage - View and delete existing installations

Making a User Admin

Connect to MongoDB and update a user:

db.users.updateOne({ email: "user@example.com" }, { $set: { isAdmin: true } });

Project Structure

ArtScape/
├── index.html              # Landing/login page
├── dashboard.html          # User dashboard
├── ar-viewer.html         # AR camera view
├── admin.html             # Admin panel
├── styles.css             # Global styles
├── auth.js                # Authentication logic
├── dashboard.js           # Dashboard logic
├── admin.js               # Admin panel logic
├── ar-engine.js           # AR rendering engine
├── backend/
│   ├── server.js          # Express server
│   ├── package.json       # Dependencies
│   ├── models/
│   │   ├── User.js        # User model
│   │   └── Art.js         # Art installation model
│   ├── routes/
│   │   ├── auth.js        # Auth endpoints
│   │   └── art.js         # Art endpoints
│   └── middleware/
│       └── auth.js        # JWT verification
└── uploads/               # Uploaded art files (created automatically)

API Endpoints

Authentication

• POST /api/auth/signup - Register new user
• POST /api/auth/login - Login user

Art Installations

• POST /api/art/place - Place art (Admin only)
• GET /api/art/list - Get all art installations
• GET /api/art/nearby - Get nearby art
• DELETE /api/art/:id - Delete art (Admin only)

Browser Requirements

• Camera access permission
• Location access permission
• Modern browser with WebGL support
• HTTPS (required for camera/location in production)

Deployment Notes

Important for Production:

1. Use HTTPS (required for camera and location APIs)
2. Change JWT_SECRET to a strong random string
3. Set proper CORS origins
4. Use MongoDB Atlas for cloud database
5. Consider using cloud storage (AWS S3, Cloudinary) for art files
6. Add rate limiting for API endpoints

Recommended Hosting:

• Frontend + Backend: Heroku, Railway, Render
• Database: MongoDB Atlas
• Storage: Cloudinary, AWS S3

Future Enhancements

• 3D model support (GLTF/GLB loading)
• AR marker-based tracking
• Social features (likes, comments)
• Art collections/exhibitions
• Push notifications for nearby art
• AR navigation to art locations
• Multi-language support
• Offline caching

Known Limitations

• GPS accuracy varies (typically ±5-10 meters)
• Works best outdoors with clear sky
• Indoor positioning is less accurate
• Requires good internet connection
• Battery intensive (camera + GPS)

Troubleshooting

Camera not working:

• Grant camera permissions
• Use HTTPS (required for production)
• Check if camera is available/not in use

Location not updating:

• Grant location permissions
• Enable GPS on device
• Try outdoors for better signal

Art not appearing:

• Ensure you're within 100m of art
• Check if art exists in database
• Verify geolocation is working

License

MIT License - Feel free to use for your projects!

Support

For issues or questions, please open an issue on GitHub.

---

Built with ❤️ for artists and art lovers