Recreate Figma UI - v0 by VercelRecreate Figma UI - v0 by Vercel

Please recreate the UI shown in the attached Figma frame as accurately as possible.

Carvaan.png

345d ago

Mobile Navigation App UI Recreation

I'll recreate the mobile app UI from the Figma design using Next.js and Tailwind CSS.

This implementation recreates the mobile navigation app UI from the Figma design with the following features:

Status Bar - Shows the time and status icons at the top
Header - Includes the hamburger menu, welcome message, and profile icon
Current Location - Displays the current location with a purple pin icon
Map View - Shows a map with various location markers (bus, shopping, restaurant, building)
Search Bar - Includes a red location pin and search input field
Quick Options - "Choose a saved place" and "Set destination on map" with appropriate icons
Promo Card - Black promotional card with the "New on the town" message
Bottom Navigation - Tab bar with Home (active), History, and Account options

The UI is fully responsive and matches the design from the Figma frame. I've used the colors from the provided context and Lucide React icons to match the design as closely as possible.

345d ago

Develop a React Native frontend application using Expo and Appwrite, replicating the UI design specified in the attached Figma frame. The implementation should accurately translate all cards and screens present in the Figma project into functional React Native components. Ensure that the application's structure is modular and maintainable, with clear separation of concerns. The UI should be responsive and adapt to various screen sizes. Integrate Appwrite for backend services, including user authentication, data storage, and any other relevant features as indicated by the Figma design. The final product should be a fully functional React Native application that mirrors the visual and interactive elements of the provided Figma design. The screens must be converted to code in a sequential order.

Show full message

345d ago

React Native Navigation App with Expo and Appwrite

I'll create a React Native application using Expo that replicates the UI design from the Figma frame, with Appwrite integration for backend services.

Let me provide a comprehensive implementation that follows the design and includes all the necessary components and functionality.

NavigationApp

App.js

Now let's set up the Appwrite context to handle authentication and data storage:

NavigationApp

src/context/AppwriteContext.js

Let's create a location context to manage location data:

NavigationApp

src/context/LocationContext.js

Now let's set up the navigation:

NavigationApp

src/navigation/AppNavigator.js

Now let's implement the main HomeScreen that matches the Figma design:

NavigationApp

src/screens/HomeScreen.js

Let's implement the SavedPlacesScreen:

NavigationApp

src/screens/SavedPlacesScreen.js

Now let's implement the SetDestinationScreen:

NavigationApp

src/screens/SetDestinationScreen.js

Let's implement the HistoryScreen:

NavigationApp

src/screens/HistoryScreen.js

Let's implement the AccountScreen:

NavigationApp

src/screens/AccountScreen.js

Let's implement the LoginScreen:

NavigationApp

src/screens/LoginScreen.js

Finally, let's implement the RegisterScreen:

NavigationApp

src/screens/RegisterScreen.js

Now let's create a package.json file to specify the dependencies:

NavigationApp

package.json

Finally, let's create an app.json file for Expo configuration:

NavigationApp

app.json

Summary

I've created a complete React Native application using Expo that replicates the UI design from the Figma frame. The application includes:

Authentication System:
- Login and registration screens
- Integration with Appwrite for user management
Navigation:
- Bottom tab navigation (Home, History, Account)
- Stack navigation for nested screens
Home Screen:
- Current location display
- Interactive map with markers
- Search functionality
- Quick access options (saved places, set destination)
- Promotional card
Additional Screens:
- Saved Places screen
- Set Destination screen
- History screen with trip logs
- Account screen with user profile and settings
Context Providers:
- AppwriteContext for backend services
- LocationContext for location management

The application is structured in a modular and maintainable way, with clear separation of concerns. The UI is responsive and adapts to various screen sizes. All components are styled to match the Figma design as closely as possible.

To run this application:

Set up an Appwrite project and replace the placeholder values in the AppwriteContext.js file
Get a Google Maps API key and add it to the app.json file
Run npm install to install dependencies
Run expo start to launch the application

The application is now ready for further customization and feature development.

345d ago

Modify the above frontend implementation and anything else related to successfully developing this app but specifically ensure that the figma design is implemented spectacularly without any errors. I've attached the whole guide containing the backend implementation for this app on appwrite so that you gett some context on the tech stack and other tools used to develop this app i.e. logic as well as steps to implement the frontend aptly. Here's the reference prompt again: Develop a React Native frontend application using Expo and Appwrite, replicating the UI design specified in the attached Figma frame. The implementation should accurately translate all cards and screens present in the Figma project into functional React Native components. Ensure that the application's structure is modular and maintainable, with clear separation of concerns. The UI should be responsive and adapt to various screen sizes. Integrate Appwrite for backend services, including user authentication, data storage, and any other relevant features as indicated by the Figma design. The final product should be a fully functional React Native application that mirrors the visual and interactive elements of the provided Figma design. The screens must be converted to code in a sequential order.
Here's a clear description of the features the app must contain:

Carpooling App: Destination-First Group Pairing System

A step-by-step implementation guide using Appwrite for exact destination matching

1. Project Overview

Core Objective

Create a ride-sharing platform that exclusively pairs users traveling to the exact same destination, ensuring zero route deviations. The system prioritizes precision through coordinate-based matching and real-time group updates.

Key Technical Components

Frontend: React Native (Expo) for cross-platform UI
Backend: Appwrite for database, authentication, and real-time updates
Mapping: Google Places API (destination input) + Maps Static API (meeting points)
Geo Calculations: geolib for distance/radius checks

Critical Requirements

Destination Precision: Users must share identical destination coordinates (via 6-character geohash)
Real-Time Sync: Appwrite’s database listeners for instant group updates
No Compromises: Strict "same destination" rule overrides all other filters

2. Step-by-Step Pairing Implementation

Phase 1: User Input & Validation

A. Destination Locking

Users enter destination via Google Places Autocomplete.
System converts the selected location to:
- Exact coordinates (latitude/longitude)
- 6-character geohash (covers ~0.61 km² area)

B. Travel Preferences

Departure Window: 15-minute slots (e.g., 8:00-8:15 AM)
Group Filters:
- Vehicle type (Car/Bike)
- Gender preference (Male/Female/Any)
- Maximum group size (2-5 people)

Phase 2: Matching Algorithm Workflow

A. Appwrite Database Query
The system searches existing groups using these criteria:

Destination Match:
- Compare 6-character geohash of all active rides
Time Compatibility:
- Departure window must overlap with user’s selected time
Capacity Check:
- Groups must have available seats
Preference Alignment:
- Gender filters strictly enforced if specified

B. Prioritization Logic

Proximity First: Groups closest to user’s start point rank higher
Time Urgency: Earlier departure times prioritized for same-day rides
Group Size: Nearly full groups (e.g., 3/4 seats filled) get priority

Phase 3: Group Formation

Option A: Join Existing Group

User selects a matched group from the list.
System updates Appwrite documents:
- Add user to members array
- Decrease availableSeats count
Group status changes to "Full" if capacity reached.

Option B: Create New Group

Triggers when no matches exist after 3 query attempts.
New Appwrite document created with:
- Exact destination coordinates + geohash
- User-set departure window
- Initial member list (creator only)

Phase 4: Real-Time Coordination

A. Live Updates

Appwrite’s database subscriptions notify all members about:
- New joiners
- Departure time changes
- Group status (Open/Full)

B. Meeting Point Calculation

System computes central meeting location using:
- All members’ starting coordinates
- geolib library’s midpoint function
Displayed via Google Maps Static image in group details.

Phase 5: Edge Case Management

Scenario | Solution
---|---
Duplicate Destinations | Auto-merge groups within 500m radius
Late Joiners | Allow entry up to 5 mins post-departure window
Creator Leaves | Randomly assign new creator from existing members
No-Shows | Auto-remove users after 3-minute grace period

3. Implementation Tools Breakdown

| Function | Tools/Libraries |
|----------------------------|-------------------------------------|
| Destination Input | Google Places Autocomplete API |
| Geohash Conversion | ngeohash library |
| Real-Time Updates | Appwrite Database Subscriptions |
| Distance Calculations | geolib |
| UI Components | React Native Elements + Expo Maps |

4. Critical Implementation Checklist

Appwrite Setup
- Create rides collection with geohash-indexed documents
- Configure database security rules for member edits
Geo-Precision Layer
- Implement 6-character geohash conversion for all destinations
- Add validation to prevent approximate matches
Matching Engine
- Build query builder with exact geohash comparison
- Integrate proximity-based ranking algorithm
Testing Protocol
- Validate group merging logic for nearby destinations
- Stress-test real-time updates with 50+ concurrent users

This blueprint ensures exact destination pairing while maintaining scalability through Appwrite’s serverless architecture. Would you like me to elaborate on geohash precision strategies or Appwrite’s real-time subscription setup? 🚗💨

Show full message

Complete Guide to Setting Up Appwrite for Carvaan.pdf

345d ago

import React, { useState, useContext, useEffect } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  FlatList,
  ActivityIndicator,
  Alert,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { GroupContext } from '../context/GroupContext';
import { LocationContext } from '../context/LocationContext';

const FindGroupsScreen = ({ navigation, route }) => {
  const { findGroups, joinExistingGroup } = useContext(GroupContext);
  const { currentLocation, calculateDistance } = useContext(LocationContext);
  
  const [destination, setDestination] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [isJoining, setIsJoining] = useState(false);
  const [matchingGroups, setMatchingGroups] = useState([]);
  const [joiningGroupId, setJoiningGroupId] = useState(null);

  useEffect(() => {
    if (route.params?.destination) {
      setDestination(route.params.destination);
      searchGroups(route.params.destination);
    } else {
      navigation.navigate('SetDestination', { returnTo: 'FindGroups' });
    }
  }, [route.params]);

  const searchGroups = async (dest) => {
    if (!dest) {
      return;
    }

    setIsLoading(true);
    try {
      const criteria = {
        destination: dest,
        destinationGeohash: dest.geohash,
      };

      const result = await findGroups(criteria);
      
      if (result.success && result.groups) {
        // Sort groups by proximity to user's current location
        const sortedGroups = [...result.groups].sort((a, b) => {
          const distanceA = calculateDistance(currentLocation, a.startingPoint);
          const distanceB = calculateDistance(currentLocation, b.startingPoint);
          return distanceA - distanceB;
        });
        
        setMatchingGroups(sortedGroups);
      } else {
        setMatchingGroups([]);
      }
    } catch (error) {
      console.error('Search groups error:', error);
      Alert.alert('Error', 'Failed to search for groups');
    } finally {
      setIsLoading(false);
    }
  };

  const handleJoinGroup = async (groupId) => {
    setIsJoining(true);
    setJoiningGroupId(groupId);
    
    try {
      const result = await joinExistingGroup(groupId);
      
      if (result.success) {
        navigation.navigate('GroupDetails', { groupId });
      } else {
        Alert.alert('Error', result.error || 'Failed to join group');
      }
    } catch (error) {
      console.error('Join group error:', error);
      Alert.alert('Error', 'An unexpected error occurred');
    } finally {
      setIsJoining(false);
      setJoiningGroupId(null);
    }
  };

  const handleCreateGroup = () => {
    if (destination) {
      navigation.navigate('CreateGroup', { destination });
    } else {
      navigation.navigate('SetDestination', { returnTo: 'CreateGroup' });
    }
  };

  const renderGroupItem = ({ item }) => {
    const departureTime = new Date(item.departureTime);
    const formattedTime = departureTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    const formattedDate = departureTime.toLocaleDateString();
    
    return (
      <TouchableOpacity 
        style={styles.groupItem}
        onPress={() => handleJoinGroup(item.$id)}
        disabled={isJoining}
      >
        <View style={styles.groupHeader}>
          <Text style={styles.groupName}>{item.name}</Text>
          <View style={[
            styles.statusBadge,
            item.status === 'open' ? styles.openStatus : styles.fullStatus
          ]}>
            <Text style={styles.statusText}>{item.status === 'open' ? 'Open' : 'Full'}</Text>
          </View>
        </View>
        
        <View style={styles.groupDetails}>
          <View style={styles.detailItem}>
            <Ionicons name="calendar" size={16} color="#7c4dff" />
            <Text style={styles.detailText}>{formattedDate} at {formattedTime}</Text>
          </View>
          
          <View style={styles.detailItem}>
            <Ionicons name="people" size={16} color="#7c4dff" />
            <Text style={styles.detailText}>{item.memberCount} / {item.maxSize} members</Text>
          </View>
          
          <View style={styles.detailItem}>
            <Ionicons name={item.vehicleType === 'car' ? 'car' : 'bicycle'} size={16} color="#7c4dff" />
            <Text style={styles.detailText}>
              {item.vehicleType === 'car' ? 'Car' : item.vehicleType === 'bike' ? 'Bike' : 'Any vehicle'}
            </Text>
          </View>
        </View>
        
        <View style={styles.joinButtonContainer}>
          {isJoining && joiningGroupId === item.$id ? (
            <ActivityIndicator size="small" color="#7c4dff" />
          ) : (
            <TouchableOpacity 
              style={styles.joinButton}
              onPress={() => handleJoinGroup(item.$id)}
              disabled={item.status !== 'open' || isJoining}
            >
              <Text style={styles.joinButtonText}>Join</Text>
            </TouchableOpacity>
          )}
        </View>
      </TouchableOpacity>
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <TouchableOpacity 
          style={styles.backButton}
          onPress={() => navigation.goBack()}
        >
          <Ionicons name="arrow-back" size={24} color="#1b1d28" />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>Find Groups</Text>
        <View style={styles.

No Output

Run the code to generate an output.

Please recreate the UI shown in the attached Figma frame as accurately as possible.

Carvaan.png

345d ago

Mobile Navigation App UI Recreation

I'll recreate the mobile app UI from the Figma design using Next.js and Tailwind CSS.

This implementation recreates the mobile navigation app UI from the Figma design with the following features:

Status Bar - Shows the time and status icons at the top
Header - Includes the hamburger menu, welcome message, and profile icon
Current Location - Displays the current location with a purple pin icon
Map View - Shows a map with various location markers (bus, shopping, restaurant, building)
Search Bar - Includes a red location pin and search input field
Quick Options - "Choose a saved place" and "Set destination on map" with appropriate icons
Promo Card - Black promotional card with the "New on the town" message
Bottom Navigation - Tab bar with Home (active), History, and Account options

The UI is fully responsive and matches the design from the Figma frame. I've used the colors from the provided context and Lucide React icons to match the design as closely as possible.

345d ago

Show full message

345d ago

React Native Navigation App with Expo and Appwrite

I'll create a React Native application using Expo that replicates the UI design from the Figma frame, with Appwrite integration for backend services.

Let me provide a comprehensive implementation that follows the design and includes all the necessary components and functionality.

NavigationApp

App.js

Now let's set up the Appwrite context to handle authentication and data storage:

NavigationApp

src/context/AppwriteContext.js

Let's create a location context to manage location data:

NavigationApp

src/context/LocationContext.js

Now let's set up the navigation:

NavigationApp

src/navigation/AppNavigator.js

Now let's implement the main HomeScreen that matches the Figma design:

NavigationApp

src/screens/HomeScreen.js

Let's implement the SavedPlacesScreen:

NavigationApp

src/screens/SavedPlacesScreen.js

Now let's implement the SetDestinationScreen:

NavigationApp

src/screens/SetDestinationScreen.js

Let's implement the HistoryScreen:

NavigationApp

src/screens/HistoryScreen.js

Let's implement the AccountScreen:

NavigationApp

src/screens/AccountScreen.js

Let's implement the LoginScreen:

NavigationApp

src/screens/LoginScreen.js

Finally, let's implement the RegisterScreen:

NavigationApp

src/screens/RegisterScreen.js

Now let's create a package.json file to specify the dependencies:

NavigationApp

package.json

Finally, let's create an app.json file for Expo configuration:

NavigationApp

app.json

Summary

I've created a complete React Native application using Expo that replicates the UI design from the Figma frame. The application includes:

Authentication System:
- Login and registration screens
- Integration with Appwrite for user management
Navigation:
- Bottom tab navigation (Home, History, Account)
- Stack navigation for nested screens
Home Screen:
- Current location display
- Interactive map with markers
- Search functionality
- Quick access options (saved places, set destination)
- Promotional card
Additional Screens:
- Saved Places screen
- Set Destination screen
- History screen with trip logs
- Account screen with user profile and settings
Context Providers:
- AppwriteContext for backend services
- LocationContext for location management

To run this application:

Set up an Appwrite project and replace the placeholder values in the AppwriteContext.js file
Get a Google Maps API key and add it to the app.json file
Run npm install to install dependencies
Run expo start to launch the application

The application is now ready for further customization and feature development.

345d ago

Modify the above frontend implementation and anything else related to successfully developing this app but specifically ensure that the figma design is implemented spectacularly without any errors. I've attached the whole guide containing the backend implementation for this app on appwrite so that you gett some context on the tech stack and other tools used to develop this app i.e. logic as well as steps to implement the frontend aptly. Here's the reference prompt again: Develop a React Native frontend application using Expo and Appwrite, replicating the UI design specified in the attached Figma frame. The implementation should accurately translate all cards and screens present in the Figma project into functional React Native components. Ensure that the application's structure is modular and maintainable, with clear separation of concerns. The UI should be responsive and adapt to various screen sizes. Integrate Appwrite for backend services, including user authentication, data storage, and any other relevant features as indicated by the Figma design. The final product should be a fully functional React Native application that mirrors the visual and interactive elements of the provided Figma design. The screens must be converted to code in a sequential order.
Here's a clear description of the features the app must contain:

Carpooling App: Destination-First Group Pairing System

A step-by-step implementation guide using Appwrite for exact destination matching

1. Project Overview

Core Objective

Key Technical Components

Frontend: React Native (Expo) for cross-platform UI
Backend: Appwrite for database, authentication, and real-time updates
Mapping: Google Places API (destination input) + Maps Static API (meeting points)
Geo Calculations: geolib for distance/radius checks

Critical Requirements

Destination Precision: Users must share identical destination coordinates (via 6-character geohash)
Real-Time Sync: Appwrite’s database listeners for instant group updates
No Compromises: Strict "same destination" rule overrides all other filters

2. Step-by-Step Pairing Implementation

Phase 1: User Input & Validation

A. Destination Locking

Users enter destination via Google Places Autocomplete.
System converts the selected location to:
- Exact coordinates (latitude/longitude)
- 6-character geohash (covers ~0.61 km² area)

B. Travel Preferences

Departure Window: 15-minute slots (e.g., 8:00-8:15 AM)
Group Filters:
- Vehicle type (Car/Bike)
- Gender preference (Male/Female/Any)
- Maximum group size (2-5 people)

Phase 2: Matching Algorithm Workflow

A. Appwrite Database Query
The system searches existing groups using these criteria:

Destination Match:
- Compare 6-character geohash of all active rides
Time Compatibility:
- Departure window must overlap with user’s selected time
Capacity Check:
- Groups must have available seats
Preference Alignment:
- Gender filters strictly enforced if specified

B. Prioritization Logic

Proximity First: Groups closest to user’s start point rank higher
Time Urgency: Earlier departure times prioritized for same-day rides
Group Size: Nearly full groups (e.g., 3/4 seats filled) get priority

Phase 3: Group Formation

Option A: Join Existing Group

User selects a matched group from the list.
System updates Appwrite documents:
- Add user to members array
- Decrease availableSeats count
Group status changes to "Full" if capacity reached.

Option B: Create New Group

Triggers when no matches exist after 3 query attempts.
New Appwrite document created with:
- Exact destination coordinates + geohash
- User-set departure window
- Initial member list (creator only)

Phase 4: Real-Time Coordination

A. Live Updates

Appwrite’s database subscriptions notify all members about:
- New joiners
- Departure time changes
- Group status (Open/Full)

B. Meeting Point Calculation

System computes central meeting location using:
- All members’ starting coordinates
- geolib library’s midpoint function
Displayed via Google Maps Static image in group details.

Phase 5: Edge Case Management

3. Implementation Tools Breakdown

4. Critical Implementation Checklist

Appwrite Setup
- Create rides collection with geohash-indexed documents
- Configure database security rules for member edits
Geo-Precision Layer
- Implement 6-character geohash conversion for all destinations
- Add validation to prevent approximate matches
Matching Engine
- Build query builder with exact geohash comparison
- Integrate proximity-based ranking algorithm
Testing Protocol
- Validate group merging logic for nearby destinations
- Stress-test real-time updates with 50+ concurrent users

Show full message

Complete Guide to Setting Up Appwrite for Carvaan.pdf

345d ago

import React, { useState, useContext, useEffect } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  FlatList,
  ActivityIndicator,
  Alert,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { GroupContext } from '../context/GroupContext';
import { LocationContext } from '../context/LocationContext';

const FindGroupsScreen = ({ navigation, route }) => {
  const { findGroups, joinExistingGroup } = useContext(GroupContext);
  const { currentLocation, calculateDistance } = useContext(LocationContext);
  
  const [destination, setDestination] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [isJoining, setIsJoining] = useState(false);
  const [matchingGroups, setMatchingGroups] = useState([]);
  const [joiningGroupId, setJoiningGroupId] = useState(null);

  useEffect(() => {
    if (route.params?.destination) {
      setDestination(route.params.destination);
      searchGroups(route.params.destination);
    } else {
      navigation.navigate('SetDestination', { returnTo: 'FindGroups' });
    }
  }, [route.params]);

  const searchGroups = async (dest) => {
    if (!dest) {
      return;
    }

    setIsLoading(true);
    try {
      const criteria = {
        destination: dest,
        destinationGeohash: dest.geohash,
      };

      const result = await findGroups(criteria);
      
      if (result.success && result.groups) {
        // Sort groups by proximity to user's current location
        const sortedGroups = [...result.groups].sort((a, b) => {
          const distanceA = calculateDistance(currentLocation, a.startingPoint);
          const distanceB = calculateDistance(currentLocation, b.startingPoint);
          return distanceA - distanceB;
        });
        
        setMatchingGroups(sortedGroups);
      } else {
        setMatchingGroups([]);
      }
    } catch (error) {
      console.error('Search groups error:', error);
      Alert.alert('Error', 'Failed to search for groups');
    } finally {
      setIsLoading(false);
    }
  };

  const handleJoinGroup = async (groupId) => {
    setIsJoining(true);
    setJoiningGroupId(groupId);
    
    try {
      const result = await joinExistingGroup(groupId);
      
      if (result.success) {
        navigation.navigate('GroupDetails', { groupId });
      } else {
        Alert.alert('Error', result.error || 'Failed to join group');
      }
    } catch (error) {
      console.error('Join group error:', error);
      Alert.alert('Error', 'An unexpected error occurred');
    } finally {
      setIsJoining(false);
      setJoiningGroupId(null);
    }
  };

  const handleCreateGroup = () => {
    if (destination) {
      navigation.navigate('CreateGroup', { destination });
    } else {
      navigation.navigate('SetDestination', { returnTo: 'CreateGroup' });
    }
  };

  const renderGroupItem = ({ item }) => {
    const departureTime = new Date(item.departureTime);
    const formattedTime = departureTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    const formattedDate = departureTime.toLocaleDateString();
    
    return (
      <TouchableOpacity 
        style={styles.groupItem}
        onPress={() => handleJoinGroup(item.$id)}
        disabled={isJoining}
      >
        <View style={styles.groupHeader}>
          <Text style={styles.groupName}>{item.name}</Text>
          <View style={[
            styles.statusBadge,
            item.status === 'open' ? styles.openStatus : styles.fullStatus
          ]}>
            <Text style={styles.statusText}>{item.status === 'open' ? 'Open' : 'Full'}</Text>
          </View>
        </View>
        
        <View style={styles.groupDetails}>
          <View style={styles.detailItem}>
            <Ionicons name="calendar" size={16} color="#7c4dff" />
            <Text style={styles.detailText}>{formattedDate} at {formattedTime}</Text>
          </View>
          
          <View style={styles.detailItem}>
            <Ionicons name="people" size={16} color="#7c4dff" />
            <Text style={styles.detailText}>{item.memberCount} / {item.maxSize} members</Text>
          </View>
          
          <View style={styles.detailItem}>
            <Ionicons name={item.vehicleType === 'car' ? 'car' : 'bicycle'} size={16} color="#7c4dff" />
            <Text style={styles.detailText}>
              {item.vehicleType === 'car' ? 'Car' : item.vehicleType === 'bike' ? 'Bike' : 'Any vehicle'}
            </Text>
          </View>
        </View>
        
        <View style={styles.joinButtonContainer}>
          {isJoining && joiningGroupId === item.$id ? (
            <ActivityIndicator size="small" color="#7c4dff" />
          ) : (
            <TouchableOpacity 
              style={styles.joinButton}
              onPress={() => handleJoinGroup(item.$id)}
              disabled={item.status !== 'open' || isJoining}
            >
              <Text style={styles.joinButtonText}>Join</Text>
            </TouchableOpacity>
          )}
        </View>
      </TouchableOpacity>
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <TouchableOpacity 
          style={styles.backButton}
          onPress={() => navigation.goBack()}
        >
          <Ionicons name="arrow-back" size={24} color="#1b1d28" />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>Find Groups</Text>
        <View style={styles.

No Output

Run the code to generate an output.