🎭 Collab Cosplay — Find and connect with cosplayers on Instagram

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

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

Click here to see the website!

---

✨ What you can do

• 📢 Post cosplay Instagram post 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

---

✨ The Home page:

CC.main.page.video.2.mp4

Click user profiles to see all their post:

CC.profile.pages.mp4

Map feature to find users near you:

CC.map.page.mp4

Search tags to find your fandom:

CC.Tag.page.mp4

🧱 How the pieces fit together

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

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 using React Leaflet with Leaflet MarkerCluster
• Uses OpenStreetMap tiles for map data (no paid APIs required)
• Displays cosplay post visually based on their location (lat/lng)
• Fetches all post from the backend (/api/ads/all) and converts them into map markers

---

3. 🔐 Authentication (Auth0)

• Handles secure login/logout
• After authentication, users are redirected to /post-login
• The app then fetches the user’s profile from the backend

---

4. ⚙️ Backend API (Express on Node.js)

• Located in the backend/ directory
• Exposes REST endpoints under /api/...
• Typically deployed on services like Render (or any Node-compatible host)
• Responsible for:
  • Fetching and storing cosplay posts
  • Managing user profiles
  • Serving data to the frontend

---

5. 🗄️ Database (Neon Postgres)

• Hosted PostgreSQL database via Neon
• The backend connects using DATABASE_URL (with SSL enabled)
• Stores:
  • User profiles
  • Cosplay post
  • Related metadata

---

🚀 Local development (quick start)

1. Frontend

cd frontend
npm install
npm start

2. Backend

npm install
npm start

3. Environment variables

Copy & configure enviroment 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 (Node host like Render)

• Deploy the backend/ directory
• Set DATABASE_URL to your Neon Postgres connection string

---

🔐 Auth0

• Add your deployed frontend URL to:
  • Allowed Callback URLs
  • Allowed Logout URLs
  • Allowed Web Origins