Vector Space — React + Firebase Rebuild

A fresh Vite + React build of Vector Space, backed by Firebase instead of Django. This is the first slice: auth, dashboard shell, role-aware sidebar, profile + settings. The remaining domains (marketplace, games, jobs, mentorship, social, competitions, etc.) are scaffolded as routes with stubs and fully specified in FIRESTORE_SCHEMA.md.

What's working

• Email / password signup + login + password reset (Firebase Auth)
• On signup: matching users/{uid} profile, users/{uid}/private/settings, and a 7-day onboarding checklist created in Firestore
• Protected /dashboard/* routes that redirect to /login when signed out
• Role-aware sidebar with Core / Professional Tools / Collaboration / Personal groups (matches the original Django sidebar)
• Profile editor: username, bio, headline, location, links, primary role, secondary roles
• Settings editor: privacy, message permissions, email + in-app notifications, theme
• Full public landing system with the Django app's cinematic look:
  • Animated background (aurora, drifting orbs, geo shapes, hex dots, scanline, twinkling stars, scroll-progress bar)
  • Home page with hero + orbital visual, stats band, features grid, "How it works" steps, "Who it's for" role cards, CTA band
  • About, Docs, API Reference, Tutorials, Blog
  • Careers, Contact (with form), Support (with FAQ), Privacy, Terms
  • Reveal-on-scroll animation that respects prefers-reduced-motion
  • Full 4-column footer + responsive mobile menu
• Marketplace browse + asset detail (public, at /marketplace):
  • URL-driven filters (type, free/paid, sort, search) — shareable & back-button-friendly
  • Skeleton loading, empty state, pagination ("Load more")
  • One-click Seed demo assets button when signed in and the catalog is empty
  • Asset detail page with related assets, view-count increment, sticky buy panel
  • Dashboard /dashboard/marketplace shows recent listings + role-aware CTAs

Project layout

vector_space_react/
├── index.html
├── package.json
├── vite.config.js
├── .env.example                  # copy to .env.local and fill in
├── FIRESTORE_SCHEMA.md           # the data model + migration plan
└── src/
    ├── main.jsx                  # entry, wires <BrowserRouter> + <AuthProvider>
    ├── App.jsx                   # route table
    ├── lib/
    │   ├── firebase.js           # Firebase init (Auth/Firestore/Storage/RTDB)
    │   ├── userService.js        # User CRUD + role helpers (mirrors UserProfile)
    │   └── authErrors.js         # Friendly error messages
    ├── contexts/
    │   └── AuthContext.jsx       # useAuth() — Firebase user + Firestore profile
    ├── components/
    │   ├── ProtectedRoute.jsx
    │   ├── Sidebar.jsx           # role-aware nav groups
    │   └── TopBar.jsx
    ├── layouts/
    │   ├── PublicLayout.jsx      # marketing header/footer
    │   └── DashboardLayout.jsx   # sidebar + topbar shell
    ├── pages/
    │   ├── Home.jsx
    │   ├── NotFound.jsx
    │   ├── auth/                 # Signup, Login, ForgotPassword
    │   └── dashboard/            # Overview, Profile, Settings + stubs
    └── styles/
        ├── theme.css             # design tokens (mirrors theme.css in Django app)
        ├── global.css            # resets, buttons, fields
        ├── public.css            # public layout
        ├── dashboard.css         # sidebar/topbar/content
        └── auth.css              # auth pages

Running it locally

1. Install dependencies

cd vector_space_react
npm install

2. Create your Firebase project (or reuse one)

In the Firebase Console:

1. Create a project (or use the existing Vector Space one).
2. In Project settings → General, scroll to Your apps and register a web app. Copy the config values.
3. Enable Authentication → Sign-in method → Email/Password.
4. Enable Firestore Database (start in test mode for development).
5. Enable Storage (start in test mode for development).
6. (Optional) Enable Realtime Database if you plan to use presence or typing indicators.

3. Wire your credentials

cp .env.example .env.local

Then edit .env.local and paste in the values from step 2. Vite only exposes env vars prefixed with VITE_.

4. Run the dev server

npm run dev

Open http://localhost:5173. Click Get started, create an account, and you should land on the dashboard.

5. Build for production

npm run build
npm run preview   # to test the build locally

npm run build outputs to dist/. Deploy that anywhere static (Firebase Hosting, Netlify, Vercel, Cloudflare Pages, etc.).

Security rules

Before going to production, replace Firestore's default rules with the sketches in FIRESTORE_SCHEMA.md → Section 6. The default test-mode rules let anyone read/write anything, which is fine for local development but not for real users.

What this scaffold deliberately doesn't do

The foundation + marketplace browse slice is in. The following are still stubs:

• Marketplace upload / edit / purchase / wishlist / collections / reviews (browse + detail are live; the management half isn't)
• Public games / jobs / mentorship / competitions pages
• Posting, commenting, following, messaging
• File uploads (Storage helpers aren't wired into any UI yet)
• Plan limits + billing / checkout
• Notifications fan-out
• AI Assistant
• Admin tooling and role upgrade flow

Firestore indexes: the first time you load the marketplace browse with a filter applied, Firestore will throw an error in the browser console with a one-click link to create the composite index it needs. Click it, wait ~30s, and reload. The browse page surfaces this error inline.

Each is scoped in FIRESTORE_SCHEMA.md so the next slice can be picked up without re-deriving the data model.

Mapping to the original Django app

Django	This rebuild
users_user + users_userprofile	users/{uid} doc
users_usersettings	users/{uid}/private/settings
BeginnerChecklist	users/{uid}/private/checklist
Role tier profiles	roleProfiles/{uid}_{ROLE} docs
templates/base.html header	PublicLayout.jsx + public.css
templates/dashboard_base.html	DashboardLayout.jsx + Sidebar + TopBar
static/css/theme.css tokens	src/styles/theme.css (verbatim CSS vars)
apps/users auth views	Firebase Auth + AuthContext.jsx
Django admin	Out of scope — build a moderator view later