Skip to content

Expanded Phase 3: MVP Frontend Development (4-6 Weeks)

Objective:
Create an intuitive, responsive, and functional web interface that serves customers, administrators, and drivers, focusing on user experience and seamless interaction with the backend. This phase ensures a user-friendly system that enhances service delivery and satisfaction.

Goals

  1. Develop a single-page application (SPA) using Vue.js integrated with Laravel via Inertia.js.
  2. Ensure a responsive design for optimal use across devices (desktop, tablet, and mobile).
  3. Deliver distinct interfaces for:
  4. Customers: Booking and tracking their pet’s transportation.
  5. Admins: Managing rides, drivers, and analytics.
  6. Drivers (optional): Viewing assigned rides and updating statuses.

Deliverables

  1. Vue.js SPA:

  2. Integrated with Laravel using Inertia.js for server-side rendering.

  3. Seamless routing and state management with Vue Router and Vuex/Pinia.

  4. Customer Features:

  5. A booking form for entering pickup/drop-off details and pet information.

  6. Live ride tracking using Google Maps API or Leaflet.js.

  7. Profile management and booking history.

  8. Admin Features:

  9. A dashboard for monitoring and managing rides, drivers, and users.

  10. Basic reporting and analytics for bookings and revenues.

  11. Driver Features (Optional):

  12. A simplified interface to view assigned rides and update ride statuses (e.g., "Picked Up," "Delivered").

  13. Testing and Debugging:

  14. Functional testing of user workflows.
  15. Cross-browser and cross-device testing for responsiveness.

Tasks

1. Customer Interface

  1. Booking Form:

  2. Use Vue.js components for a dynamic, multi-step form:

    • Step 1: Pickup and drop-off details (addresses with Google Maps autocomplete).
    • Step 2: Pet details (name, type, breed, special needs).
    • Step 3: Confirmation and payment details.
  3. Validate inputs (e.g., required fields, valid address format).

  4. Send form data to backend via API (/bookings endpoint).

  5. Live Ride Tracking:

  6. Integrate Google Maps API or Leaflet.js:

    • Display driver’s location in real-time using latitude and longitude.
    • Show route and estimated time of arrival (ETA).

  7. Regularly poll the backend for ride status updates (via /rides/{id} endpoint).

  8. Booking History and Profile Management:

  9. Booking History:
    • Display past and upcoming bookings in a table or card layout.
    • Provide details like ride status, driver name, and pet information.
  10. Profile Management:
    • Allow users to update their information (e.g., name, phone number).
    • Enable pet profile management (add, edit, or delete pets).

2. Admin Interface

  1. Dashboard:

  2. Use data visualization libraries like Chart.js or D3.js for analytics:

    • Daily/weekly booking trends.
    • Revenue summaries.
    • Active/inactive users and drivers.

  3. Display pending actions, such as unassigned bookings or flagged issues.

  4. Ride and Driver Management:

  5. Rides:

    • View all bookings with filters (e.g., status, date, customer name).
    • Assign/unassign drivers manually.
    • Update ride details (e.g., reschedule, cancel).

  6. Drivers:

    • View and manage driver profiles.
    • Assign rides to drivers directly from the dashboard.

  7. Reports and Analytics (Basic):

  8. Export data (e.g., CSV) for external analysis.
  9. Provide summaries on system usage and revenue.

3. Driver Interface (Optional)

  1. View Assigned Rides:

  2. Display upcoming rides with pickup/drop-off details.

  3. Highlight special instructions (e.g., “Fragile pet” or “Requires leash”).

  4. Update Ride Status:

  5. Buttons or toggles for:
    • “Picked Up” → Sends notification to the customer.
    • “In Transit” → Updates status on the live tracker.
    • “Delivered” → Marks ride as completed.

4. Testing and Debugging

  1. Functional Testing:

  2. Test key workflows (e.g., booking a ride, updating ride status).

  3. Validate form inputs and error handling.

  4. Responsive Design Testing:

  5. Use browser developer tools to simulate different screen sizes.

  6. Test on real devices (e.g., smartphones, tablets, desktops).

  7. Cross-Browser Compatibility:

  8. Ensure functionality on major browsers (Chrome, Firefox, Safari, Edge).

  9. Performance Testing:

  10. Optimize API calls and reduce page load times.
  11. Use tools like Lighthouse for performance auditing.

Outcomes of Phase 3

  1. A fully functional frontend that seamlessly interacts with the backend, providing essential features for customers, admins, and (optionally) drivers.
  2. A responsive and user-friendly design optimized for a variety of devices.
  3. Robust testing ensures the system works efficiently under real-world conditions.
  4. A foundation for future enhancements, such as a mobile app or advanced analytics.