Weeks 7–11: Comprehensive Development and Launch of CarConnect UAE Minimum Viable Product

Summary: During Weeks 7 to 11, the CarConnect UAE project underwent a substantial transformation. The original development plan, which relied heavily on custom-coded backend systems and primary data collection through survey forms, was discarded. The cause: financial constraints and inefficient delays—specifically, the anticipation of survey approvals and technical development timelines that were unfeasible within the limited project duration.

 The strategy transitioned to a no-code/low-code development framework that would significantly accelerate deployment while maintaining a feature-rich, scalable Minimum Viable Product (MVP). This decision led to the adoption of three primary tools:

 WeWeb – Frontend Website and Application Development Platform

 Supabase – PostgreSQL Database and Backend Application Programming Interface

 Octoparse – AI-Enhanced Web Scraping from Dubizzle, CarSwitch, YallaMotor, and others.

 Transition of Technological Framework

 Initial Strategy: Not Applicable

 - Tailored React frontend - Node.js Express backend - Survey and user research analysis

 - Deployment via DigitalOcean App Platform

 Revised Stack: - WeWeb (frontend): a drag-and-drop user interface builder with dynamic data binding capabilities - Supabase (backend): an immediate PostgreSQL database, prepared for API integration Octoparse (scraping): retrieves real-time automobile listings from external UAE classifieds. Supasupa: enables effortless integration between Supabase and the WeWeb frontend

 Development of Websites and Applications using WeWeb

 WeWeb developed the visual framework of the platform. It enabled rapid prototyping and immediate visual development without the requirement of coding. This document delineates the essential pages and components created (see the attached screenshots):

 1. Primary Page and Search Feature The homepage features an AutoTempest-style search bar, which includes: - City (Dubai, Abu Dhabi, etc.)

 - Manufacturer and Model (e.g., Toyota, Nissan, Porsche)

 - Price range (in AED)

 Year - Mileage (kilometres)

 - Regional Specifications (Gulf Cooperation Council, Japanese, etc.)

 - Seller Categorisation (Dealer/Owner)

 - Vehicle Categorisation (Sedan, SUV, etc.)

 - Gearbox and Fuel Category This advanced filtering system emulates the experience of using Dubizzle or YallaMotor. It fetches live listings from Supabase and dynamically presents the results in real time.

 Screenshots: User interface displaying home search filters and a preview of search results with cards and images.

 User Authentication and Account Dashboard

 WeWeb's integrated Auth plugin allows users to register using either email/password or Google/Apple credentials.

 - Authenticate and deauthenticate - Access account dashboard

 - Alter preferences, billing details, and associated services (e.g., Google, GitHub) - Observe login activity and security settings 📸 Screenshots: Authentication interface, registration form, user control panel displaying profile and toggle switches.

 Initiatives in AI Integration

 An AI-assisted chatbot was originally designed to aid users in their vehicle search. At present, WeWeb does not accommodate embedded AI agents or conversational user interfaces; consequently, this feature was deprioritized for the minimum viable product.

 Database Configuration Utilising Supabase

 Supabase was selected as the backend solution because it offers a hosted PostgreSQL database.

 - Automatically generated RESTful and GraphQL application programming interfaces

 - Differentiation between public and private schemas for secure data transactions

 Integration of SupaSupa with WeWeb

 Database Table Created: - Car_Listing – including all data fields such as title, price, mileage, fuel type, specifications, location, gearbox, contact link, and dealer information. 📸 Screenshots: Configuration of the Supabase project, schema establishment, and WeWeb database integration.

 Web Scraping Using Octoparse

 In the absence of a public API from Dubizzle or CarSwitch, Octoparse was utilised to extract live car listings. This constitutes the operational protocol:

 Step One: Configuration

 Provide URLs from Dubizzle, CarSwitch, YallaMotor, and Cars24 in the United Arab Emirates.

 - Establish pagination and scrolling systems to obtain comprehensive listings Extracted fields: Title, Price, Year, Mileage, Transmission, Location, Image, and Direct Link. 📸 Screenshots: Configuration of input URLs and scraper workflow in Octoparse.

 Step 2: Data Extraction - Extracted over 9,199 rows of automotive listing data - Resolved duplicate entries - Exported to Excel

 Camera Screenshots: Executing a task with more than 4538 entries processed, data table visualisation

 Step 3: Upload Data to Supabase - Data uploaded to Supabase's `Car_Listing` table - Utilised Supasupa to integrate Supabase with WeWeb for instantaneous listing presentation 📸 Screenshots: Supabase table populated with authentic automotive data

 Thorough Data Flow 1. 🔄 Octoparse retrieves automobile listings from classified websites in the UAE.

 Exported to Excel or JSON format. Uploaded to Supabase.

 4. Supasupa integrates the database with WeWeb. WeWeb displays live filtered listings in the frontend user interface.

 Outcome

 The result is a fully functional MVP of CarConnect UAE – a platform similar to AutoTempest, tailored for the UAE, aggregating car listings from multiple third-party sources and redirecting users to the original advertisements.

 Despite time limitations and alterations in tools, the final product embodies the original vision in a more sophisticated, efficient, and modern way.