Filmons — Film Gear & Creative Services Marketplace
Canada's marketplace for renting film gear, booking creative services, and building a filmmaker community.
Getting Started
Prerequisites
- Node.js ≥ 18
- pnpm ≥ 8 (
npm install -g pnpm)
- A Supabase project (free tier works fine)
- A Twilio account for SMS OTP
- A Google Cloud project with the Places & Geocoding APIs enabled
- An EmailJS account for transactional emails
1 — Clone & install
git clone https://github.com/your-username/filmons.git
cd filmons
pnpm install
2 — Configure frontend
The frontend reads two public values from utils/supabase/info.tsx.
Open that file and replace the placeholders with your Supabase project details:
export const projectId = "your-supabase-project-id"
export const publicAnonKey = "your-supabase-anon-key"
Update src/app/lib/emailjs-config.ts with your EmailJS credentials:
export const EMAILJS_CONFIG = {
serviceId: 'your_service_id',
publicKey: 'your_public_key',
templates: {
emailVerification: 'template_xxxxxx', // 6-digit OTP
verificationSubmission: 'template_xxxxxx', // welcome email
},
filmons: { email: '[email protected]', teamName: 'Your Team' },
};
3 — Configure backend secrets
All secrets are consumed by the Supabase Edge Function and must never be in frontend code.
Copy the example file and fill it in:
cp .env.example .env.local
Then push them to Supabase:
# Install Supabase CLI if you haven't already
npm install -g supabase
supabase login
supabase link --project-ref your-project-id
supabase secrets set SUPABASE_URL=https://your-project-id.supabase.co
supabase secrets set SUPABASE_ANON_KEY=your-anon-key
supabase secrets set SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
supabase secrets set SUPABASE_DB_URL=postgresql://postgres:[email protected]:5432/postgres
supabase secrets set TWILIO_ACCOUNT_SID=ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
supabase secrets set TWILIO_AUTH_TOKEN=your-auth-token
supabase secrets set TWILIO_PHONE_NUMBER=+1xxxxxxxxxx
supabase secrets set GOOGLE_API_KEY=your-google-api-key
Alternatively, set them through Supabase Dashboard → Project Settings → Edge Functions → Secrets.
4 — Deploy the Edge Function
supabase functions deploy server --project-ref your-project-id
5 — Run locally
pnpm dev
Open http://localhost:5173.
6 — Build for production
pnpm build # outputs to /dist
pnpm preview # preview the production build locally
Project Structure
filmons/
├── public/ # Static assets (favicon, og-image, etc.)
│
├── src/
│ ├── app/
│ │ ├── App.tsx # Root — RouterProvider + AuthProvider + Toaster
│ │ ├── routes.tsx # All React Router routes
│ │ │
│ │ ├── components/ # ── Reusable UI components ──────────────────
│ │ │ ├── ui/ # shadcn/ui primitives (Button, Card, Badge…)
│ │ │ │
│ │ │ │── Core / layout
│ │ │ ├── Header.tsx # Sticky top nav — logo, links, user avatar
│ │ │ ├── Footer.tsx # 4-column footer with platform / legal links
│ │ │ ├── PageWrapper.tsx # Consistent page container
│ │ │ ├── SectionHeader.tsx # Section title + optional "See all" CTA
│ │ │ │
│ │ │ │── Data display
│ │ │ ├── ListingCard.tsx # Gear/service card (image, price, tags)
│ │ │ ├── StatsCard.tsx # Metric/KPI card + StatsGrid layout helper
│ │ │ ├── EmptyState.tsx # Zero-data placeholder with optional CTA
│ │ │ ├── AccountTypeBadge.tsx # Creator / Creator+ / Service badge + UserAvatar
│ │ │ ├── FPBadge.tsx # FP balance chip for the header
│ │ │ ├── PostCard.tsx # Social feed post card
│ │ │ ├── AudioPlayer.tsx # In-post audio playback widget
│ │ │ │
│ │ │ │── Modals / overlays
│ │ │ ├── EditProfileModal.tsx # Full profile-editing drawer
│ │ │ ├── RentRequestModal.tsx # Rental-request sheet
│ │ │ ├── ShareListingModal.tsx# Share listing via DM / copy-link
│ │ │ ├── SharePostModal.tsx # Share post via DM / copy-link
│ │ │ ├── BoostModal.tsx # FP Boost picker modal
│ │ │ ├── GifPicker.tsx # Tenor GIF picker
│ │ │ ├── CameraCapture.tsx # Native camera capture for posts
│ │ │ │
│ │ │ └── Utility
│ │ │ ├── FilterPanel.tsx # Listing filter drawer
│ │ │ ├── FeedSearch.tsx # Debounced feed search
│ │ │ ├── PostComposer.tsx # Rich post creation
│ │ │ └── LocationPermissionDialog.tsx # Geolocation prompt
│ │ │
│ │ ├── pages/ # ── Route-level page components ─────────────
│ │ │ ├── Root.tsx # Layout shell — Header + <Outlet> + Footer
│ │ │ ├── Home.tsx # Landing page
│ │ │ ├── Marketplace.tsx # Full listing browser
│ │ │ ├── Feed.tsx # Social feed
│ │ │ ├── ListingDetail.tsx # Single listing view
│ │ │ ├── CreateListing.tsx # Multi-step listing creation
│ │ │ ├── EditListing.tsx # Edit an existing listing
│ │ │ ├── MyListings.tsx # User's own listings manager
│ │ │ ├── Profile.tsx # Auth'd user profile
│ │ │ ├── HostProfile.tsx # Public host profile
│ │ │ ├── HostDashboard.tsx # Creator analytics dashboard
│ │ │ ├── FPWallet.tsx # FP balance, packs, send, withdraw
│ │ │ ├── Inbox.tsx # DM inbox with rental/payment requests
│ │ │ ├── Checkout.tsx # Booking checkout flow
│ │ │ ├── Verification.tsx # Identity verification request
│ │ │ ├── AdminVerifications.tsx # Internal admin tool (pw-protected)
│ │ │ ├── Login.tsx / PhoneSignup.tsx / PhoneLogin.tsx
│ │ │ ├── RefundPolicy.tsx / PrivacyPolicy.tsx / TermsConditions.tsx
│ │ │ └── ...
│ │ │
│ │ ├── context/
│ │ │ └── AuthContext.tsx # Global auth state
│ │ │
│ │ ├── lib/
│ │ │ ├── api.ts # Server API client
│ │ │ ├── fpSystem.ts # FP economy helpers
│ │ │ ├── sms.ts # Twilio OTP helpers
│ │ │ ├── emailjs-config.ts # EmailJS constants
│ │ │ └── initializeData.ts # Demo-data seeder
│ │ │
│ │ ├── data/
│ │ │ └── mockListings.ts # Static placeholder listings
│ │ │
│ │ ├── types/
│ │ │ └── index.ts # TypeScript interfaces
│ │ │
│ │ └── templates/ # EmailJS HTML templates (preview only)
│ │
│ ├── lib/
│ │ └── supabase.ts # Supabase client singleton
│ │
│ └── styles/
│ ├── fonts.css # Neue Montreal @font-face
│ ├── index.css # Tailwind base / reset
│ ├── tailwind.css # @import "tailwindcss"
│ └── theme.css # CSS variables — colours, radius, spacing
│
├── supabase/
│ └── functions/
│ └── server/
│ ├── index.tsx # Hono edge function — all REST endpoints
│ ├── kv.tsx # KV helper using direct Postgres
│ └── kv_store.tsx # Built-in KV interface (do not edit)
│
├── utils/
│ └── supabase/
│ └── info.tsx # projectId + publicAnonKey (update after cloning)
│
├── .env.example # Template for required secrets
├── .gitignore
├── package.json
├── vite.config.ts
└── README.md
Pages
| Route | Component | Description |
|---|
/ | Home | Landing page — hero, categories, featured listings |
/marketplace | Marketplace | Listing browser with search, filters, geolocation sort |
/listing/:id | ListingDetail | Single listing — images, reviews, rent/book CTA |
/feed | Feed | Social feed — posts, likes, comments |
/inbox | Inbox | DM inbox with rental & payment request cards |
/profile | Profile | Auth'd user profile, settings, posts |
/host/:userId | HostProfile | Public host page — listings, follow, reviews |
/dashboard | HostDashboard | Creator/host analytics dashboard |
/wallet | FPWallet | FP balance, buy packs, send FP, boost, withdraw |
/checkout | Checkout | Booking checkout flow |
/create-listing | CreateListing | Multi-step listing creation |
/edit-listing/:id | EditListing | Edit existing listing |
/my-listings | MyListings | Manage own listings |
/verification | Verification | Identity verification request |
/admin-verifications | AdminVerifications | Internal admin tool (pw: see owner) |
Data Layer
All server calls go through src/app/lib/api.ts, which points to the Supabase Edge Function:
https://<projectId>.supabase.co/functions/v1/make-server-ec8fe879/<route>
| Export | Description |
|---|
authApi | signup / signin / phone OTP / getMe / updateUser |
listingsApi | CRUD + image/video upload, localStorage fallback |
reviewsApi | Get / create / delete reviews |
postsApi | Create / like / delete posts |
commentsApi | Add / delete post comments |
socialApi | follow / unfollow / isFollowing |
savedPostsApi | Save / unsave posts |
savedListingsApi | Save / unsave listings |
chatApi | Conversations / messages (dual-write localStorage + server) |
FP economy lives in lib/fpSystem.ts (fpApi):
| Method | Description |
|---|
credit / debit | Modify FP balance |
purchasePack | Buy an FP pack |
sendFP | Peer-to-peer FP transfer |
boostContent | Boost a listing or post |
requestWithdrawal | Cash-out request |
Environment & Secrets
| Secret | Location | Used by |
|---|
SUPABASE_URL | Supabase vault | Server |
SUPABASE_ANON_KEY | Supabase vault | Server + frontend |
SUPABASE_SERVICE_ROLE_KEY | Supabase vault | Server only — never expose |
SUPABASE_DB_URL | Supabase vault | kv.tsx (direct Postgres) |
TWILIO_ACCOUNT_SID | Supabase vault | Server SMS routes |
TWILIO_AUTH_TOKEN | Supabase vault | Server SMS routes |
TWILIO_PHONE_NUMBER | Supabase vault | Server SMS routes |
GOOGLE_API_KEY | Supabase vault | Address autocomplete proxy |
EmailJS keys are public-safe and live in src/app/lib/emailjs-config.ts.
Supabase projectId and publicAnonKey live in utils/supabase/info.tsx.
Tech Stack
| Layer | Technology |
|---|
| Frontend | React 18 + TypeScript + Vite 6 |
| Routing | React Router v7 (Data mode) |
| Styling | Tailwind CSS v4 + Neue Montreal font |
| UI Primitives | shadcn/ui (Radix UI) |
| Icons | Lucide React |
| Auth / SMS | Supabase Auth + Twilio |
| Backend | Deno / Hono edge function on Supabase |
| Database | Supabase Postgres (KV table) |
| Email | EmailJS (OTP, welcome, admin alerts) |
| Payments | FP (Filmons Points) — in-app economy |
| Animation | Motion (formerly Framer Motion) |
FP (Filmons Points) Economy
| Parameter | Value |
|---|
| Buy rate | $0.04 CAD / FP |
| Payout rate | $0.027 CAD / FP |
| Platform fee | 15% |
| Withdrawal fee | 5% |
| Minimum withdrawal | 186 FP (~$5 CAD) |
| Daily view earn cap | 20 FP |
Packs: Starter (100 FP / $3.99) · Creator (500 FP / $20.99) · Pro (750 FP / $30.99) · Power (1000 FP / $38.99)
Contributing
- Fork the repo
- Create a feature branch:
git checkout -b feat/my-feature
- Commit your changes:
git commit -m "feat: add my feature"
- Push to the branch:
git push origin feat/my-feature
- Open a Pull Request
© 2026 Filmons. Built for Canadian filmmakers.
