Browse & Showcase
Gallery Grid — Empty State
9:41
Portfolio
Active 0
Pending
Done
Lost

Add Your First Project

Showcase your best work to attract homeowners and win more bids

Tips for Great Portfolio Shots
Use high-quality, well-lit photos
Show before and after comparisons
Include a variety of project types
Add descriptions with project details
Complete Portfolio Benefits
3x more homeowner inquiries
Higher bid acceptance rate
Portfolio verification badge
ContractorProjectsScreen + EmptyState
useContractorProjects() returns empty array, useMyBids() returns empty
Gallery Grid — Populated
9:41
Portfolio
12
Projects
47
Photos
5
Categories
Showcase your best projects to win more jobs
Add Project
6

Kitchen Remodel

General Renovation
4
B/A

Bathroom Overhaul

Plumbing
8

Deck Construction

Carpentry
3
B/A

Interior Painting

Painting
ContractorPortfolio grid with PressableCard items
useQuery(api.contractor.portfolio.list), useQuery(api.contractor.portfolio.getStats)
Project Detail
9:41
Project Details
General Renovation Completed
Kitchen Remodel — Full Gut
Complete kitchen renovation including new cabinets, countertops, backsplash, flooring, and lighting. Modernized layout for open-concept living.
4.5 (1 review)
Scope of Work
  • Demo existing kitchen to studs
  • Install new electrical and plumbing rough-ins
  • Custom shaker cabinets with soft-close
  • Quartz countertops with undermount sink
  • Subway tile backsplash
Materials Used
Quartz Shaker Cabinets Subway Tile LVP Flooring LED Recessed
Cost Range
$18K-$24K
Duration
6 Weeks
ProjectDetailScreen with StatusBadge, Card
useQuery(api.contractor.portfolio.get, { itemId })
Before & After Viewer
9:41
Before & After
Side by Side
Slider
BEFORE
AFTER
Before
After
Photo Pairs (3)
1
2
3
Pinch to zoom on any photo
Swipe left/right to compare pairs
Kitchen Remodel — Full Gut
Dated 1990s kitchen transformed into a modern open-concept space with quartz countertops and shaker cabinets.
BeforeAfterViewer with slider + side-by-side modes
useQuery(api.contractor.portfolio.get, { itemId }) — reads beforePhotos/afterPhotos arrays
Create & Edit
Add / Edit Project
9:41
Add Project
Plumbing
Add Before/After Photos
Enabled
BEFORE
BEFORE
AFTER
AFTER
Porcelain Tile Frameless Glass Add Material
BottomSheet — Add/Edit form via Input, Button
useMutation(api.contractor.portfolio.add), useMutation(api.features.storage.generateUploadUrl)
Photo Upload
9:41
Upload Photos
Camera
Take a photo
Gallery
Choose existing
Crop
Rotate
Adjust
Filter
High quality — 3024 x 4032px
Batch Upload (4 photos)
kitchen_before_01.jpg
Complete
100%
kitchen_before_02.jpg
Complete
100%
kitchen_after_01.jpg
65%
kitchen_after_02.jpg
Waiting...
Queued
Drag handles to reorder your photos
ImagePicker + CropTool + batch upload progress
useMutation(api.features.storage.generateUploadUrl), useMutation(api.features.storage.storeFile)
Public Preview & Analytics
Public Preview
9:41
MJ

Mike Johnson Contracting

Akron, OH
4.8 (23 reviews)
Verified Licensed Insured
Services
Plumbing General Renovation Carpentry Painting
Portfolio (12 projects)
6

Kitchen Remodel

Renovation
4
B/A

Bathroom Overhaul

Plumbing
Share Portfolio

Ready to Start Your Project?

Get a free estimate from Mike Johnson Contracting

PublicPortfolioView — homeowner-facing contractor profile
useQuery(api.public.contractor.getProfile), useQuery(api.public.contractor.getPortfolio)
Portfolio Analytics
9:41
Portfolio Insights
1,247
Views This Month
8.4%
Click-Through
34
Inquiries
Impressions Trend
Last 30 days
Jan 25 Feb 24
Most Viewed Projects
1
Kitchen Remodel

General Renovation

482
2
Bathroom Overhaul

Plumbing

318
3
Deck Construction

Carpentry

247
Inquiry Sources
Search Results
56%
Direct Link
28%
Referral
16%
Top Performing Categories
Renovation
482
Plumbing
318
Carpentry
247
Painting
142
PortfolioAnalytics with sparkline + category bars
useQuery(api.contractor.portfolio.getStats), useProjectAnalytics()
Create & Upload
9:41
Create & Upload
Details
Title
Sample entry
Description
Enter description...
Preview
Project Preview
Detailed view with all project information, photos, and metadata.
Media
Drag & drop or tap to upload
Preview & Analytics
9:41
Preview & Analytics
Preview
Project Preview
Detailed view with all project information, photos, and metadata.
Preview
Project Preview
Detailed view with all project information, photos, and metadata.
Performance
84%
Rate
+12%
Trend
3.2x
ROI
Portfolio Manager
https://app.3bids.io/contractor/gallery
3Bids
Gallery ⌘1
Projects ⌘2
Before/After ⌘3
Add New ⌘4
Preview ⌘5
Analytics ⌘6
MK
Mike Kowalski
Contractor
Settings ⌘,

Portfolio Manager

1,247
Total
+23%
Growth
89%
Rate
$42K
Revenue
Recent Activity
Item updated
2 minutes ago
Task completed
15 minutes ago
New notification
1 hour ago
Performance
Public Preview & Analytics
https://app.3bids.io/contractor/gallery
3Bids
Gallery ⌘1
Projects ⌘2
Before/After ⌘3
Add New ⌘4
Preview ⌘5
Analytics ⌘6
MK
Mike Kowalski
Contractor
Settings ⌘,

Public Preview & Analytics

1,247
Total
+23%
Growth
89%
Rate
$42K
Revenue
Recent Activity
Item updated
2 minutes ago
Task completed
15 minutes ago
New notification
1 hour ago
Performance

Data Architecture

Schema Tables

  • contractorPortfolio — title, description, category, photos[], beforePhotos[], afterPhotos[], projectCost, completionDate, jobId, isPublic, displayOrder
  • contractorProfile — avatar, bio, services[], serviceArea, rating
  • contractorUsers — auth identity, name, email, phone
  • jobs — linked via jobId for completed project references

Hooks & Queries

  • useQuery(api.contractor.portfolio.list) — paginated portfolio items by contractor
  • useQuery(api.contractor.portfolio.get) — single item detail
  • useQuery(api.contractor.portfolio.getStats) — totalItems, publicItems, categories, totalPhotos
  • useContractorProjects() — completed jobs for Projects tab
  • useContractorActiveJobs() — in-progress jobs
  • useMyBids() — pending/lost bids

Mutations

  • api.contractor.portfolio.add — create portfolio item with photos, before/after, category
  • api.contractor.portfolio.update — edit title, description, photos, category
  • api.contractor.portfolio.remove — delete item (rate-limited)
  • api.contractor.portfolio.reorder — update displayOrder
  • api.features.storage.generateUploadUrl — get Convex upload URL
  • api.features.storage.storeFile — store reference, return URL