|
|
CatchUp is a social map-app designed for seamless connection with friends, wherever you are.
Jiawei He(Anson)
- Authentication system (Login Screen)
- User profile management (ProfileSetup + Profile Screen)
- Firebase integration (Firestore -> Storage)
- State management implementation
- Me Screen (User Profile Screen)
Dingyang Jin
- Mapbox Migration
- Friends screen (add friend system)
- Map Screen (add friend layer and post layer)
- User Experience
- Display list of friends with profile pictures
- Display pending friend requests
- Accept or reject friend requests
- Remove friends from the list
- Input field for email search
- Search button to trigger search
- Display search results with user profile pictures
- Handle errors and display appropriate messages
- Subscribe to friends collection for real-time updates
- Subscribe to pending requests collection for real-time updates
- Send friend requests
- Accept or reject friend requests
- Remove friends from the list
- Initialize Mapbox with access token
- Display user location with high accuracy
- Fetch and display city name and weather information
- Subscribe to friends collection for real-time updates
- Display friends' locations with profile pictures
- Show callouts with friend information on marker click
- Subscribe to posts collection for real-time updates
- Display posts with thumbnails on the map
- Show callouts with post details on marker click
- Delete post by self using long press
- Toggle between friends and posts view
- Add new posts with camera integration
- Handle location permissions and errors
- Toggle on/off location sharing setting so friends can see or not
- Toggle on/off notifications
- Update avatar/name
Firebase Collections Structure
User collection
users: {
uid: string,
email: string,
username: string,
avatarUrl: string, // Firebase Storage path
gender: 'male' | 'female',
createdAt: timestamp,
lastActive: timestamp,
friends: [],
settings: {
locationSharing: boolean,
notifications: boolean
}
}Friends collection (it act as a friend request handler)
friends: {
acceptedAt: timestamp
createdAt: timestamp,
receiver: string,
sender: string,
status: 'pending' | 'accepted' | 'removed'
updatedAt: timestamp,
users: {
0: string, // uid
1: string, // uid
}
}Post collection (store post info and image url)
posts: {
caption: string,
createdAt: timestamp,
imageUrl: string, // URL
location: [number, number], // [Latitude, Longitude] - GeoJSON format
userId: string // uid
}- Implemented a toggle button for seamless switching between map layers
- Layer 1: Displays user posts with geotagged markers
- Layer 2: Highlights friends' current locations
- Enhanced user experience by reducing map clutter and providing clear views of each layer
- Designed and implemented a robust friend management feature
- Enabled searching for users by email with real-time suggestions
- Integrated functionality to send, accept, or reject friend requests
- Added the ability to remove friends from the list with immediate updates
- Utilized React Context for efficient global state management of user and friend data
- Cached map and user data locally for faster loading and improved app performance
- Effectively handled asynchronous updates for friend requests and map interactions
main: Mapbox mergedNotification: User profile management & bug fixMapbox: Fully functional map and friend systemdev: Legacy build based on Google Maps
- Implement friend request system
- Add real-time location sharing
- Create friend list management
- Add notification system
- Implement location privacy controls
- User friendly UI improvement
- Expo Go can no longer be used. You must use an emulator or connect your device via USB.
- Please follow below setup instructions.
Add the required keys for Mapbox (start with pk.) and OpenWeather in the .env file, in addition to the Firebase API keys:
EXPO_PUBLIC_MAPBOX_ACCESS_TOKEN="Mapbox Public API key"
EXPO_PUBLIC_OPEN_WEATHER_API=your_open_weather_keyNotice Mapbox has Public API key which start with pk and Secret API key which start with sk, they are different.
Clean and prepare the build with the following command:
npx expo prebuild --clean- Install Android Studio
- Enable USB debugging on your phone (for Android, enable ADB).
- Connect your phone to the computer.
- Run the app on Android or iOS:
npx expo run:androidOR
npx expo run:ios- Alternatively, you can manually install the APK after prebuild:
android\app\build\outputs\apk\debug\app-debug.apk.
-
Ensure you have registered an Apple Developer Account and downloaded Xcode
-
After prebuild, run the following command in the terminal:
open ios/CatchUp.xcworkspace/
-
Xcode will show up and Connect your iOS device, select your iOS device at the top.
-
Select
CatchUpproject and selectSigning & Capabilities, underTeamselect your apple developer account.- Note: Free Apple Developer Account does not support
Background ModesandPush Notification, simple remove them from signing.
- Note: Free Apple Developer Account does not support
- Build and run the project in xcode by pressing
CMD+R