Collab Cosplay — Find and connect with cosplayers on Instagram

• Tech Stack: React, Express.js, Node.js, PostgreSQL (Neon), Auth0, React Leaflet, Leaflet MarkerCluster, OpenStreetMap, Vercel
• Live site: collab-cosplay.vercel.app
• GitHub: JamieDawson/Collab-Cosplay

A platform built for cosplayers to connect, collaborate, and create together.

Whether you are looking for a photoshoot partner, a group cosplay, or just want to meet others in your fandom, Collab Cosplay helps you find your people.

Open the live site

What you can do

• Post cosplay Instagram posts so others can discover and reach out to you
• Browse a real-time feed of cosplay opportunities (newest first)
• Log in securely with Auth0 and manage your profile
• Explore posts with tags, locations, and other filters
• Connect with other cosplayers in your community

Screen recordings for the home feed, profiles, map, and tags flows are included in the repository README.

How the pieces fit together

This project is made up of a few independent systems that work together:

1. Frontend (React on Vercel)

• Lives in the frontend/ directory
• Deployed as a single-page app on Vercel
• Handles routing, UI, and user interactions
• Fetches data from the backend API

2. Interactive map (React + Leaflet + OpenStreetMap)

• Built with React Leaflet and Leaflet MarkerCluster; uses OpenStreetMap tiles (no paid map APIs required)
• Displays cosplay posts by location (lat/lng); loads markers from /api/ads/all

3. Authentication (Auth0)

• Handles secure login and logout
• After login, users are redirected to /post-login; the app then loads the user profile from the backend

4. Backend API (Express on Node.js)

• Lives in the backend/ directory
• REST endpoints under /api/...
• Typically deployed on Render (or any Node host): stores and serves cosplay posts and user profiles

5. Database (Neon Postgres)

• Hosted PostgreSQL; the backend connects with DATABASE_URL (SSL enabled)
• Stores user profiles, cosplay posts, and related metadata

Local development (quick start)

Frontend

cd frontend
npm install
npm start

Backend

npm install
npm start

Copy and configure environment files: frontend/.env.example → frontend/.env, backend/.env.example → backend/.env.

Deployment notes

• Frontend (Vercel): deploy the frontend/ directory; set REACT_APP_API_URL to your backend URL
• Backend: deploy backend/; set DATABASE_URL to your Neon Postgres connection string
• Auth0: add your deployed frontend URL to allowed callback URLs, logout URLs, and web origins