P2Parking: Peer to peer Parking Space Rental App
Budget: $1,500 – $3,000 USD
App Build Description
1. Project Setup
Create FlutterFlow Project: Set up a new project in FlutterFlow named “P2Parking” for iOS and Android. Configure the project for a mobile-first layout (375px width, 667px height, iPhone 12/Android equivalent).
Integrate Backend Services:
Set up Firebase for authentication (email, Google, Apple ID logins) and Firestore for data storage (users, listings, bookings).
Initialize Mapbox, Stripe, and Google Places APIs with provided API keys (to be supplied).
Version Control: Use GitHub for version control. Create a repository named “p2parking-app” and push initial commits.
Dependencies: Add FlutterFlow packages for Firebase, Mapbox, Stripe, and Google Places. Ensure compatibility with Flutter SDK 3.x.
2. UI Implementation
Follow the Figma wireframe for layout, dimensions, and interactions. Use placeholder assets (e.g., logo, map pins) until final designs are ready. All pages are 375px wide, 667px tall, with 16px margins and 8px gaps unless specified. Buttons are 40px tall for accessibility.
Homepage
Logo: Place a placeholder rectangle (100px wide, 24px tall) labeled “P2Parking Logo” at top-left (16px from left/top edges).
Mapbox Map: Embed a Mapbox map (343px wide, 400px tall) centered (16px margin on left/right), 56px from top. Add 3 placeholder pins (10px diameter circles) for car, RV, truck, spaced evenly.
Search Bar: Add a text input (300px wide, 40px tall) centered (37.5px from left/right), 480px from top, with placeholder “Search parking near...”. Add a “Search” button (40px wide, 40px tall) to the right (8px gap). Tapping navigates to Search Page.
Filter Icon: Place a square (24px x 24px) labeled “Filter” at bottom-right (16px from right/bottom edges). Tapping opens a filter modal (not implemented yet).
Search Page
Back Arrow: Add a triangle (16px wide, 16px tall) labeled “Back” at top-left (16px from left/top edges). Tapping returns to Homepage.
Search Bar: Add a text input (343px wide, 40px tall) centered (16px margin on left/right), 48px from top, with placeholder “Enter location (Google Places)”. Integrate Google Places API for autocomplete.
Results List: Display 3 result cards (343px wide, 80px tall each, 16px margin on left/right):
Result 1 (96px from top): Title “Parking Spot 1” (16px from left), Price “$20/day” (16px below title), Distance “0.5 mi” (16px from right).
Result 2 (184px from top): Same layout, “Parking Spot 2”.
Result 3 (272px from top): Same layout, “Parking Spot 3”.
Tapping a result navigates to Listing Detail Page.
Map Thumbnail: Add a Mapbox map (343px wide, 200px tall) centered (16px margin on left/right), 467px from top, labeled “Mapbox Map”.
Listing Detail Page
Back Arrow: Add a triangle (16px wide, 16px tall) labeled “Back” at top-left (16px from left/top edges). Tapping returns to Search Page.
Spot Photo: Add a placeholder rectangle (343px wide, 267px tall) centered (16px margin on left/right), 48px from top, labeled “Spot Photo”.
Details: Stack text placeholders (16px from left edge):
Title “Parking Spot near UT Stadium” (323px from top).
Price “$20/day” (8px below title).
Rating: 4 star icons (16px wide each, 4px gaps) labeled “4 stars” (8px below price).
“Car, RV, Pickup Truck compatible” (8px below rating).
“10x20 ft” (8px below).
“Availability: Weekdays” (8px below).
Book Now Button: Add a button (343px wide, 40px tall) centered (16px margin on left/right), 611px from top, labeled “Book Now”. Tapping navigates to Booking Confirmation Page.
Booking Confirmation Page (May 10-12)
Back Arrow: Add a triangle (16px wide, 16px tall) labeled “Back” at top-left (16px from left/top edges). Tapping returns to Listing Detail Page.
Confirmation Message: Add text “Booking Confirmed!” (343px wide) centered, 200px from top.
Details (stacked, 16px from left edge):
Spot title “Parking Spot near UT Stadium” (8px below message).
Date “Aug 1, 2025” (8px below title).
Price “$20.88 total” (8px below date).
Host name “Host: John Doe” (8px below price).
Buttons:
Chat Button: Add a button (200px wide, 40px tall) labeled “Message Host” centered, 400px from top. Tapping opens chat (not implemented).
Report Issue Button: Add a button (120px wide, 40px tall) labeled “Report Issue” (16px from right edge), 400px from top. Tapping opens report form (not implemented).
View Map Button: Add a button (343px wide, 40px tall) centered (16px margin on left/right), 611px from top, labeled “View Map”. Tapping opens Mapbox map (not implemented).
Host Dashboard Page
Logo: Add a placeholder rectangle (100px wide, 24px tall) labeled “P2Parking Logo” at top-left (16px from left/top edges).
Your Listings:
Title “Your Listings” (343px wide), 56px from top, 16px from left.
List placeholder (343px wide, 60px tall), 80px from top, labeled “Spot 1 - $20/day”.
Upcoming Bookings:
Title “Upcoming Bookings” (343px wide), 156px from top, 16px from left.
List placeholder (343px wide, 60px tall), 180px from top, labeled “Driver X, Aug 1, $17.60 net”.
Earnings:
Title “Earnings” (343px wide), 256px from top, 16px from left.
Placeholder (343px wide, 60px tall), 280px from top, labeled “Total: $35.20”.
Add New Listing Button: Add a button (343px wide, 40px tall) centered (16px margin on left/right), 611px from top, labeled “Add New Listing”. Tapping opens form (not implemented).
Privacy Popup
Modal Window: Add a rectangle (300px wide, 400px tall) centered (37.5px margin on left/right, 133.5px from top/bottom).
Title: Text “Privacy Policy” (centered, 16px from top of modal).
Body: Text placeholder “We value your privacy…” (260px wide, 300px tall), centered in modal, 48px from top of modal.
Buttons:
Accept Button: Add a button (120px wide, 40px tall) labeled “Accept”, 360px from top of modal, 40px from left edge of modal. Tapping closes modal.
Decline Button: Add a button (120px wide, 40px tall) labeled “Decline”, 360px from top of modal, 40px from right edge of modal (8px gap from Accept). Tapping closes modal.
3. Backend Integration (May 16-20, 2025)
Firebase Setup:
Users: Create a “users” collection with fields (userID, email, role: “driver” or “host”, paymentInfo).
Listings: Create a “listings” collection with fields (listingID, hostID, title, price, dimensions, availability, vehicleTypes, location: {lat, lng}).
Bookings: Create a “bookings” collection with fields (bookingID, listingID, driverID, hostID, date, price, status).
Authentication: Implement email, Google, and Apple ID logins via Firebase Auth.
Stripe Integration:
Payment Flow: On “Book Now” button tap, charge driver $20.88 ($20 + $0.88 Stripe fee). Use Stripe Connect to instantly pay host $17.60 ($20 - 12% fee) and P2Parking $2.40.
Store payment status in Firestore under “bookings”.
Mapbox Integration:
Display maps on Homepage (400px tall) and Search Page (200px tall).
Plot pins for listings using Firestore location data (lat, lng). Pins: car (#00B4D8), RV (#FF6F61), truck (#333333).
Google Places Integration:
Enable autocomplete in Search Page’s search bar. On input, fetch location suggestions and store selected location in Firestore for filtering listings.
4. Testing and Debugging
Functional Testing:
Test user flows: Search → Listing Detail → Booking Confirmation → Host Dashboard.
Verify Stripe payments (driver pays $20.88, host gets $17.60, P2Parking gets $2.40).
Confirm Mapbox pins display correctly and Google Places autocomplete works.
Ensure Firebase auth and data storage function (e.g., bookings saved, listings retrieved).
Device Testing: Test on iOS (iPhone 12, iOS 18) and Android (Samsung Galaxy S21, Android 14). Check for UI consistency (e.g., 40px buttons) and performance (no lag on map load).
Edge Cases: Test slow network conditions (simulate 3G), large data loads (1,000 users, 2,500 bookings), and invalid inputs (e.g., wrong payment details).
Accessibility: Ensure buttons are 40px tall, screen reader compatible (WCAG 2.1).
Bug Fixes: Resolve issues (e.g., map not rendering, payment failures) and retest.
5. Pre-Launch Prep
App Store Assets: Use finalized logo (pink map pin "P", deep gold #D4AF37, in circle) and prepare screenshots, descriptions, and icons for Apple App Store and Google Play.
Submission: Submit the app to Apple App Store and Google Play for review. Monitor approval process and address any rejections.
Final Testing: Conduct a final round of testing in a live environment to ensure functionality before the July 1 launch.
Summary: This covers the full app build, from setup to submission, ensuring all features (Mapbox maps, Stripe payments, Google Places autocomplete, Firebase backend) are implemented across 6 pages and the Privacy Popup. Developer will follow this plan, using the Figma wireframe (written version, can do visual version if needed ).
1. Project Setup
Create FlutterFlow Project: Set up a new project in FlutterFlow named “P2Parking” for iOS and Android. Configure the project for a mobile-first layout (375px width, 667px height, iPhone 12/Android equivalent).
Integrate Backend Services:
Set up Firebase for authentication (email, Google, Apple ID logins) and Firestore for data storage (users, listings, bookings).
Initialize Mapbox, Stripe, and Google Places APIs with provided API keys (to be supplied).
Version Control: Use GitHub for version control. Create a repository named “p2parking-app” and push initial commits.
Dependencies: Add FlutterFlow packages for Firebase, Mapbox, Stripe, and Google Places. Ensure compatibility with Flutter SDK 3.x.
2. UI Implementation
Follow the Figma wireframe for layout, dimensions, and interactions. Use placeholder assets (e.g., logo, map pins) until final designs are ready. All pages are 375px wide, 667px tall, with 16px margins and 8px gaps unless specified. Buttons are 40px tall for accessibility.
Homepage
Logo: Place a placeholder rectangle (100px wide, 24px tall) labeled “P2Parking Logo” at top-left (16px from left/top edges).
Mapbox Map: Embed a Mapbox map (343px wide, 400px tall) centered (16px margin on left/right), 56px from top. Add 3 placeholder pins (10px diameter circles) for car, RV, truck, spaced evenly.
Search Bar: Add a text input (300px wide, 40px tall) centered (37.5px from left/right), 480px from top, with placeholder “Search parking near...”. Add a “Search” button (40px wide, 40px tall) to the right (8px gap). Tapping navigates to Search Page.
Filter Icon: Place a square (24px x 24px) labeled “Filter” at bottom-right (16px from right/bottom edges). Tapping opens a filter modal (not implemented yet).
Search Page
Back Arrow: Add a triangle (16px wide, 16px tall) labeled “Back” at top-left (16px from left/top edges). Tapping returns to Homepage.
Search Bar: Add a text input (343px wide, 40px tall) centered (16px margin on left/right), 48px from top, with placeholder “Enter location (Google Places)”. Integrate Google Places API for autocomplete.
Results List: Display 3 result cards (343px wide, 80px tall each, 16px margin on left/right):
Result 1 (96px from top): Title “Parking Spot 1” (16px from left), Price “$20/day” (16px below title), Distance “0.5 mi” (16px from right).
Result 2 (184px from top): Same layout, “Parking Spot 2”.
Result 3 (272px from top): Same layout, “Parking Spot 3”.
Tapping a result navigates to Listing Detail Page.
Map Thumbnail: Add a Mapbox map (343px wide, 200px tall) centered (16px margin on left/right), 467px from top, labeled “Mapbox Map”.
Listing Detail Page
Back Arrow: Add a triangle (16px wide, 16px tall) labeled “Back” at top-left (16px from left/top edges). Tapping returns to Search Page.
Spot Photo: Add a placeholder rectangle (343px wide, 267px tall) centered (16px margin on left/right), 48px from top, labeled “Spot Photo”.
Details: Stack text placeholders (16px from left edge):
Title “Parking Spot near UT Stadium” (323px from top).
Price “$20/day” (8px below title).
Rating: 4 star icons (16px wide each, 4px gaps) labeled “4 stars” (8px below price).
“Car, RV, Pickup Truck compatible” (8px below rating).
“10x20 ft” (8px below).
“Availability: Weekdays” (8px below).
Book Now Button: Add a button (343px wide, 40px tall) centered (16px margin on left/right), 611px from top, labeled “Book Now”. Tapping navigates to Booking Confirmation Page.
Booking Confirmation Page (May 10-12)
Back Arrow: Add a triangle (16px wide, 16px tall) labeled “Back” at top-left (16px from left/top edges). Tapping returns to Listing Detail Page.
Confirmation Message: Add text “Booking Confirmed!” (343px wide) centered, 200px from top.
Details (stacked, 16px from left edge):
Spot title “Parking Spot near UT Stadium” (8px below message).
Date “Aug 1, 2025” (8px below title).
Price “$20.88 total” (8px below date).
Host name “Host: John Doe” (8px below price).
Buttons:
Chat Button: Add a button (200px wide, 40px tall) labeled “Message Host” centered, 400px from top. Tapping opens chat (not implemented).
Report Issue Button: Add a button (120px wide, 40px tall) labeled “Report Issue” (16px from right edge), 400px from top. Tapping opens report form (not implemented).
View Map Button: Add a button (343px wide, 40px tall) centered (16px margin on left/right), 611px from top, labeled “View Map”. Tapping opens Mapbox map (not implemented).
Host Dashboard Page
Logo: Add a placeholder rectangle (100px wide, 24px tall) labeled “P2Parking Logo” at top-left (16px from left/top edges).
Your Listings:
Title “Your Listings” (343px wide), 56px from top, 16px from left.
List placeholder (343px wide, 60px tall), 80px from top, labeled “Spot 1 - $20/day”.
Upcoming Bookings:
Title “Upcoming Bookings” (343px wide), 156px from top, 16px from left.
List placeholder (343px wide, 60px tall), 180px from top, labeled “Driver X, Aug 1, $17.60 net”.
Earnings:
Title “Earnings” (343px wide), 256px from top, 16px from left.
Placeholder (343px wide, 60px tall), 280px from top, labeled “Total: $35.20”.
Add New Listing Button: Add a button (343px wide, 40px tall) centered (16px margin on left/right), 611px from top, labeled “Add New Listing”. Tapping opens form (not implemented).
Privacy Popup
Modal Window: Add a rectangle (300px wide, 400px tall) centered (37.5px margin on left/right, 133.5px from top/bottom).
Title: Text “Privacy Policy” (centered, 16px from top of modal).
Body: Text placeholder “We value your privacy…” (260px wide, 300px tall), centered in modal, 48px from top of modal.
Buttons:
Accept Button: Add a button (120px wide, 40px tall) labeled “Accept”, 360px from top of modal, 40px from left edge of modal. Tapping closes modal.
Decline Button: Add a button (120px wide, 40px tall) labeled “Decline”, 360px from top of modal, 40px from right edge of modal (8px gap from Accept). Tapping closes modal.
3. Backend Integration (May 16-20, 2025)
Firebase Setup:
Users: Create a “users” collection with fields (userID, email, role: “driver” or “host”, paymentInfo).
Listings: Create a “listings” collection with fields (listingID, hostID, title, price, dimensions, availability, vehicleTypes, location: {lat, lng}).
Bookings: Create a “bookings” collection with fields (bookingID, listingID, driverID, hostID, date, price, status).
Authentication: Implement email, Google, and Apple ID logins via Firebase Auth.
Stripe Integration:
Payment Flow: On “Book Now” button tap, charge driver $20.88 ($20 + $0.88 Stripe fee). Use Stripe Connect to instantly pay host $17.60 ($20 - 12% fee) and P2Parking $2.40.
Store payment status in Firestore under “bookings”.
Mapbox Integration:
Display maps on Homepage (400px tall) and Search Page (200px tall).
Plot pins for listings using Firestore location data (lat, lng). Pins: car (#00B4D8), RV (#FF6F61), truck (#333333).
Google Places Integration:
Enable autocomplete in Search Page’s search bar. On input, fetch location suggestions and store selected location in Firestore for filtering listings.
4. Testing and Debugging
Functional Testing:
Test user flows: Search → Listing Detail → Booking Confirmation → Host Dashboard.
Verify Stripe payments (driver pays $20.88, host gets $17.60, P2Parking gets $2.40).
Confirm Mapbox pins display correctly and Google Places autocomplete works.
Ensure Firebase auth and data storage function (e.g., bookings saved, listings retrieved).
Device Testing: Test on iOS (iPhone 12, iOS 18) and Android (Samsung Galaxy S21, Android 14). Check for UI consistency (e.g., 40px buttons) and performance (no lag on map load).
Edge Cases: Test slow network conditions (simulate 3G), large data loads (1,000 users, 2,500 bookings), and invalid inputs (e.g., wrong payment details).
Accessibility: Ensure buttons are 40px tall, screen reader compatible (WCAG 2.1).
Bug Fixes: Resolve issues (e.g., map not rendering, payment failures) and retest.
5. Pre-Launch Prep
App Store Assets: Use finalized logo (pink map pin "P", deep gold #D4AF37, in circle) and prepare screenshots, descriptions, and icons for Apple App Store and Google Play.
Submission: Submit the app to Apple App Store and Google Play for review. Monitor approval process and address any rejections.
Final Testing: Conduct a final round of testing in a live environment to ensure functionality before the July 1 launch.
Summary: This covers the full app build, from setup to submission, ensuring all features (Mapbox maps, Stripe payments, Google Places autocomplete, Firebase backend) are implemented across 6 pages and the Privacy Popup. Developer will follow this plan, using the Figma wireframe (written version, can do visual version if needed ).