Proximity
Proximity is a native app for iOS and Android that anonymously connects you with nearby people in real time. The app continuously monitors GPS location and dynamically opens chat streams with everyone within a 100 meter radius. All chat messages are then combined into a single familiar user interface.
Proximity is a personal project that I've built in my free time. It is not released to Google Play or the App Store (yet). However, It has gone through live testing with friends and family.
Technical Highlights
- Native app for iOS and Android
- Built with React Native and Expo
- Django web server and admin interface hosted on AWS
- GraphQL API served using Ariadne and consumed using Apollo Client
- REST API served using Django REST Framework
- Socket.IO for real-time chat features
- Geo-relational data support through PostgreSQL / PostGIS
- User authentication and media storage via Firebase
- App deployed via Expo EAS
Features
- Anonymous, real-time chat with typing indicators and multimedia support
- Dynamically updated feed shows the chat history specific to your location
- Notifies users when they receive messages
- Notifies users when they come near each other
- Map shows your active chat radius
Is it a feed or a chat?
It's both. The single chat interface looks simple, but it has a lot going on. Not only is it aggregating real-time chat messages from all nearby users (and any messages you send yourself), but it also acts as an infinitely scrolling feed, showing the chat history prioritized by distance from your location.
The feed initializes as an array of messages, the first page of chat history. Incoming chat messages come in through a Socket.IO server and are instantly inserted at the beginning of the array. Outgoing chat messages are also sent through the Socket.IO server, but to provide instant feedback to the user, a client-side message object is constructed and inserted at the beginning of the array. Additionally, if the user attempts to scroll to the end of the chat, new pages of chat history are incrementally fetched from the backend using Apollo GraphQL Client and pushed to the end of the message array.
Since there was quite a bit of logic to manage this message array, all the logic was pulled into a React Hook. This allows for rapidly testing a variety of UI designs while keeping the chat logic consistent.
Ordering By Distance
The chat is primarily ordered by distance, but the user's exact distance from each message is not used. Message's are placed into buckets called sectors, each sector incrementally being an additional 100 meters from the user. This allows for individual messages in each sector to be ordered by their send time and still read like a conversation in the chat history. If ordering was strictly based off of distance, the conversation would most likely appear very random and scrambled.
Refer to the diagram below. Without the concept of sectors, User B's message would appear before User A's message and wouldn't make sense.
Media Viewer
Proximity has a custom modal that implements simultaneous pinch and drag gestures to allow the user to zoom in and out on it's content. The user can also swipe vertically in either direction to dismiss the modal.
This Viewer component is implemented using React Native Reanimated.
Demo
The following video shows a scenario between two users, demonstrating the onboarding flow, push notifications, typing indicators as well as text and media messaging.