LoetoLink is a React Native (Expo) application that simplifies public transportation by offering route discovery, navigation, and personalized favorites. It integrates real-time data using the Google Maps API and secure backend services via Supabase.
- 🔐 Authentication: Email, Google, and Apple login with Supabase Auth
- 🗺️ Route Navigation: Calculates and displays public transport routes with ETA
- 📍 Live Map View: Visualize routes, stops, and current location with interactive tools
- ⭐ Favorites: Save frequently used routes for quick access
- 🛑 Bus Stop Browser: View all routes and their stops in a searchable interface
- 🔁 Recent Routes: Reuse your last 5 viewed routes instantly
- Frontend: React Native (Expo)
- Backend: Supabase (Database + Auth)
- Maps: Google Maps Directions API
- State Management: React Context API
- Storage: AsyncStorage (Recent Routes)
- Clone the repo:
git clone https://github.com/Tawanda21/LoetoLinkv2.git
cd LoetoLinkv2- Install dependencies:
npm install- Set up API keys:
- Replace Google Maps API key and Supabase credentials in
app.jsonor environment config.
- Run the project:
npx expo start/
├── App.js
├── AppNavigator.js
├── screens/
│ ├── HomeScreen.js
│ ├── MapViewScreen.js
│ ├── BusStopScreen.js
│ ├── FavoritesScreen.js
│ └── ProfileScreen.js
├── supabase.js
├── FavoriteContext.js
└── utils.js- User Login → Supabase Auth validates identity
- Select Route → Fetches from/to stops from Supabase
- Get Directions → Calls Google Maps API for route & ETA
- View Map → Route polyline + ETA rendered in
MapViewScreen - Favorite Route → Insert/remove in Supabase
- Access Bus Routes → Browse via
BusStopScreen - Manage Favorites → Add/remove/view from
FavoritesScreen
-
Tables:
combi_routes: Stores all available routesstops: All stops per routeuser_favorite_routes: Tracks user favorites
-
Role-based access and row-level security (RLS) are enforced.
- Directions API: Retrieves polyline & ETAs
- Used in both Home and MapView screens
- Themed with consistent primary colors (e.g.,
#018abe) - Interactive map tools (zoom, traffic overlay, toggle map types)
- Expandable cards and animated bottom sheets
- Responsive layout using Flexbox
- API Keys: Store securely, avoid hardcoding in production
- Supabase: Enforces RLS for user-specific actions
- Error Handling: All async ops use try/catch with alerts and loading indicators
- Offline route caching
- Real-time bus location tracking
- Multi-language support
- Admin dashboard for adding/editing routes
Run tests using:
./show-jest-results.shJest tests cover core screens and business logic.
LoetoLink Team Tawanda & Modise