tim/calendi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Add expo project

Browse Source
This commit is contained in:
Tim Lappe 2025-05-01 19:15:36 +02:00
parent a41b9a9227
commit b3d084756a
50 changed files with 15776 additions and 4290 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
app/.gitignore vendored Normal file
View File

@ -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

7
app/.vscode/settings.json vendored Normal file
View File

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

58
app/README.md Normal file
View File

@ -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.

42
app/app.json Normal file
View File

@ -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
}
}
}

142
app/app/(tabs)/_layout.js Normal file
View File

@ -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',
},
});

214
app/app/(tabs)/calendar.js Normal file
View File

@ -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,
},
});

285
app/app/(tabs)/index.js Normal file
View File

@ -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',
},
});

322
app/app/(tabs)/profile.js Normal file
View File

@ -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',
},
});

17
app/app/_layout.js Normal file
View File

@ -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>
</>
);
}

337
app/app/event-details/[id].js Normal file
View File

@ -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',
},
});

5
app/app/index.js Normal file
View File

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

BIN
app/assets/fonts/SpaceMono-Regular.ttf Executable file
View File

Binary file not shown.

BIN
app/assets/images/adaptive-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
app/assets/images/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
app/assets/images/icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
app/assets/images/partial-react-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
app/assets/images/react-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
app/assets/images/react-logo@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
app/assets/images/react-logo@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
app/assets/images/splash-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

45
app/components/Collapsible.tsx Normal file
View File

@ -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,
},
});

24
app/components/ExternalLink.tsx Normal file
View File

@ -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);
}
}}
/>
);
}

18
app/components/HapticTab.tsx Normal file
View File

@ -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);
}}
/>
);
}

40
app/components/HelloWave.tsx Normal file
View File

@ -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,
},
});

82
app/components/ParallaxScrollView.tsx Normal file
View File

@ -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',
},
});

60
app/components/ThemedText.tsx Normal file
View File

@ -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',
},
});

14
app/components/ThemedView.tsx Normal file
View File

@ -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} />;
}

216
app/components/ui/Calendar/CalendarView.js Normal file
View File

@ -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;

32
app/components/ui/IconSymbol.ios.tsx Normal file
View File

@ -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,
]}
/>
);
}

41
app/components/ui/IconSymbol.tsx Normal file
View File

@ -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} />;
}

22
app/components/ui/TabBarBackground.ios.tsx Normal file
View File

@ -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;
}

6
app/components/ui/TabBarBackground.tsx Normal file
View File

@ -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;
}

15
app/constants/Colors.js Normal file
View File

@ -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;

26
app/constants/Colors.ts Normal file
View File

@ -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,
},
};

27
app/constants/index.js Normal file
View File

@ -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;

10
app/eslint.config.js Normal file
View File

@ -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/*'],
},
]);

1
app/hooks/useColorScheme.ts Normal file
View File

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

21
app/hooks/useColorScheme.web.ts Normal file
View File

@ -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';
}

21
app/hooks/useThemeColor.ts Normal file
View File

@ -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];
}
}

120
app/lib/api/apiService.js Normal file
View File

@ -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;

50
app/lib/models/Event.js Normal file
View File

@ -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;

13199
app/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

51
app/package.json Normal file
View File

@ -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
}

112
app/scripts/reset-project.js Executable file
View File

@ -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();
}
}
);

17
app/tsconfig.json Normal file
View File

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

17
docker-compose.server.yml
View File

@ -1,4 +1,21 @@
services: services:
expo:
image: expo:latest
build:
context: .
dockerfile: docker/Dockerfile-expo
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"
volumes:
- ./app:/app
networks:
- proxy
app: app:
image: app:latest image: app:latest
build: build:

16
docker-compose.yml
View File

@ -1,4 +1,20 @@
services: 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: app:
image: app:latest image: app:latest
hostname: calendi.test hostname: calendi.test

5
docker/Dockerfile-expo Normal file
View File

@ -0,0 +1,5 @@
FROM node:20-alpine
WORKDIR /app
CMD ["npm", "run", "start"]

4281
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

9
package.json
View File

@ -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"
}
}