GemConnect is a modern, visual-first social media application designed for creators to share portfolio work and connect in a distraction-free environment.
This repository contains the Mobile Frontend, built with React Native (Expo) and TypeScript. It communicates with a Django backend via GraphQL, featuring a robust authentication system, dynamic feed, and real-time user interactions.
Scan to Run on your Phone (Expo Go):
🔗 Project Link: https://expo.dev/accounts/gem_geek/projects/mobile
| Category | Technology | Purpose |
|---|---|---|
| Core | React Native (Expo) | Cross-platform mobile development (iOS & Android). |
| Language | TypeScript | Type safety and robust code structure. |
| Data Layer | Apollo Client | GraphQL queries, mutations, and caching. |
| Navigation | Expo Router | File-based routing (Tabs + Stacks). |
| Storage | AsyncStorage | Persisting JWT tokens and user preferences. |
| Media | Expo Image Picker | Accessing device gallery for uploads. |
- JWT Flow: Secure Login and Registration connected to Django.
- Persistence: Auto-login functionality using stored tokens.
- Secure Inputs: Password visibility toggles and validation.
- Real-Time Data: Fetches posts directly from the PostgreSQL database via GraphQL.
- Interactions:
- Like System: Optimistic UI updates (heart turns red instantly).
- Comments: Functional slide-up modal to view and add comments.
- Share: Custom share sheet UI.
- Media Uploads: Integrated native Image Picker to upload photos from the gallery.
- Base64 Handling: Converts images for secure transmission to the backend.
- Dynamic Profile: Displays user stats (Followers/Following) and post grid.
- Edit Profile: Fully functional edit screen with local storage persistence for bio and name changes.
- Public Profiles: Ability to view other users' profiles and Follow/Unfollow them.
The project follows the Expo Router directory structure:
gemconnect-frontend/mobile/
├── app/ # Screens & Navigation (Routes)
│ ├── (tabs)/ # Bottom Tab Bar (Feed, Explore, Add, Messages, Profile)
│ ├── user/ # Dynamic Public Profile routes
│ ├── _layout.tsx # Root Layout & Providers
│ ├── login.tsx # Auth Screens
│ └── ...
├── src/
│ ├── components/ # Reusable UI (PostItem, CommentsModal, etc.)
│ ├── graphql/ # Apollo Queries & Mutations
│ └── types/ # TypeScript Interfaces
├── assets/ # Images & Fonts
└── app.json # Expo Configuration
git clone https://github.com/<your-username>/gemconnect-frontend.git
cd gemconnect-frontend/mobilenpm installnpx expo start- Scan the QR code with the Expo Go app (Android/iOS).
- Press a for Android Emulator or i for iOS Simulator.
- Real-Time Chat: Upgrade the Messages UI to use WebSockets for live chat.
- Stories: Implement 24-hour disappearing status updates.
- Push Notifications: Notify users when they receive a like or follow.
This project was built as a Capstone Project for the ProDev Engineering Program.
Developed by Matilda Esenam Gbeve.