PROPANEGO

Executive Summary

This project aims to develop a safe and efficient platform for users in the Dominican Republic
to request propane gas deliveries

The platform will have 2 user interfaces:

1. Users: Can request propane tank pickups and deliveries, view bids from drivers, and
track orders.
2. Delivery Personnel: Can place bids, pick up empty propane tanks, refill them at gas
stations, and deliver them back to the users.

Colors:

Primary Colors:

1. Red (#FF6347 - Tomato)

2. Orange (#FFA500)

Secondary Colors:

1. Light Blue (#87CEEB):

2. Light Gray (#F5F5F5, #808080):
3. Dark Gray (#F5F5F5, #808080):

Font:

Open Sans:

● Bold: Used for headings to draw attention.

● Regular: Used for body text to ensure readability.
● Semi-Bold: Used for buttons and call-to-action text.
User Side Pages

1. Login Page

● Elements:
1. App Logo and Slogan at the top.
2. Username and Password fields.
3. Third-Party Login: Icons for Google and Facebook login.
4. Sign-Up Prompt: “Don’t have an account? Sign up here” link to the registration
page.
5. Forgot Password Link: A link below the password field for users to reset their
password.

2. Registration Page

● Elements:
1. App Logo and Slogan at the top.
2. Form Fields:
■ Full Name
■ Email
■ Phone Number
■ Address
■ Age, Occupation, and Employment Status fields for marketing data.
■ Password and Confirm Password fields.
3. Agreement Checkbox: “I agree to the Terms & Conditions” checkbox.
4. Sign-Up Button: To complete registration.
5. Login Prompt: “Already have an account? Log in here” link to return to the login
page.

3. Home/Dashboard Page

● Elements:
1. Welcome Message: Personalized greeting with the user’s name.
2. New Request Button: Large button to create a new delivery request.
3. Recent Orders Section: Displays a list of the user’s recent propane delivery
requests with statuses (Pending, In Progress, Delivered).
4. Navigation Bar: Bottom navigation for Home, Notifications, Profile, and Help
Center.
 4. Create Delivery Request Page (Updated)

● Elements:
1. Request Type Selection:
■ Now Delivery: Immediate delivery request, where the nearest available
driver will pick up and refill the tank as soon as possible.
■ Scheduled Delivery: Allows users to set a specific date and time for the
delivery, ideal for planning in advance.
2. Location Fields: Input fields for pickup and delivery addresses.
3. Tank Quantity: Dropdown or numeric input to specify the number of tanks.
4. Special Instructions Field: Optional text field for users to provide additional
instructions for the driver.
5. Scheduled Delivery Date & Time (Visible only for Scheduled Requests): A date
and time picker allowing users to select when they want the driver to pick up the
tank.
6. Discount Options: Any applicable discount (e.g., percentage-based delivery
discount) will be automatically applied or shown if available.
7. First-Time Free Delivery (if applicable): If the user qualifies for a first-time free
delivery, a message will display to indicate the waived delivery fee.
8. Estimated Delivery Fee Display: Shows calculated delivery fee based on
distance and request type (Now or Scheduled).
9. Submit Request Button: To confirm and send the delivery request to available
drivers, or to schedule it for the selected date and time.

5. Real-time Tracking Page

● Elements:
1. Map View: Real-time map showing driver’s location in relation to the user’s
location.
2. Order Status Display: Status of the request (e.g., Accepted, Picked Up,
Delivered).
3. Estimated Time of Arrival (ETA): Display of estimated time until the driver
arrives.
4. Chat and Call Buttons: Quick buttons to chat with or call the driver.
5. Order Details Summary: Summary of the order details, including pickup and
delivery addresses and the tank quantity.

6. Notifications Page

● Elements:
 1. Notification List: Displays notifications about order status updates, messages
from drivers, and other relevant alerts.
2. Notification Type Icons: Icons to indicate types of notifications (e.g., status
updates, new messages).
3. Clear All Button: Option to clear all notifications.

7. Payment Page

● Elements:
1. Order Summary: Display of the order details, including total delivery fee and any
discounts applied.
2. Payment Options: Buttons for payment methods (Stripe, Azul).
3. Tip Options: Tip percentage options (5%, 10%, 15%) and custom tip amount
input.
4. Confirm Payment Button: To finalize and process the payment.

8. Rating and Review Page

● Elements:
1. Rating System: Star-based rating system (1-5 stars).
2. Review Text Box: Optional text field for the user to leave comments about the
driver’s service.
3. Submit Button: To save the rating and review.

9. Profile Page (Updated)

● Elements:
1. User Information Display: Profile picture, full name, email, phone number, and
address.
2. Edit Profile Button: Allows users to edit their personal information, including
new fields like age, occupation, and employment status.
3. Order History: A list of past orders with order dates, statuses, and delivery fees.
4. Settings: Options for changing password, managing notifications, and viewing
app Terms & Conditions.

Driver Side Pages

 1. Login Page

● Elements:
1. App Logo and Slogan at the top.
2. Username and Password fields.
3. Third-Party Login: Icons for Google and Facebook login.
4. Sign-Up Prompt: “Don’t have an account? Sign up here” link to registration
page.
5. Forgot Password Link: To reset the password if needed.

2. Registration Page

● Elements:
1. App Logo and Slogan at the top.
2. Form Fields: Full Name, Email, Phone Number, Vehicle Information, and
Password fields.
3. Document Upload: Section to upload identification and vehicle documents for
verification.
4. Agreement Checkbox: “I agree to the Terms & Conditions” checkbox.
5. Sign-Up Button: To submit the registration request.
6. Login Prompt: “Already have an account? Log in here” link to the login page.

3. Driver Dashboard/Home Page (Updated)

● Elements:
1. Available Requests List:
■ Requests will display whether they are Now Delivery or Scheduled
Delivery.
■ Now Delivery Requests: Highlighted with a “Now” badge or icon for
drivers to prioritize immediate deliveries.
■ Scheduled Delivery Requests: Display the scheduled pickup date and
time, so drivers know when they need to fulfill these requests.
2. Request Details:
■ Each request card will show details such as pickup and delivery locations,
tank quantity, and request type (Now or Scheduled).
■ Scheduled requests include a reminder closer to the pickup time to
ensure drivers are prepared.
3. Accept Request Button:
■ Drivers can accept either type of request, with “Now” requests based on
real-time availability.
 ■For Scheduled Requests, drivers receive a notification close to the
scheduled time as a reminder.
4. Scheduled Request Reminders:
■ Drivers will get a push notification reminder a certain period (e.g., 30
minutes or 1 hour) before a Scheduled Delivery to ensure they’re ready
for pickup.

4. Job Tracking/Navigation Page

● Elements:
1. Map View and Navigation: Real-time route information to reach the customer’s
location at the scheduled time.
2. Scheduled Reminder: A reminder at the top of the page, displaying the
scheduled pickup time to help drivers arrive punctually.
3. Job Status Update Buttons: “Picked Up” and “Delivered” buttons to update the
status.
4. User Communication Options: Chat and call buttons for reaching out to the
user.
5. Order Summary: Brief summary of the job details.

5. Payment and Debit Card Page

● Elements:
1. Debit Card Usage Summary: Section for viewing and managing transactions
made using the special debit card for gas refills.
2. Gas Refill Information: Display of total spent on gas, linked to the job ID.
3. End Job Button: Button to finalize and complete the job after delivery.

6. Notifications Page

● Elements:
1. Notification List: Displays alerts for new requests, job updates, messages, and
other relevant notifications.
2. Notification Type Icons: Icons to differentiate notification types.
3. Clear All Button: Option to clear all notifications.

7. Earnings Page
● Elements:
1. Earnings Summary: Display of total earnings, tips, and recent payouts.
2. Job History: List of past jobs, including delivery fees and tip amounts.
3. Request Payout Button: Button for drivers to request a payout, with options to
select cash or card.

8. Profile Page

● Elements:
1. Driver Information Display: Profile picture, full name, email, phone number, and
vehicle information.
2. Edit Profile Button: Allows drivers to edit their information.
3. Settings: Options for changing password, managing notifications, and viewing
app Terms & Conditions.
4. Order History: A list of completed jobs with dates and earnings.
Project Phases and Development Plan
Sprint 1: Initial Setup and Core Features

Objectives:

Establish the foundation of the app by setting up registration, login flows, core delivery
request functionality, and admin-side management for location-based service activation.

Features:

1. User Module:
○ User Registration and Login: Email, password, Google, and Facebook login
options.
○ Profile Fields for Marketing Data: Additional fields in user profile (age,
occupation, employment status).
○ Create Delivery Request:
■ Options for Now Delivery and Scheduled Delivery.
■ Location input (pickup and delivery addresses), tank quantity, and
special instructions.
■ Delivery fee calculation based on distance.
○ Real-time Tracking Setup: Basic framework for tracking driver location.
○ Push Notifications Setup: Initial setup to notify users of status changes.
2. Driver Module:
○ Driver Registration and Login: Email, password, Google, and Facebook
login options, with document upload for verification.
○ Receive and Accept Requests:
■ Distinguish between Now and Scheduled Requests.
■ First-come, first-served assignment for Now requests.
■ Display scheduled pickup time for Scheduled requests.
○ Push Notifications: Initial setup to alert drivers of new delivery requests.
3. Admin Module:
○ Service Activation by Location: Enable or disable service availability based
on selected locations (e.g., Santo Domingo, Puerto Plata).
○ Basic Monitoring: Admins can view active users and drivers, with delivery
status tracking.

Duration: 3 Weeks

Sprint 2: Advanced Features, Discounts, and Communication

Objectives:
Implement real-time communication for users and drivers, discount options for
marketing, and first-time free delivery.

Features:

1. User Module:
○ Real-Time Chat: In-app chat for user-driver communication.
○ Call Button: Directs users to their phone’s dialer to call the driver if needed.
○ Discounts:
■ Delivery Discounts: Ability for users to apply percentage-based
discounts.
■ First-Time Free Delivery: Automatically apply a free delivery for the
user’s first order (toggleable by admin).
2. Driver Module:
○ Real-Time Chat and Call Options: Allow drivers to communicate with users
directly.
○ Scheduled Request Reminders: Push notifications reminding drivers about
upcoming scheduled jobs.
3. Admin Module:
○ Manage Discounts: Admin can configure percentage-based delivery
discounts.
○ First-Time Free Delivery Toggle: Toggle button to turn on/off free delivery
for new users.
4. General App Updates:
○ WebSocket Integration: Real-time chat and order status updates.
○ Notification Reminders: Scheduled reminders for users on upcoming
deliveries and driver pickup reminders.

Duration: 3 Weeks

Sprint 3: Order Lifecycle, Analytics, and User Reminders

Objectives:

Enhance order lifecycle features and integrate analytics for user behavior and ordering
patterns.

Features:

1. User Module:
○ Order Tracking:
■ Real-time map view for driver tracking and estimated time of arrival.
■ Order status updates (e.g., Accepted, Picked Up, Delivered).
 ○Reminders Based on Order Frequency:
■ Track the average time users reorder gas and send automated
reminders when it’s likely they’ll need a refill.
2. Driver Module:
○ Navigation and Status Updates:
■ Real-time navigation for pickup and delivery routes.
■ Status update buttons (Picked Up, Delivered).
○ Location-Based Fee Calculation: Adjust delivery fee calculations based on
the user’s proximity to a gas station.
3. Admin Module:
○ Ordering Behavior Analytics:
■ Track the average time between user orders for gas.
■ Analytics on the most frequent ordering areas and locations with
high service demand.
■ Insights on user demographics (age, occupation, and employment
status) to inform marketing strategies.

Duration: 3 Weeks

Sprint 4: Financial Management, Ratings, Optimization, and Final Testing

Objectives:

Implement financial features, including payments, tipping, and admin-side analytics, with
final testing and optimizations for a smooth launch.

Features:

1. User Module:
○ Payment and Tipping:
■ Integrate payment processing with Stripe and Azul.
■ Tip option with pre-set percentages or custom amounts.
○ Rating and Review: Users rate and review drivers after delivery completion.
2. Driver Module:
○ Earnings Dashboard:
■ View job history, earnings, and tips.
■ Request payout option (cash or card).
○ Payout Management: Automated payouts with Stripe or manual cash
payouts, with commission deductions from each ride and separate tip
tracking.
3. Admin Module:
○ Transaction Monitoring:
 ■ Detailed tracking of user payments, tips, driver payouts, and special
marketing discounts applied.
○ User Analytics Dashboard:
■ Track user order frequency, location-based demand, and
demographics for targeted marketing.
○ Rating and Review Management: View and manage user reviews of drivers.
4. Final Testing and Optimization:
○ Security Testing: Ensure all data, payments, and chat interactions are
encrypted.
○ Performance Optimization: Optimize app to handle high volumes of users
and real-time data for seamless user experience.

Duration: 3 Weeks
PAGES EXAMPLE
Sprint 1 Technical Specification

Frontend: Mobile App (Flutter)

1. User Interface (Flutter - Dart):

○ User, Driver, and Gas Station Dashboards: Implement views using Flutter for
Android and iOS.
○ Forms and Actions:
■ User: Registration, login, request propane delivery, view bids.
■ Driver: Registration, bidding on jobs, accepting job, uploading tank
photos.
■ Gas Station: Registration, accepting requests, uploading refill photos.
○ Navigation: Flutter navigation for switching between pages (dashboard, request
form, bid list, etc.).
2. UI Components:
○ User Request Form: Form validation for locations and number of tanks.
○ Bid Interface: List of driver bids, sortable by price and proximity.
○ Photo Upload Interface: For both drivers and gas stations (tank and meter
photos).

Frontend: Web App (React.js)

1. Admin Dashboard:
○ Built using React.js and TypeScript to manage user, driver, and gas station
data.
○ Features:
■ User list management.
■ Order and transaction tracking.
■ Verification checks for driver and gas station photo uploads.
○ Form Validation using libraries like Formik and Yup.

Backend: API & Services

1. Node.js + Express:
○ Handle all API routes for user, driver, and gas station actions.
○ Endpoints:
■ /user/register, /user/login, /driver/register,
/station/register.
■ /request/create: Create a new propane delivery request.
■ /bids/submit: Submit bid from driver.
■ /photos/upload: Upload tank photos.
 ○ JWT (JSON Web Tokens) for authentication and session management.
2. Laravel (API and Web Services):
○ Handles business logic and complex transactions, such as payment
processing via Stripe and Azul.
○ Create web services to manage user orders, bids, and verification data.
○ WebSocket for real-time updates (bidding process, delivery status).

Database: PostgreSQL/MySQL

1. Schema Design:
○ Users Table: ID, email, password, user type (user, driver, gas station).
○ Orders Table: Order ID, user ID, driver ID, gas station ID, status (pending, in
progress, completed).
○ Bids Table: Bid ID, order ID, driver ID, amount, status (accepted, pending).
○ Verification Table: Order ID, tank photos (uploaded by driver and gas station).
2. Database Queries:
○ CRUD operations for managing users, orders, bids, and photo uploads.
○ Geolocation: Queries for selecting drivers based on proximity to the user using
PostGIS (for spatial data).

Payment Integration

1. Stripe and Azul (for local payments in the Dominican Republic):

○ Stripe for international payments, Azul for local.
○ API Integration using Node.js and Express.
○ Secure transactions: Integration of Stripe's tokenization to secure user card
data.
○ Endpoints:
■ /payment/initialize: Start payment process.
■ /payment/confirm: Confirm payment after driver delivers the tank and
gas station verification is complete.

Geolocation: Google Maps API or Mapbox

1. Google Maps API:

○ Geolocation Services: Fetch user location for gas tank pickup.
○ Route Tracking: Provide live GPS tracking for drivers to navigate between users
and gas stations.
○ Proximity Filtering: For displaying nearby drivers when users create a request.
Authentication: Firebase

1. Firebase Authentication:
○ User Authentication: Implement login and signup using Firebase Auth with
email/password.
○ Token Management: Use Firebase tokens to secure API requests between
users, drivers, and gas stations.
○ Firebase SDK: Integration in both Flutter and React.js for authentication.

Hosting & Deployment

1. AWS or GCP:
○ AWS S3 for image storage (tank and meter photos).
○ EC2 Instances or GCP Compute Engine for deploying the backend (Node.js
and Laravel services).
○ RDS (Relational Database Service) for PostgreSQL/MySQL database hosting.

Notifications: Firebase Cloud Messaging & Twilio

1. Firebase Cloud Messaging (FCM):

○ Real-time notifications for:
■ Bids placed.
■ Job accepted by the driver.
■ Tank delivery and refill status.
○ Firebase Functions: Used to trigger notifications based on certain events (like
bid acceptance).
2. Twilio (for SMS):
○ Used to send SMS notifications for critical events (such as order updates or
verification reminders for drivers and gas stations).