Add expo project

app/.gitignore

@@ -0,0 +1,39 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+.kotlin/
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+app-example

app/.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit",
+    "source.organizeImports": "explicit",
+    "source.sortMembers": "explicit"
+  }
+}

app/README.md

@@ -0,0 +1,58 @@
+# Calendi Mobile App
+
+A React Native mobile app version of the Calendi application built with Expo.
+
+## Features
+
+- Calendar view with events
+- Event management (create, view, edit, delete)
+- User profile management
+- Responsive UI for iOS and Android
+
+## Setup Instructions
+
+### Prerequisites
+
+- Node.js (16.x or newer)
+- npm or yarn
+- Expo CLI (`npm install -g expo-cli`)
+- iOS Simulator (for Mac users) or Android Emulator
+
+### Installation
+
+1. Clone this repository
+2. Navigate to the app directory
+3. Install dependencies:
+
+```bash
+npm install
+# or
+yarn install
+```
+
+### Running the App
+
+```bash
+npm start
+# or
+yarn start
+```
+
+This will start the Expo development server. You can run the app on:
+- iOS Simulator (press `i`)
+- Android Emulator (press `a`)
+- Your physical device by scanning the QR code with the Expo Go app
+
+## Project Structure
+
+- `app/` - Expo Router app directory with screens
+- `components/` - Reusable UI components
+- `constants/` - App constants and theme
+- `lib/` - Domain logic and services
+  - `api/` - API service for backend communication
+  - `models/` - Data models
+  - `utils/` - Utility functions
+
+## Backend Connection
+
+The app is configured to connect to a backend API. Update the API URL in `lib/api/apiService.js` to point to your backend server.

app/app.json

@@ -0,0 +1,42 @@
+{
+  "expo": {
+    "name": "app",
+    "slug": "app",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "app",
+    "userInterfaceStyle": "automatic",
+    "newArchEnabled": true,
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "edgeToEdgeEnabled": true
+    },
+    "web": {
+      "bundler": "metro",
+      "output": "static",
+      "favicon": "./assets/images/favicon.png"
+    },
+    "plugins": [
+      "expo-router",
+      [
+        "expo-splash-screen",
+        {
+          "image": "./assets/images/splash-icon.png",
+          "imageWidth": 200,
+          "resizeMode": "contain",
+          "backgroundColor": "#ffffff"
+        }
+      ]
+    ],
+    "experiments": {
+      "typedRoutes": true
+    }
+  }
+}

app/app/(tabs)/_layout.js

@@ -0,0 +1,142 @@
+import React from 'react';
+import { Tabs } from 'expo-router';
+import { View, Text, StyleSheet } from 'react-native';
+import { FontAwesome } from '@expo/vector-icons';
+import Colors from '../../constants';
+
+/**
+ * Custom styled tab bar more similar to frontend styling
+ */
+function CustomTabBar({ state, descriptors, navigation }) {
+  return (
+    <View style={styles.tabContainer}>
+      {state.routes.map((route, index) => {
+        const { options } = descriptors[route.key];
+        const label = options.title || route.name;
+        const isFocused = state.index === index;
+
+        const onPress = () => {
+          const event = navigation.emit({
+            type: 'tabPress',
+            target: route.key,
+            canPreventDefault: true,
+          });
+
+          if (!isFocused && !event.defaultPrevented) {
+            navigation.navigate(route.name);
+          }
+        };
+
+        let iconName;
+        if (route.name === 'index') {
+          iconName = 'home';
+        } else if (route.name === 'calendar') {
+          iconName = 'calendar';
+        } else if (route.name === 'profile') {
+          iconName = 'user';
+        }
+
+        return (
+          <View key={route.key} style={[styles.tabItem, isFocused && styles.tabItemActive]}>
+            <FontAwesome
+              name={iconName}
+              size={20}
+              color={isFocused ? Colors.primary : Colors.inactive}
+              onPress={onPress}
+            />
+            <Text style={[
+              styles.tabLabel,
+              { color: isFocused ? Colors.primary : Colors.inactive }
+            ]}>
+              {label}
+            </Text>
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+/**
+ * Bottom tab navigation similar to the frontend
+ */
+export default function TabLayout() {
+  return (
+    <Tabs
+      screenOptions={{
+        headerStyle: {
+          backgroundColor: Colors.headerBg,
+          elevation: 0,
+          shadowOpacity: 0,
+          borderBottomWidth: 1,
+          borderBottomColor: Colors.divider,
+        },
+        headerTitleStyle: {
+          fontWeight: '600',
+          color: Colors.text,
+          fontSize: 18,
+        },
+        tabBarStyle: {
+          height: 60,
+          paddingBottom: 8,
+          paddingTop: 8,
+          backgroundColor: Colors.card,
+          borderTopWidth: 1,
+          borderTopColor: Colors.divider,
+        },
+        tabBarActiveTintColor: Colors.primary,
+        tabBarInactiveTintColor: Colors.inactive,
+      }}
+      tabBar={props => <CustomTabBar {...props} />}
+    >
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: 'Home',
+          headerShown: true,
+        }}
+      />
+      <Tabs.Screen
+        name="calendar"
+        options={{
+          title: 'Calendar',
+          headerShown: true,
+        }}
+      />
+      <Tabs.Screen
+        name="profile"
+        options={{
+          title: 'Profile',
+          headerShown: true,
+        }}
+      />
+    </Tabs>
+  );
+}
+
+const styles = StyleSheet.create({
+  tabContainer: {
+    flexDirection: 'row',
+    height: 60,
+    backgroundColor: Colors.card,
+    borderTopWidth: 1,
+    borderTopColor: Colors.divider,
+    paddingBottom: 5,
+  },
+  tabItem: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 8,
+  },
+  tabItemActive: {
+    borderTopWidth: 2,
+    borderTopColor: Colors.primary,
+    marginTop: -2,
+  },
+  tabLabel: {
+    fontSize: 12,
+    marginTop: 4,
+    fontWeight: '500',
+  },
+}); 

app/app/(tabs)/calendar.js

@@ -0,0 +1,214 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, StyleSheet, FlatList, TouchableOpacity, ActivityIndicator } from 'react-native';
+import { Stack, useRouter } from 'expo-router';
+import CalendarView from '../../components/ui/Calendar/CalendarView';
+import apiService from '../../lib/api/apiService';
+import Colors from '../../constants';
+
+export default function CalendarScreen() {
+  const [events, setEvents] = useState([]);
+  const [selectedDate, setSelectedDate] = useState(new Date());
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const router = useRouter();
+
+  useEffect(() => {
+    loadEvents();
+  }, []);
+
+  const loadEvents = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const eventsList = await apiService.getEvents();
+      setEvents(eventsList);
+    } catch (err) {
+      setError('Failed to load events. Please try again.');
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSelectDate = (date) => {
+    setSelectedDate(date);
+  };
+
+  const handleEventPress = (eventId) => {
+    router.push(`/event-details/${eventId}`);
+  };
+
+  const handleAddEvent = () => {
+    router.push('/edit-event');
+  };
+
+  const filteredEvents = events.filter(event => {
+    const eventDate = new Date(event.startDate);
+    return eventDate.getDate() === selectedDate.getDate() &&
+           eventDate.getMonth() === selectedDate.getMonth() &&
+           eventDate.getFullYear() === selectedDate.getFullYear();
+  });
+
+  const renderEventItem = ({ item }) => (
+    <TouchableOpacity 
+      style={styles.eventItem}
+      onPress={() => handleEventPress(item.id)}
+    >
+      <View style={styles.eventTime}>
+        <Text style={styles.eventTimeText}>
+          {item.isFullDay() 
+            ? 'All day'
+            : new Date(item.startDate).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+          }
+        </Text>
+      </View>
+      <View style={styles.eventContent}>
+        <Text style={styles.eventTitle}>{item.title}</Text>
+        {item.location && (
+          <Text style={styles.eventLocation}>{item.location}</Text>
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+
+  return (
+    <View style={styles.container}>
+      <Stack.Screen 
+        options={{
+          title: 'Calendar',
+          headerShown: true,
+          headerRight: () => (
+            <TouchableOpacity onPress={handleAddEvent} style={styles.addButton}>
+              <Text style={styles.addButtonText}>+</Text>
+            </TouchableOpacity>
+          ),
+        }} 
+      />
+      
+      <CalendarView 
+        onSelectDate={handleSelectDate} 
+        events={events}
+      />
+
+      <View style={styles.eventsContainer}>
+        <Text style={styles.dateTitle}>
+          {selectedDate.toLocaleDateString(undefined, { weekday: 'long', month: 'long', day: 'numeric' })}
+        </Text>
+        
+        {loading ? (
+          <ActivityIndicator size="large" color={Colors.primary} />
+        ) : error ? (
+          <Text style={styles.errorText}>{error}</Text>
+        ) : filteredEvents.length > 0 ? (
+          <FlatList
+            data={filteredEvents}
+            renderItem={renderEventItem}
+            keyExtractor={item => item.id.toString()}
+            contentContainerStyle={styles.eventsList}
+          />
+        ) : (
+          <View style={styles.noEventsContainer}>
+            <Text style={styles.noEventsText}>No events for this day</Text>
+            <TouchableOpacity 
+              style={styles.createEventButton}
+              onPress={handleAddEvent}
+            >
+              <Text style={styles.createEventText}>Create Event</Text>
+            </TouchableOpacity>
+          </View>
+        )}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.background,
+  },
+  addButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: Colors.primary,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 10,
+  },
+  addButtonText: {
+    color: 'white',
+    fontSize: 24,
+    fontWeight: 'bold',
+    lineHeight: 24,
+  },
+  eventsContainer: {
+    flex: 1,
+    padding: 16,
+  },
+  dateTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginBottom: 16,
+  },
+  eventsList: {
+    paddingBottom: 20,
+  },
+  eventItem: {
+    flexDirection: 'row',
+    backgroundColor: Colors.card,
+    borderRadius: 8,
+    padding: 12,
+    marginBottom: 8,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.1,
+    shadowRadius: 1,
+    elevation: 2,
+  },
+  eventTime: {
+    marginRight: 12,
+    width: 60,
+  },
+  eventTimeText: {
+    fontSize: 14,
+    color: Colors.secondary,
+  },
+  eventContent: {
+    flex: 1,
+  },
+  eventTitle: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    marginBottom: 4,
+  },
+  eventLocation: {
+    fontSize: 14,
+    color: 'gray',
+  },
+  noEventsContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  noEventsText: {
+    fontSize: 16,
+    color: 'gray',
+    marginBottom: 16,
+  },
+  createEventButton: {
+    backgroundColor: Colors.primary,
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    borderRadius: 8,
+  },
+  createEventText: {
+    color: 'white',
+    fontWeight: 'bold',
+  },
+  errorText: {
+    color: Colors.error,
+    textAlign: 'center',
+    marginTop: 20,
+  },
+}); 

app/app/(tabs)/index.js

@@ -0,0 +1,285 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, StyleSheet, FlatList, TouchableOpacity, ActivityIndicator, SafeAreaView } from 'react-native';
+import { Stack, useRouter } from 'expo-router';
+import { FontAwesome } from '@expo/vector-icons';
+import Colors from '../../constants';
+import apiService from '../../lib/api/apiService';
+
+export default function HomeScreen() {
+  const [events, setEvents] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const router = useRouter();
+
+  useEffect(() => {
+    loadEvents();
+  }, []);
+
+  const loadEvents = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const eventsList = await apiService.getEvents();
+      setEvents(eventsList);
+    } catch (err) {
+      setError('Failed to load events. Please try again.');
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleEventPress = (eventId) => {
+    router.push(`/event-details/${eventId}`);
+  };
+
+  const handleAddEvent = () => {
+    router.push('/edit-event');
+  };
+
+  const renderEventCard = ({ item }) => {
+    const eventDate = new Date(item.startDate);
+    const now = new Date();
+    const isUpcoming = eventDate > now;
+    
+    return (
+      <TouchableOpacity 
+        style={styles.eventCard}
+        onPress={() => handleEventPress(item.id)}
+        activeOpacity={0.7}
+      >
+        <View style={[
+          styles.dateBox, 
+          isUpcoming ? styles.upcomingDateBox : styles.pastDateBox
+        ]}>
+          <Text style={styles.dateMonth}>
+            {eventDate.toLocaleString('default', { month: 'short' }).toUpperCase()}
+          </Text>
+          <Text style={styles.dateDay}>{eventDate.getDate()}</Text>
+        </View>
+        <View style={styles.eventDetails}>
+          <Text style={styles.eventTitle} numberOfLines={1}>{item.title}</Text>
+          <View style={styles.eventMeta}>
+            <FontAwesome name="clock-o" size={14} color={Colors.secondary} style={styles.eventIcon} />
+            <Text style={styles.eventTime}>
+              {item.isFullDay() 
+                ? 'All day'
+                : eventDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+              }
+            </Text>
+          </View>
+          {item.location && (
+            <View style={styles.eventMeta}>
+              <FontAwesome name="map-marker" size={14} color={Colors.secondary} style={styles.eventIcon} />
+              <Text style={styles.eventLocation} numberOfLines={1}>
+                {item.location}
+              </Text>
+            </View>
+          )}
+        </View>
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <Stack.Screen 
+        options={{
+          title: 'Calendi',
+          headerTitleStyle: styles.headerTitle,
+          headerRight: () => (
+            <TouchableOpacity onPress={handleAddEvent} style={styles.addButton}>
+              <FontAwesome name="plus" size={16} color="#fff" />
+            </TouchableOpacity>
+          ),
+        }} 
+      />
+
+      <View style={styles.headerContainer}>
+        <Text style={styles.screenTitle}>Upcoming Events</Text>
+      </View>
+      
+      {loading ? (
+        <View style={styles.centeredContainer}>
+          <ActivityIndicator size="large" color={Colors.primary} />
+        </View>
+      ) : error ? (
+        <View style={styles.centeredContainer}>
+          <Text style={styles.errorText}>{error}</Text>
+          <TouchableOpacity style={styles.retryButton} onPress={loadEvents}>
+            <Text style={styles.retryButtonText}>Retry</Text>
+          </TouchableOpacity>
+        </View>
+      ) : events.length > 0 ? (
+        <FlatList
+          data={events}
+          renderItem={renderEventCard}
+          keyExtractor={item => item.id.toString()}
+          contentContainerStyle={styles.eventsList}
+          showsVerticalScrollIndicator={false}
+        />
+      ) : (
+        <View style={styles.centeredContainer}>
+          <FontAwesome name="calendar-o" size={50} color={Colors.inactive} style={styles.emptyIcon} />
+          <Text style={styles.noEventsText}>No upcoming events</Text>
+          <TouchableOpacity 
+            style={styles.createEventButton}
+            onPress={handleAddEvent}
+          >
+            <Text style={styles.createEventText}>Create Event</Text>
+          </TouchableOpacity>
+        </View>
+      )}
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.background,
+  },
+  headerContainer: {
+    paddingHorizontal: 16,
+    paddingTop: 12,
+    paddingBottom: 8,
+    backgroundColor: Colors.headerBg,
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: Colors.text,
+  },
+  screenTitle: {
+    fontSize: 22,
+    fontWeight: '700',
+    color: Colors.text,
+  },
+  addButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: Colors.primary,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 16,
+    shadowColor: Colors.cardShadow,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.3,
+    shadowRadius: 2,
+    elevation: 3,
+  },
+  centeredContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  eventsList: {
+    padding: 16,
+  },
+  eventCard: {
+    flexDirection: 'row',
+    backgroundColor: Colors.card,
+    borderRadius: 10,
+    marginBottom: 16,
+    shadowColor: Colors.cardShadow,
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: 0.1,
+    shadowRadius: 6,
+    elevation: 3,
+    overflow: 'hidden',
+    borderWidth: 1,
+    borderColor: Colors.border,
+  },
+  dateBox: {
+    width: 70,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 12,
+  },
+  upcomingDateBox: {
+    backgroundColor: Colors.primary,
+  },
+  pastDateBox: {
+    backgroundColor: Colors.inactive,
+  },
+  dateMonth: {
+    color: '#fff',
+    fontWeight: '600',
+    fontSize: 13,
+    letterSpacing: 1,
+  },
+  dateDay: {
+    color: '#fff',
+    fontWeight: 'bold',
+    fontSize: 24,
+    marginTop: 2,
+  },
+  eventDetails: {
+    flex: 1,
+    padding: 16,
+    justifyContent: 'center',
+  },
+  eventTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    marginBottom: 8,
+    color: Colors.text,
+  },
+  eventMeta: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 6,
+  },
+  eventIcon: {
+    marginRight: 6,
+  },
+  eventTime: {
+    fontSize: 14,
+    color: Colors.secondary,
+  },
+  eventLocation: {
+    fontSize: 14,
+    color: Colors.secondary,
+  },
+  emptyIcon: {
+    marginBottom: 16,
+  },
+  noEventsText: {
+    fontSize: 16,
+    color: Colors.placeholder,
+    marginBottom: 20,
+  },
+  createEventButton: {
+    backgroundColor: Colors.primary,
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 8,
+    shadowColor: Colors.cardShadow,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 3,
+    elevation: 2,
+  },
+  createEventText: {
+    color: Colors.buttonText,
+    fontWeight: '600',
+    fontSize: 15,
+  },
+  errorText: {
+    color: Colors.error,
+    textAlign: 'center',
+    marginBottom: 20,
+  },
+  retryButton: {
+    backgroundColor: Colors.primary,
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 8,
+  },
+  retryButtonText: {
+    color: Colors.buttonText,
+    fontWeight: '600',
+  },
+}); 

app/app/(tabs)/profile.js

@@ -0,0 +1,322 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, ActivityIndicator, Image, TextInput, ScrollView, Alert } from 'react-native';
+import { Stack } from 'expo-router';
+import apiService from '../../lib/api/apiService';
+import Colors from '../../constants';
+
+export default function ProfileScreen() {
+  const [profile, setProfile] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [isEditing, setIsEditing] = useState(false);
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    bio: '',
+  });
+
+  useEffect(() => {
+    loadProfile();
+  }, []);
+
+  const loadProfile = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const userData = await apiService.getUserProfile();
+      setProfile(userData);
+      setFormData({
+        name: userData.name || '',
+        email: userData.email || '',
+        bio: userData.bio || '',
+      });
+    } catch (err) {
+      setError('Failed to load profile data. Please try again.');
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleInputChange = (field, value) => {
+    setFormData({
+      ...formData,
+      [field]: value
+    });
+  };
+
+  const handleSave = async () => {
+    try {
+      setLoading(true);
+      await apiService.updateUserProfile(formData);
+      setProfile({
+        ...profile,
+        ...formData
+      });
+      setIsEditing(false);
+      Alert.alert('Success', 'Profile updated successfully!');
+    } catch (err) {
+      Alert.alert('Error', 'Failed to update profile. Please try again.');
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setFormData({
+      name: profile.name || '',
+      email: profile.email || '',
+      bio: profile.bio || '',
+    });
+    setIsEditing(false);
+  };
+
+  if (loading && !profile) {
+    return (
+      <View style={styles.centeredContainer}>
+        <ActivityIndicator size="large" color={Colors.primary} />
+      </View>
+    );
+  }
+
+  if (error && !profile) {
+    return (
+      <View style={styles.centeredContainer}>
+        <Text style={styles.errorText}>{error}</Text>
+        <TouchableOpacity style={styles.retryButton} onPress={loadProfile}>
+          <Text style={styles.retryButtonText}>Retry</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView style={styles.container}>
+      <Stack.Screen 
+        options={{
+          title: 'Profile',
+          headerShown: true,
+          headerRight: () => (
+            <TouchableOpacity 
+              onPress={isEditing ? handleSave : () => setIsEditing(true)}
+              disabled={loading}
+            >
+              <Text style={styles.headerButton}>
+                {isEditing ? 'Save' : 'Edit'}
+              </Text>
+            </TouchableOpacity>
+          ),
+        }} 
+      />
+
+      {loading && (
+        <ActivityIndicator 
+          size="small" 
+          color={Colors.primary} 
+          style={styles.loadingIndicator} 
+        />
+      )}
+
+      <View style={styles.profileHeader}>
+        <Image 
+          source={{ uri: profile?.avatar || 'https://via.placeholder.com/150' }} 
+          style={styles.avatar}
+        />
+        <View style={styles.profileInfo}>
+          {isEditing ? (
+            <TextInput
+              style={styles.nameInput}
+              value={formData.name}
+              onChangeText={(text) => handleInputChange('name', text)}
+              placeholder="Name"
+            />
+          ) : (
+            <Text style={styles.name}>{profile?.name}</Text>
+          )}
+        </View>
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Email</Text>
+        {isEditing ? (
+          <TextInput
+            style={styles.input}
+            value={formData.email}
+            onChangeText={(text) => handleInputChange('email', text)}
+            keyboardType="email-address"
+          />
+        ) : (
+          <Text style={styles.sectionContent}>{profile?.email}</Text>
+        )}
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Bio</Text>
+        {isEditing ? (
+          <TextInput
+            style={[styles.input, styles.bioInput]}
+            value={formData.bio}
+            onChangeText={(text) => handleInputChange('bio', text)}
+            multiline
+            numberOfLines={4}
+          />
+        ) : (
+          <Text style={styles.sectionContent}>{profile?.bio || 'No bio provided'}</Text>
+        )}
+      </View>
+
+      {isEditing && (
+        <TouchableOpacity 
+          style={styles.cancelButton}
+          onPress={handleCancel}
+        >
+          <Text style={styles.cancelButtonText}>Cancel</Text>
+        </TouchableOpacity>
+      )}
+
+      <View style={styles.statsSection}>
+        <Text style={styles.sectionTitle}>Your Stats</Text>
+        <View style={styles.statsContainer}>
+          <View style={styles.statBox}>
+            <Text style={styles.statNumber}>{profile?.stats?.eventsCreated || 0}</Text>
+            <Text style={styles.statLabel}>Events Created</Text>
+          </View>
+          <View style={styles.statBox}>
+            <Text style={styles.statNumber}>{profile?.stats?.eventsAttended || 0}</Text>
+            <Text style={styles.statLabel}>Events Attended</Text>
+          </View>
+        </View>
+      </View>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.background,
+  },
+  centeredContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  loadingIndicator: {
+    marginTop: 10,
+  },
+  headerButton: {
+    color: Colors.primary,
+    fontSize: 16,
+    fontWeight: 'bold',
+    marginRight: 15,
+  },
+  profileHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 20,
+    backgroundColor: Colors.card,
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.border,
+  },
+  avatar: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    marginRight: 20,
+  },
+  profileInfo: {
+    flex: 1,
+  },
+  name: {
+    fontSize: 22,
+    fontWeight: 'bold',
+  },
+  nameInput: {
+    fontSize: 22,
+    fontWeight: 'bold',
+    padding: 5,
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.primary,
+  },
+  section: {
+    padding: 20,
+    backgroundColor: Colors.card,
+    marginBottom: 10,
+  },
+  sectionTitle: {
+    fontSize: 16,
+    color: 'gray',
+    marginBottom: 8,
+  },
+  sectionContent: {
+    fontSize: 16,
+  },
+  input: {
+    padding: 10,
+    borderWidth: 1,
+    borderColor: Colors.border,
+    borderRadius: 5,
+    fontSize: 16,
+  },
+  bioInput: {
+    height: 100,
+    textAlignVertical: 'top',
+  },
+  cancelButton: {
+    backgroundColor: Colors.background,
+    padding: 15,
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: Colors.error,
+    marginHorizontal: 20,
+    borderRadius: 5,
+    marginBottom: 20,
+  },
+  cancelButtonText: {
+    color: Colors.error,
+    fontWeight: 'bold',
+  },
+  errorText: {
+    color: Colors.error,
+    textAlign: 'center',
+    marginBottom: 20,
+  },
+  retryButton: {
+    backgroundColor: Colors.primary,
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    borderRadius: 8,
+  },
+  retryButtonText: {
+    color: 'white',
+    fontWeight: 'bold',
+  },
+  statsSection: {
+    padding: 20,
+    backgroundColor: Colors.card,
+    marginBottom: 30,
+  },
+  statsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    marginTop: 10,
+  },
+  statBox: {
+    alignItems: 'center',
+    padding: 15,
+    backgroundColor: Colors.background,
+    borderRadius: 10,
+    width: '45%',
+  },
+  statNumber: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: Colors.primary,
+  },
+  statLabel: {
+    marginTop: 5,
+    color: 'gray',
+  },
+}); 

app/app/_layout.js

@@ -0,0 +1,17 @@
+import { Slot, Stack } from 'expo-router';
+import { useColorScheme } from 'react-native';
+import { StatusBar } from 'expo-status-bar';
+
+export default function RootLayout() {
+  const colorScheme = useColorScheme();
+
+  return (
+    <>
+      <StatusBar style={colorScheme === 'dark' ? 'light' : 'dark'} />
+      <Stack>
+        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+        <Stack.Screen name="event-details/[id]" options={{ title: "Event Details" }} />
+      </Stack>
+    </>
+  );
+} 

app/app/event-details/[id].js

@@ -0,0 +1,337 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, StyleSheet, ActivityIndicator, ScrollView, TouchableOpacity, Alert, SafeAreaView } from 'react-native';
+import { Stack, useLocalSearchParams, useRouter } from 'expo-router';
+import { FontAwesome } from '@expo/vector-icons';
+import apiService from '../../lib/api/apiService';
+import Colors from '../../constants';
+
+export default function EventDetailsScreen() {
+  const { id } = useLocalSearchParams();
+  const router = useRouter();
+  const [event, setEvent] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    loadEvent();
+  }, [id]);
+
+  const loadEvent = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const eventData = await apiService.getEvent(id);
+      setEvent(eventData);
+    } catch (err) {
+      setError('Failed to load event details. Please try again.');
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleEditEvent = () => {
+    router.push(`/edit-event/${id}`);
+  };
+
+  const handleDeleteEvent = async () => {
+    Alert.alert(
+      'Delete Event',
+      'Are you sure you want to delete this event? This action cannot be undone.',
+      [
+        {
+          text: 'Cancel',
+          style: 'cancel',
+        },
+        {
+          text: 'Delete',
+          style: 'destructive',
+          onPress: async () => {
+            try {
+              setLoading(true);
+              await apiService.deleteEvent(id);
+              Alert.alert('Success', 'Event deleted successfully');
+              router.back();
+            } catch (err) {
+              Alert.alert('Error', 'Failed to delete event. Please try again.');
+              console.error(err);
+              setLoading(false);
+            }
+          },
+        },
+      ]
+    );
+  };
+
+  if (loading && !event) {
+    return (
+      <SafeAreaView style={styles.centeredContainer}>
+        <ActivityIndicator size="large" color={Colors.primary} />
+      </SafeAreaView>
+    );
+  }
+
+  if (error && !event) {
+    return (
+      <SafeAreaView style={styles.centeredContainer}>
+        <Text style={styles.errorText}>{error}</Text>
+        <TouchableOpacity style={styles.retryButton} onPress={loadEvent}>
+          <Text style={styles.retryButtonText}>Retry</Text>
+        </TouchableOpacity>
+      </SafeAreaView>
+    );
+  }
+
+  // Format the date display
+  const formattedDate = event?.getFormattedDate();
+  
+  // Determine if the event is in the future
+  const isUpcoming = event?.startDate > new Date();
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <Stack.Screen 
+        options={{
+          title: 'Event Details',
+          headerTitleStyle: styles.headerTitle,
+          headerLeft: () => (
+            <TouchableOpacity 
+              onPress={() => router.back()}
+              style={styles.backButton}
+              hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+            >
+              <FontAwesome name="chevron-left" size={16} color={Colors.primary} />
+            </TouchableOpacity>
+          ),
+          headerRight: () => (
+            <TouchableOpacity 
+              onPress={handleEditEvent}
+              disabled={loading}
+              style={styles.editButton}
+              hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+            >
+              <FontAwesome name="pencil" size={16} color={Colors.primary} />
+            </TouchableOpacity>
+          ),
+        }} 
+      />
+
+      {loading && (
+        <ActivityIndicator 
+          size="small" 
+          color={Colors.primary} 
+          style={styles.loadingIndicator} 
+        />
+      )}
+
+      <ScrollView contentContainerStyle={styles.scrollContent}>
+        <View style={[styles.statusBadge, isUpcoming ? styles.upcomingBadge : styles.pastBadge]}>
+          <Text style={styles.statusText}>
+            {isUpcoming ? 'Upcoming' : 'Past Event'}
+          </Text>
+        </View>
+        
+        <View style={styles.header}>
+          <Text style={styles.title}>{event?.title}</Text>
+        </View>
+
+        <View style={styles.metaInfoSection}>
+          <View style={styles.metaItem}>
+            <FontAwesome name="calendar" size={16} color={Colors.secondary} style={styles.metaIcon} />
+            <Text style={styles.date}>{formattedDate}</Text>
+          </View>
+        </View>
+
+        {event?.location && (
+          <View style={styles.section}>
+            <Text style={styles.sectionTitle}>Location</Text>
+            <View style={styles.metaItem}>
+              <FontAwesome name="map-marker" size={16} color={Colors.secondary} style={styles.metaIcon} />
+              <Text style={styles.sectionContent}>{event.location}</Text>
+            </View>
+          </View>
+        )}
+
+        {event?.description && (
+          <View style={styles.section}>
+            <Text style={styles.sectionTitle}>Description</Text>
+            <Text style={styles.sectionContent}>{event.description}</Text>
+          </View>
+        )}
+
+        <View style={styles.section}>
+          <Text style={styles.sectionTitle}>Organizer</Text>
+          <View style={styles.metaItem}>
+            <FontAwesome name="user" size={16} color={Colors.secondary} style={styles.metaIcon} />
+            <Text style={styles.sectionContent}>{event?.createdBy || 'Unknown'}</Text>
+          </View>
+        </View>
+
+        <TouchableOpacity 
+          style={styles.deleteButton}
+          onPress={handleDeleteEvent}
+          disabled={loading}
+        >
+          <FontAwesome name="trash" size={16} color={Colors.error} style={styles.deleteIcon} />
+          <Text style={styles.deleteButtonText}>Delete Event</Text>
+        </TouchableOpacity>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.background,
+  },
+  scrollContent: {
+    padding: 16,
+  },
+  centeredContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  loadingIndicator: {
+    marginTop: 10,
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: Colors.text,
+  },
+  backButton: {
+    marginLeft: 16,
+  },
+  editButton: {
+    marginRight: 16,
+  },
+  header: {
+    backgroundColor: Colors.card,
+    borderRadius: 10,
+    padding: 16,
+    marginBottom: 16,
+    shadowColor: Colors.cardShadow,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2,
+    borderWidth: 1,
+    borderColor: Colors.border,
+  },
+  statusBadge: {
+    alignSelf: 'flex-start',
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    borderRadius: 16,
+    marginBottom: 16,
+  },
+  upcomingBadge: {
+    backgroundColor: Colors.success,
+  },
+  pastBadge: {
+    backgroundColor: Colors.inactive,
+  },
+  statusText: {
+    color: '#fff',
+    fontWeight: '600',
+    fontSize: 12,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: Colors.text,
+    marginBottom: 8,
+  },
+  metaInfoSection: {
+    backgroundColor: Colors.card,
+    borderRadius: 10,
+    padding: 16,
+    marginBottom: 16,
+    shadowColor: Colors.cardShadow,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2,
+    borderWidth: 1,
+    borderColor: Colors.border,
+  },
+  metaItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: 4,
+  },
+  metaIcon: {
+    marginRight: 12,
+    width: 20,
+    textAlign: 'center',
+  },
+  date: {
+    fontSize: 16,
+    color: Colors.secondary,
+  },
+  section: {
+    backgroundColor: Colors.card,
+    borderRadius: 10,
+    padding: 16,
+    marginBottom: 16,
+    shadowColor: Colors.cardShadow,
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2,
+    borderWidth: 1,
+    borderColor: Colors.border,
+  },
+  sectionTitle: {
+    fontSize: 16,
+    color: Colors.text,
+    fontWeight: '600',
+    marginBottom: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.divider,
+    paddingBottom: 8,
+  },
+  sectionContent: {
+    fontSize: 16,
+    color: Colors.text,
+    lineHeight: 22,
+  },
+  deleteButton: {
+    flexDirection: 'row',
+    backgroundColor: Colors.background,
+    padding: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: Colors.error,
+    borderRadius: 8,
+    marginTop: 8,
+    marginBottom: 24,
+  },
+  deleteIcon: {
+    marginRight: 10,
+  },
+  deleteButtonText: {
+    color: Colors.error,
+    fontWeight: '600',
+    fontSize: 16,
+  },
+  errorText: {
+    color: Colors.error,
+    textAlign: 'center',
+    marginBottom: 20,
+  },
+  retryButton: {
+    backgroundColor: Colors.primary,
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 8,
+  },
+  retryButtonText: {
+    color: '#fff',
+    fontWeight: '600',
+  },
+}); 

app/app/index.js

@@ -0,0 +1,5 @@
+import { Redirect } from 'expo-router';
+
+export default function Index() {
+  return <Redirect href="/(tabs)" />;
+} 

app/components/Collapsible.tsx

@@ -0,0 +1,45 @@
+import { PropsWithChildren, useState } from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+
+import { ThemedText } from '@/components/ThemedText';
+import { ThemedView } from '@/components/ThemedView';
+import { IconSymbol } from '@/components/ui/IconSymbol';
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+
+export function Collapsible({ children, title }: PropsWithChildren & { title: string }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const theme = useColorScheme() ?? 'light';
+
+  return (
+    <ThemedView>
+      <TouchableOpacity
+        style={styles.heading}
+        onPress={() => setIsOpen((value) => !value)}
+        activeOpacity={0.8}>
+        <IconSymbol
+          name="chevron.right"
+          size={18}
+          weight="medium"
+          color={theme === 'light' ? Colors.light.icon : Colors.dark.icon}
+          style={{ transform: [{ rotate: isOpen ? '90deg' : '0deg' }] }}
+        />
+
+        <ThemedText type="defaultSemiBold">{title}</ThemedText>
+      </TouchableOpacity>
+      {isOpen && <ThemedView style={styles.content}>{children}</ThemedView>}
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  heading: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  content: {
+    marginTop: 6,
+    marginLeft: 24,
+  },
+});

app/components/ExternalLink.tsx

@@ -0,0 +1,24 @@
+import { Href, Link } from 'expo-router';
+import { openBrowserAsync } from 'expo-web-browser';
+import { type ComponentProps } from 'react';
+import { Platform } from 'react-native';
+
+type Props = Omit<ComponentProps<typeof Link>, 'href'> & { href: Href & string };
+
+export function ExternalLink({ href, ...rest }: Props) {
+  return (
+    <Link
+      target="_blank"
+      {...rest}
+      href={href}
+      onPress={async (event) => {
+        if (Platform.OS !== 'web') {
+          // Prevent the default behavior of linking to the default browser on native.
+          event.preventDefault();
+          // Open the link in an in-app browser.
+          await openBrowserAsync(href);
+        }
+      }}
+    />
+  );
+}

app/components/HapticTab.tsx

@@ -0,0 +1,18 @@
+import { BottomTabBarButtonProps } from '@react-navigation/bottom-tabs';
+import { PlatformPressable } from '@react-navigation/elements';
+import * as Haptics from 'expo-haptics';
+
+export function HapticTab(props: BottomTabBarButtonProps) {
+  return (
+    <PlatformPressable
+      {...props}
+      onPressIn={(ev) => {
+        if (process.env.EXPO_OS === 'ios') {
+          // Add a soft haptic feedback when pressing down on the tabs.
+          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+        }
+        props.onPressIn?.(ev);
+      }}
+    />
+  );
+}

app/components/HelloWave.tsx

@@ -0,0 +1,40 @@
+import { useEffect } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { ThemedText } from '@/components/ThemedText';
+
+export function HelloWave() {
+  const rotationAnimation = useSharedValue(0);
+
+  useEffect(() => {
+    rotationAnimation.value = withRepeat(
+      withSequence(withTiming(25, { duration: 150 }), withTiming(0, { duration: 150 })),
+      4 // Run the animation 4 times
+    );
+  }, [rotationAnimation]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${rotationAnimation.value}deg` }],
+  }));
+
+  return (
+    <Animated.View style={animatedStyle}>
+      <ThemedText style={styles.text}>👋</ThemedText>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 28,
+    lineHeight: 32,
+    marginTop: -6,
+  },
+});

app/components/ParallaxScrollView.tsx

@@ -0,0 +1,82 @@
+import type { PropsWithChildren, ReactElement } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, {
+  interpolate,
+  useAnimatedRef,
+  useAnimatedStyle,
+  useScrollViewOffset,
+} from 'react-native-reanimated';
+
+import { ThemedView } from '@/components/ThemedView';
+import { useBottomTabOverflow } from '@/components/ui/TabBarBackground';
+import { useColorScheme } from '@/hooks/useColorScheme';
+
+const HEADER_HEIGHT = 250;
+
+type Props = PropsWithChildren<{
+  headerImage: ReactElement;
+  headerBackgroundColor: { dark: string; light: string };
+}>;
+
+export default function ParallaxScrollView({
+  children,
+  headerImage,
+  headerBackgroundColor,
+}: Props) {
+  const colorScheme = useColorScheme() ?? 'light';
+  const scrollRef = useAnimatedRef<Animated.ScrollView>();
+  const scrollOffset = useScrollViewOffset(scrollRef);
+  const bottom = useBottomTabOverflow();
+  const headerAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateY: interpolate(
+            scrollOffset.value,
+            [-HEADER_HEIGHT, 0, HEADER_HEIGHT],
+            [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75]
+          ),
+        },
+        {
+          scale: interpolate(scrollOffset.value, [-HEADER_HEIGHT, 0, HEADER_HEIGHT], [2, 1, 1]),
+        },
+      ],
+    };
+  });
+
+  return (
+    <ThemedView style={styles.container}>
+      <Animated.ScrollView
+        ref={scrollRef}
+        scrollEventThrottle={16}
+        scrollIndicatorInsets={{ bottom }}
+        contentContainerStyle={{ paddingBottom: bottom }}>
+        <Animated.View
+          style={[
+            styles.header,
+            { backgroundColor: headerBackgroundColor[colorScheme] },
+            headerAnimatedStyle,
+          ]}>
+          {headerImage}
+        </Animated.View>
+        <ThemedView style={styles.content}>{children}</ThemedView>
+      </Animated.ScrollView>
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    height: HEADER_HEIGHT,
+    overflow: 'hidden',
+  },
+  content: {
+    flex: 1,
+    padding: 32,
+    gap: 16,
+    overflow: 'hidden',
+  },
+});

app/components/ThemedText.tsx

@@ -0,0 +1,60 @@
+import { StyleSheet, Text, type TextProps } from 'react-native';
+
+import { useThemeColor } from '@/hooks/useThemeColor';
+
+export type ThemedTextProps = TextProps & {
+  lightColor?: string;
+  darkColor?: string;
+  type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
+};
+
+export function ThemedText({
+  style,
+  lightColor,
+  darkColor,
+  type = 'default',
+  ...rest
+}: ThemedTextProps) {
+  const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
+
+  return (
+    <Text
+      style={[
+        { color },
+        type === 'default' ? styles.default : undefined,
+        type === 'title' ? styles.title : undefined,
+        type === 'defaultSemiBold' ? styles.defaultSemiBold : undefined,
+        type === 'subtitle' ? styles.subtitle : undefined,
+        type === 'link' ? styles.link : undefined,
+        style,
+      ]}
+      {...rest}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  default: {
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  defaultSemiBold: {
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: '600',
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: 'bold',
+    lineHeight: 32,
+  },
+  subtitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+  link: {
+    lineHeight: 30,
+    fontSize: 16,
+    color: '#0a7ea4',
+  },
+});

app/components/ThemedView.tsx

@@ -0,0 +1,14 @@
+import { View, type ViewProps } from 'react-native';
+
+import { useThemeColor } from '@/hooks/useThemeColor';
+
+export type ThemedViewProps = ViewProps & {
+  lightColor?: string;
+  darkColor?: string;
+};
+
+export function ThemedView({ style, lightColor, darkColor, ...otherProps }: ThemedViewProps) {
+  const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background');
+
+  return <View style={[{ backgroundColor }, style]} {...otherProps} />;
+}

app/components/ui/Calendar/CalendarView.js

@@ -0,0 +1,216 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
+import { FontAwesome } from '@expo/vector-icons';
+import Colors from '../../../constants';
+
+const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const months = [
+  'January', 'February', 'March', 'April', 'May', 'June',
+  'July', 'August', 'September', 'October', 'November', 'December'
+];
+
+const CalendarView = ({ onSelectDate, events = [] }) => {
+  const [currentMonth, setCurrentMonth] = useState(new Date());
+  const today = new Date();
+  
+  const getDaysInMonth = (date) => {
+    const year = date.getFullYear();
+    const month = date.getMonth();
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const firstDay = new Date(year, month, 1).getDay();
+    
+    const days = [];
+    
+    // Add empty days for the start of the month
+    for (let i = 0; i < firstDay; i++) {
+      days.push({ day: '', date: null });
+    }
+    
+    // Add days of the month
+    for (let i = 1; i <= daysInMonth; i++) {
+      const date = new Date(year, month, i);
+      const hasEvent = events.some(event => {
+        const eventDate = new Date(event.startDate);
+        return eventDate.getDate() === i && 
+               eventDate.getMonth() === month && 
+               eventDate.getFullYear() === year;
+      });
+      
+      const isToday = today.getDate() === i && 
+                      today.getMonth() === month && 
+                      today.getFullYear() === year;
+
+      days.push({
+        day: i,
+        date,
+        hasEvent,
+        isToday
+      });
+    }
+    
+    return days;
+  };
+  
+  const handlePrevMonth = () => {
+    const prevMonth = new Date(currentMonth);
+    prevMonth.setMonth(prevMonth.getMonth() - 1);
+    setCurrentMonth(prevMonth);
+  };
+  
+  const handleNextMonth = () => {
+    const nextMonth = new Date(currentMonth);
+    nextMonth.setMonth(nextMonth.getMonth() + 1);
+    setCurrentMonth(nextMonth);
+  };
+  
+  const calendarDays = getDaysInMonth(currentMonth);
+  
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <TouchableOpacity 
+          onPress={handlePrevMonth} 
+          style={styles.navButton}
+          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+        >
+          <FontAwesome name="chevron-left" size={14} color={Colors.primary} />
+        </TouchableOpacity>
+        <Text style={styles.monthYear}>
+          {months[currentMonth.getMonth()]} {currentMonth.getFullYear()}
+        </Text>
+        <TouchableOpacity 
+          onPress={handleNextMonth} 
+          style={styles.navButton}
+          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+        >
+          <FontAwesome name="chevron-right" size={14} color={Colors.primary} />
+        </TouchableOpacity>
+      </View>
+      
+      <View style={styles.daysHeader}>
+        {days.map(day => (
+          <Text key={day} style={styles.dayHeader}>{day}</Text>
+        ))}
+      </View>
+      
+      <View style={styles.calendarGrid}>
+        {calendarDays.map((item, index) => (
+          <TouchableOpacity
+            key={index}
+            style={[
+              styles.day,
+              !item.date && styles.emptyDay,
+              item.isToday && styles.todayDay,
+              item.hasEvent && styles.eventDay
+            ]}
+            onPress={() => item.date && onSelectDate(item.date)}
+            disabled={!item.date}
+            activeOpacity={item.date ? 0.7 : 1}
+          >
+            <Text style={[
+              styles.dayText,
+              item.isToday && styles.todayText
+            ]}>
+              {item.day}
+            </Text>
+            {item.hasEvent && <View style={styles.eventDot} />}
+          </TouchableOpacity>
+        ))}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: Colors.card,
+    borderRadius: 10,
+    padding: 14,
+    margin: 16,
+    shadowColor: Colors.cardShadow,
+    shadowOffset: { width: 0, height: 3 },
+    shadowOpacity: 0.1,
+    shadowRadius: 6,
+    elevation: 3,
+    borderWidth: 1,
+    borderColor: Colors.border,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 16,
+    paddingHorizontal: 8,
+  },
+  navButton: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: Colors.background,
+    borderWidth: 1,
+    borderColor: Colors.border,
+  },
+  monthYear: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: Colors.text,
+  },
+  daysHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    marginBottom: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.divider,
+    paddingBottom: 8,
+  },
+  dayHeader: {
+    width: 36,
+    textAlign: 'center',
+    fontWeight: '600',
+    fontSize: 12,
+    color: Colors.secondary,
+  },
+  calendarGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  day: {
+    width: '14.28%',
+    height: 44,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginVertical: 2,
+    position: 'relative',
+  },
+  emptyDay: {
+    backgroundColor: 'transparent',
+  },
+  todayDay: {
+    backgroundColor: Colors.primary,
+    borderRadius: 22,
+  },
+  todayText: {
+    color: '#fff',
+    fontWeight: '600',
+  },
+  eventDay: {
+    position: 'relative',
+  },
+  dayText: {
+    textAlign: 'center',
+    fontSize: 14,
+    color: Colors.text,
+  },
+  eventDot: {
+    position: 'absolute',
+    bottom: 6,
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: Colors.accent,
+  },
+});
+
+export default CalendarView; 

app/components/ui/IconSymbol.ios.tsx

@@ -0,0 +1,32 @@
+import { SymbolView, SymbolViewProps, SymbolWeight } from 'expo-symbols';
+import { StyleProp, ViewStyle } from 'react-native';
+
+export function IconSymbol({
+  name,
+  size = 24,
+  color,
+  style,
+  weight = 'regular',
+}: {
+  name: SymbolViewProps['name'];
+  size?: number;
+  color: string;
+  style?: StyleProp<ViewStyle>;
+  weight?: SymbolWeight;
+}) {
+  return (
+    <SymbolView
+      weight={weight}
+      tintColor={color}
+      resizeMode="scaleAspectFit"
+      name={name}
+      style={[
+        {
+          width: size,
+          height: size,
+        },
+        style,
+      ]}
+    />
+  );
+}

app/components/ui/IconSymbol.tsx

@@ -0,0 +1,41 @@
+// Fallback for using MaterialIcons on Android and web.
+
+import MaterialIcons from '@expo/vector-icons/MaterialIcons';
+import { SymbolWeight, SymbolViewProps } from 'expo-symbols';
+import { ComponentProps } from 'react';
+import { OpaqueColorValue, type StyleProp, type TextStyle } from 'react-native';
+
+type IconMapping = Record<SymbolViewProps['name'], ComponentProps<typeof MaterialIcons>['name']>;
+type IconSymbolName = keyof typeof MAPPING;
+
+/**
+ * Add your SF Symbols to Material Icons mappings here.
+ * - see Material Icons in the [Icons Directory](https://icons.expo.fyi).
+ * - see SF Symbols in the [SF Symbols](https://developer.apple.com/sf-symbols/) app.
+ */
+const MAPPING = {
+  'house.fill': 'home',
+  'paperplane.fill': 'send',
+  'chevron.left.forwardslash.chevron.right': 'code',
+  'chevron.right': 'chevron-right',
+} as IconMapping;
+
+/**
+ * An icon component that uses native SF Symbols on iOS, and Material Icons on Android and web.
+ * This ensures a consistent look across platforms, and optimal resource usage.
+ * Icon `name`s are based on SF Symbols and require manual mapping to Material Icons.
+ */
+export function IconSymbol({
+  name,
+  size = 24,
+  color,
+  style,
+}: {
+  name: IconSymbolName;
+  size?: number;
+  color: string | OpaqueColorValue;
+  style?: StyleProp<TextStyle>;
+  weight?: SymbolWeight;
+}) {
+  return <MaterialIcons color={color} size={size} name={MAPPING[name]} style={style} />;
+}

app/components/ui/TabBarBackground.ios.tsx

@@ -0,0 +1,22 @@
+import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
+import { BlurView } from 'expo-blur';
+import { StyleSheet } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+export default function BlurTabBarBackground() {
+  return (
+    <BlurView
+      // System chrome material automatically adapts to the system's theme
+      // and matches the native tab bar appearance on iOS.
+      tint="systemChromeMaterial"
+      intensity={100}
+      style={StyleSheet.absoluteFill}
+    />
+  );
+}
+
+export function useBottomTabOverflow() {
+  const tabHeight = useBottomTabBarHeight();
+  const { bottom } = useSafeAreaInsets();
+  return tabHeight - bottom;
+}

app/components/ui/TabBarBackground.tsx

@@ -0,0 +1,6 @@
+// This is a shim for web and Android where the tab bar is generally opaque.
+export default undefined;
+
+export function useBottomTabOverflow() {
+  return 0;
+}

app/constants/Colors.js

@@ -0,0 +1,15 @@
+const Colors = {
+  primary: '#007AFF',
+  secondary: '#5856D6',
+  background: '#F2F2F7',
+  card: '#FFFFFF',
+  text: '#000000',
+  border: '#C7C7CC',
+  notification: '#FF3B30',
+  success: '#34C759',
+  warning: '#FF9500',
+  error: '#FF3B30',
+  inactive: '#C7C7CC',
+};
+
+export default Colors; 

app/constants/Colors.ts

@@ -0,0 +1,26 @@
+/**
+ * Below are the colors that are used in the app. The colors are defined in the light and dark mode.
+ * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
+ */
+
+const tintColorLight = '#0a7ea4';
+const tintColorDark = '#fff';
+
+export const Colors = {
+  light: {
+    text: '#11181C',
+    background: '#fff',
+    tint: tintColorLight,
+    icon: '#687076',
+    tabIconDefault: '#687076',
+    tabIconSelected: tintColorLight,
+  },
+  dark: {
+    text: '#ECEDEE',
+    background: '#151718',
+    tint: tintColorDark,
+    icon: '#9BA1A6',
+    tabIconDefault: '#9BA1A6',
+    tabIconSelected: tintColorDark,
+  },
+};

app/constants/index.js

@@ -0,0 +1,27 @@
+// Import the themed Colors from the Expo generated file
+import { Colors as ThemedColors } from './Colors.ts';
+
+// Define our app's default colors to match the frontend
+const Colors = {
+  primary: '#3854a6', // Deeper blue like the frontend
+  secondary: '#667eea',
+  background: '#f8fafc',
+  card: '#ffffff',
+  text: '#2d3748',
+  border: '#e2e8f0',
+  notification: '#ef4444',
+  success: '#10b981',
+  warning: '#f59e0b',
+  error: '#ef4444',
+  inactive: '#94a3b8',
+  cardShadow: 'rgba(0, 0, 0, 0.1)',
+  divider: '#e2e8f0',
+  headerBg: '#ffffff',
+  buttonText: '#ffffff',
+  accent: '#7f9cf5',
+  placeholder: '#a0aec0',
+};
+
+// Export both color sets
+export { ThemedColors };
+export default Colors; 

app/eslint.config.js

@@ -0,0 +1,10 @@
+// https://docs.expo.dev/guides/using-eslint/
+const { defineConfig } = require('eslint/config');
+const expoConfig = require('eslint-config-expo/flat');
+
+module.exports = defineConfig([
+  expoConfig,
+  {
+    ignores: ['dist/*'],
+  },
+]);

app/hooks/useColorScheme.ts

@@ -0,0 +1 @@
+export { useColorScheme } from 'react-native';

app/hooks/useColorScheme.web.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+import { useColorScheme as useRNColorScheme } from 'react-native';
+
+/**
+ * To support static rendering, this value needs to be re-calculated on the client side for web
+ */
+export function useColorScheme() {
+  const [hasHydrated, setHasHydrated] = useState(false);
+
+  useEffect(() => {
+    setHasHydrated(true);
+  }, []);
+
+  const colorScheme = useRNColorScheme();
+
+  if (hasHydrated) {
+    return colorScheme;
+  }
+
+  return 'light';
+}

app/hooks/useThemeColor.ts

@@ -0,0 +1,21 @@
+/**
+ * Learn more about light and dark modes:
+ * https://docs.expo.dev/guides/color-schemes/
+ */
+
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+
+export function useThemeColor(
+  props: { light?: string; dark?: string },
+  colorName: keyof typeof Colors.light & keyof typeof Colors.dark
+) {
+  const theme = useColorScheme() ?? 'light';
+  const colorFromProps = props[theme];
+
+  if (colorFromProps) {
+    return colorFromProps;
+  } else {
+    return Colors[theme][colorName];
+  }
+}

app/lib/api/apiService.js

@@ -0,0 +1,120 @@
+import { Event } from '../models/Event';
+
+const API_URL = 'http://calendi.test:88/api'; // Change this to your backend URL
+
+/**
+ * Base API service for handling HTTP requests
+ */
+class ApiService {
+  /**
+   * Execute a fetch request with proper error handling
+   * @param {string} endpoint - API endpoint
+   * @param {Object} options - Fetch options
+   * @returns {Promise<any>} Response data
+   */
+  async fetch(endpoint, options = {}) {
+    try {
+      const url = `${API_URL}${endpoint}`;
+      
+      const defaultOptions = {
+        headers: {
+          'Content-Type': 'application/json',
+          'Accept': 'application/json',
+        }
+      };
+      
+      const response = await fetch(url, { ...defaultOptions, ...options });
+      
+      if (!response.ok) {
+        throw new Error(`API request failed: ${response.status} ${response.statusText}`);
+      }
+      
+      const data = await response.json();
+      return data;
+    } catch (error) {
+      console.error('API request error:', error);
+      throw error;
+    }
+  }
+  
+  /**
+   * Get all events
+   * @returns {Promise<Event[]>} List of events
+   */
+  async getEvents() {
+    const data = await this.fetch('/events');
+    return data.map(eventData => new Event(eventData));
+  }
+  
+  /**
+   * Get a single event by ID
+   * @param {string} id - Event ID
+   * @returns {Promise<Event>} Event object
+   */
+  async getEvent(id) {
+    const data = await this.fetch(`/events/${id}`);
+    return new Event(data);
+  }
+  
+  /**
+   * Create a new event
+   * @param {Event} event - Event data
+   * @returns {Promise<Event>} Created event
+   */
+  async createEvent(event) {
+    const data = await this.fetch('/events', {
+      method: 'POST',
+      body: JSON.stringify(event)
+    });
+    return new Event(data);
+  }
+  
+  /**
+   * Update an existing event
+   * @param {string} id - Event ID
+   * @param {Event} event - Updated event data
+   * @returns {Promise<Event>} Updated event
+   */
+  async updateEvent(id, event) {
+    const data = await this.fetch(`/events/${id}`, {
+      method: 'PUT',
+      body: JSON.stringify(event)
+    });
+    return new Event(data);
+  }
+  
+  /**
+   * Delete an event
+   * @param {string} id - Event ID
+   * @returns {Promise<void>}
+   */
+  async deleteEvent(id) {
+    await this.fetch(`/events/${id}`, {
+      method: 'DELETE'
+    });
+  }
+  
+  /**
+   * Get user profile information
+   * @returns {Promise<Object>} User profile data
+   */
+  async getUserProfile() {
+    return await this.fetch('/user/profile');
+  }
+  
+  /**
+   * Update user profile
+   * @param {Object} profileData - Updated profile data
+   * @returns {Promise<Object>} Updated profile
+   */
+  async updateUserProfile(profileData) {
+    return await this.fetch('/user/profile', {
+      method: 'PUT',
+      body: JSON.stringify(profileData)
+    });
+  }
+}
+
+// Create a singleton instance
+const apiService = new ApiService();
+export default apiService; 

app/lib/models/Event.js

@@ -0,0 +1,50 @@
+/**
+ * Event model for handling calendar events
+ */
+export class Event {
+  constructor({ id, title, description, startDate, endDate, location, createdBy }) {
+    this.id = id;
+    this.title = title;
+    this.description = description;
+    this.startDate = startDate instanceof Date ? startDate : new Date(startDate);
+    this.endDate = endDate instanceof Date ? endDate : new Date(endDate);
+    this.location = location;
+    this.createdBy = createdBy;
+  }
+
+  /**
+   * Calculate the duration of the event in minutes
+   * @returns {number} Duration in minutes
+   */
+  getDurationMinutes() {
+    return Math.floor((this.endDate - this.startDate) / (1000 * 60));
+  }
+
+  /**
+   * Check if the event is a full day event
+   * @returns {boolean}
+   */
+  isFullDay() {
+    const startHours = this.startDate.getHours();
+    const startMinutes = this.startDate.getMinutes();
+    const durationHours = this.getDurationMinutes() / 60;
+    
+    return startHours === 0 && startMinutes === 0 && durationHours >= 24;
+  }
+
+  /**
+   * Format event date for display
+   * @returns {string} Formatted date string
+   */
+  getFormattedDate() {
+    if (this.isFullDay()) {
+      return this.startDate.toLocaleDateString();
+    }
+    
+    const startTime = this.startDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    const endTime = this.endDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    return `${this.startDate.toLocaleDateString()}, ${startTime} - ${endTime}`;
+  }
+}
+
+export default Event; 

app/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "app",
+  "main": "expo-router/entry",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "expo start",
+    "reset-project": "node ./scripts/reset-project.js",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "lint": "expo lint"
+  },
+  "dependencies": {
+    "@expo/ngrok": "^4.1.3",
+    "@expo/vector-icons": "^14.1.0",
+    "@react-navigation/bottom-tabs": "^7.3.10",
+    "@react-navigation/elements": "^2.3.8",
+    "@react-navigation/native": "^7.1.6",
+    "expo": "~53.0.4",
+    "expo-blur": "~14.1.4",
+    "expo-constants": "~17.1.4",
+    "expo-font": "~13.3.0",
+    "expo-haptics": "~14.1.4",
+    "expo-image": "~2.1.6",
+    "expo-linking": "~7.1.4",
+    "expo-router": "~5.0.3",
+    "expo-splash-screen": "~0.30.7",
+    "expo-status-bar": "~2.2.3",
+    "expo-symbols": "~0.4.4",
+    "expo-system-ui": "~5.0.6",
+    "expo-web-browser": "~14.1.6",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-native": "0.79.1",
+    "react-native-gesture-handler": "~2.24.0",
+    "react-native-reanimated": "~3.17.4",
+    "react-native-safe-area-context": "5.3.0",
+    "react-native-screens": "~4.10.0",
+    "react-native-web": "~0.20.0",
+    "react-native-webview": "13.13.5",
+    "uuid": "^11.1.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@types/react": "~19.0.10",
+    "eslint": "^9.25.0",
+    "eslint-config-expo": "~9.2.0",
+    "typescript": "~5.8.3"
+  },
+  "private": true
+}

app/scripts/reset-project.js

@@ -0,0 +1,112 @@
+#!/usr/bin/env node
+
+/**
+ * This script is used to reset the project to a blank state.
+ * It deletes or moves the /app, /components, /hooks, /scripts, and /constants directories to /app-example based on user input and creates a new /app directory with an index.tsx and _layout.tsx file.
+ * You can remove the `reset-project` script from package.json and safely delete this file after running it.
+ */
+
+const fs = require("fs");
+const path = require("path");
+const readline = require("readline");
+
+const root = process.cwd();
+const oldDirs = ["app", "components", "hooks", "constants", "scripts"];
+const exampleDir = "app-example";
+const newAppDir = "app";
+const exampleDirPath = path.join(root, exampleDir);
+
+const indexContent = `import { Text, View } from "react-native";
+
+export default function Index() {
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Text>Edit app/index.tsx to edit this screen.</Text>
+    </View>
+  );
+}
+`;
+
+const layoutContent = `import { Stack } from "expo-router";
+
+export default function RootLayout() {
+  return <Stack />;
+}
+`;
+
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout,
+});
+
+const moveDirectories = async (userInput) => {
+  try {
+    if (userInput === "y") {
+      // Create the app-example directory
+      await fs.promises.mkdir(exampleDirPath, { recursive: true });
+      console.log(`📁 /${exampleDir} directory created.`);
+    }
+
+    // Move old directories to new app-example directory or delete them
+    for (const dir of oldDirs) {
+      const oldDirPath = path.join(root, dir);
+      if (fs.existsSync(oldDirPath)) {
+        if (userInput === "y") {
+          const newDirPath = path.join(root, exampleDir, dir);
+          await fs.promises.rename(oldDirPath, newDirPath);
+          console.log(`➡️ /${dir} moved to /${exampleDir}/${dir}.`);
+        } else {
+          await fs.promises.rm(oldDirPath, { recursive: true, force: true });
+          console.log(`❌ /${dir} deleted.`);
+        }
+      } else {
+        console.log(`➡️ /${dir} does not exist, skipping.`);
+      }
+    }
+
+    // Create new /app directory
+    const newAppDirPath = path.join(root, newAppDir);
+    await fs.promises.mkdir(newAppDirPath, { recursive: true });
+    console.log("\n📁 New /app directory created.");
+
+    // Create index.tsx
+    const indexPath = path.join(newAppDirPath, "index.tsx");
+    await fs.promises.writeFile(indexPath, indexContent);
+    console.log("📄 app/index.tsx created.");
+
+    // Create _layout.tsx
+    const layoutPath = path.join(newAppDirPath, "_layout.tsx");
+    await fs.promises.writeFile(layoutPath, layoutContent);
+    console.log("📄 app/_layout.tsx created.");
+
+    console.log("\n✅ Project reset complete. Next steps:");
+    console.log(
+      `1. Run \`npx expo start\` to start a development server.\n2. Edit app/index.tsx to edit the main screen.${
+        userInput === "y"
+          ? `\n3. Delete the /${exampleDir} directory when you're done referencing it.`
+          : ""
+      }`
+    );
+  } catch (error) {
+    console.error(`❌ Error during script execution: ${error.message}`);
+  }
+};
+
+rl.question(
+  "Do you want to move existing files to /app-example instead of deleting them? (Y/n): ",
+  (answer) => {
+    const userInput = answer.trim().toLowerCase() || "y";
+    if (userInput === "y" || userInput === "n") {
+      moveDirectories(userInput).finally(() => rl.close());
+    } else {
+      console.log("❌ Invalid input. Please enter 'Y' or 'N'.");
+      rl.close();
+    }
+  }
+);

app/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    ".expo/types/**/*.ts",
+    "expo-env.d.ts"
+  ]
+}

docker-compose.server.yml

@@ -1,4 +1,20 @@
 services:
+  expo:
+    image: expo:latest
+    build:
+      context: .
+      dockerfile: docker/Dockerfile-expo
+      target: prod
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.expo.entrypoints=websecure"
+      - "traefik.http.routers.expo.rule=Host(`calendi-expo.strolap.com`)"
+      - "traefik.http.routers.expo.tls=true"
+      - "traefik.http.routers.expo.tls.certresolver=strolap"
+      - "traefik.http.services.expo.loadbalancer.server.port=8081"
+    networks:
+      - proxy
+
   app:
     image: app:latest
     build:

docker-compose.yml

@@ -1,4 +1,20 @@
 services:
+  expo:
+    image: expo:latest
+    hostname: calendi-expo.test
+    build:
+      context: .
+      dockerfile: docker/Dockerfile-expo
+    volumes:
+      - ./app:/app
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.expo.entrypoints=web"
+      - "traefik.http.routers.expo.rule=Host(`calendi-expo.test`)"
+      - "traefik.http.services.expo.loadbalancer.server.port=8081"
+    networks:
+      - proxy
+
   app:
     image: app:latest
     hostname: calendi.test

docker/Dockerfile-expo

@@ -0,0 +1,17 @@
+FROM node:20-alpine as base
+
+WORKDIR /app
+
+CMD ["npm", "run", "start"]
+
+FROM base as prod
+
+WORKDIR /app
+
+COPY app/package.json .
+
+RUN npm install
+
+COPY app/ .
+
+CMD ["npm", "run", "start"]

package.json

@@ -1,9 +0,0 @@
-{
-  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.7.2",
-    "@fortawesome/free-solid-svg-icons": "^6.7.2",
-    "@fortawesome/react-fontawesome": "^0.2.2",
-    "@react-navigation/bottom-tabs": "^7.3.10",
-    "@react-navigation/native": "^7.1.6"
-  }
-}