Roamr is a platform built for urban exploration (urbex) enthusiasts, offering a trusted, community-driven map of verified locations worldwide. Users can discover, share, and document hidden places while accessing detailed site information, ratings, and safety insights.
Get a quick look at the project by visiting the Roamr website.
This repository contains the frontend code for Roamr, built using Next.js. The goal is to create a fast, scalable, and user-friendly experience for exploring urbex locations. The backend and other infrastructure are managed separately.
The project is currently in the early stages of development, and I'm working on it in my free time. If you have any ideas or suggestions, feel free to open an issue or submit a pull request.
- 🔑 User Authentication & Authorization – Secure accounts & personalized access. (In Progress)
- 🗺️ Interactive Map – Pan, zoom, and search for worldwide places. (In Progress)
- 📍 Add & Edit Locations – Create and update location markers with details. (In Progress)
- 🔍 Advanced Search – Find locations by name, category, or tags. (In Progress)
- ⭐ Community Ratings & Reviews – Share experiences and insights. (Planned)
- 👤 User Profiles & Achievements – Track contributions and progress. (Planned)
- 🖼️ Photo Galleries – Upload and browse images of locations. (Planned)
⚠️ Safety Insights & Warnings – Get hazard details for each location. (Planned)- ✅ Location Verification & Moderation – Ensure accuracy & reliability. (Planned)
- 📱 Mobile-Friendly Experience – Optimized design for seamless mobile use. (Planned)
This project is built using the following technologies:
- Next.js: React framework for building web applications.
- Supabase: Database and authentication.
- Shadcn UI: A collection of React components.
- Tailwind CSS: Utility-first CSS framework.
- MapLibre: Map rendering library.
- Photon: Geocoding and Reverse Geocoding API.
To run this project locally, you'll need the following tools:
- Node.js: JavaScript runtime.
- pnpm: Package manager. Or any other package manager you prefer.
- Supabase CLI: Database and authentication.
- Docker: Containerization tool.
Let's start by cloning the repository:
git clone https://github.com/cin4ed/roamr
cd roamrIf you are planning to support OAuth, you'll need to setup the OAuth providers in the supabase/config.toml file. You can refer to the Supabase documentation for more information on how to do this.
By default, the project is configured to use the Discord OAuth provider. If you want to disable it, you can set the enabled field to false in the supabase/config.toml file.
If you want to use Discord as the OAuth provider, you'll need to create a new application in the Discord Developer Portal.
Get the CLIENT_ID and CLIENT_SECRET from the application and add them to the .env.local file.
SUPABASE_AUTH_DISCORD_CLIENT_ID=your_client_id
SUPABASE_AUTH_DISCORD_CLIENT_SECRET=your_client_secretContributions are always welcome and appreciated! At this moment I don't have a specific guideline for contributing, but feel free to submit a pull request with your changes and I'll review it as soon as possible.
This project is licensed under the GNU General Public License v3.0. See the LICENSE file for more details.
- Installed Prisma with the
pnpm add prisma --save-devcommand. - Ran the
pnpm exec prisma initcommand. - Prisma schema was created at
prisma/shcmea.prisma. - A new line with
DATABASE_URL="xxxx"was added to the.envfile.
- Prototyping: Use
prisma db pushto synchorize your database schema with your Prisma schema file (schema.prisma) without generating migrations. - Production: Use
prisma migrateto generate migrations. prisma generatethis creates a type-safe client in node_modules.
Prisma gets environment variables from .env file, while Next.js get them from .env.local when executed with pnpm run dev, for prisma to get env vars from .env.local we're going to use a tool called
callback supabase discord https://sduopvydpiutfkwveivm.supabase.co/auth/v1/callback