A full-stack, production-grade ride-sharing mobile application built with React Native, Expo, and TypeScript. Ryde delivers the core experience of booking rides, choosing drivers, processing payments, and managing trips -- all wrapped in a polished, modern UI.
- Google OAuth & Email Authentication -- Powered by Clerk with secure session management via
expo-secure-store - Interactive Maps -- Real-time location display with
react-native-mapsand route visualization viareact-native-maps-directions - Google Places Autocomplete -- Smart destination search with address suggestions
- Ride Booking Flow -- End-to-end experience: search destination, view route on map, choose a driver, confirm and book
- Driver Selection -- Browse available drivers with ratings, car details, seat availability, and pricing
- Stripe Payments -- Secure payment processing with Stripe's React Native SDK
- Ride History -- View all past rides with detailed trip info (origin, destination, driver, duration, payment status)
- User Profile -- View and manage account details synced with Clerk
- Chat Interface -- Messaging UI for rider-driver communication
- Bottom Tab Navigation -- Native-feeling tabs via
react-native-bottom-tabs - Serverless Backend -- API routes built with Expo Router's API route conventions, backed by Neon Serverless Postgres
| Layer | Technology |
|---|---|
| Framework | React Native 0.81 + Expo 54 (New Architecture) |
| Language | TypeScript 5.9 |
| Routing | Expo Router 6 (file-based) |
| Styling | NativeWind 4 (Tailwind CSS for RN) |
| Authentication | Clerk (@clerk/expo) + Google OAuth |
| Database | Neon Serverless Postgres (@neondatabase/serverless) |
| Payments | Stripe (@stripe/stripe-react-native) |
| Maps | react-native-maps + react-native-maps-directions |
| Places Search | react-native-google-places-autocomplete |
| State Management | Zustand |
| UI Components | @gorhom/bottom-sheet, react-native-modal, react-native-swiper |
| Fonts | Plus Jakarta Sans (8 weights via expo-font) |
app/
(api)/ # Serverless API routes
(stripe)/
create+api.ts # Stripe payment intent creation
pay+api.ts # Stripe payment processing
ride/
[id]+api.ts # Get ride by ID
create+api.ts # Create a new ride
driver+api.ts # Fetch available drivers
user+api.ts # User management
(auth)/ # Auth screens (unauthenticated)
welcome.tsx # Onboarding swiper
sign-in.tsx # Email/password + OAuth sign-in
sign-up.tsx # Account creation
(root)/ # Main app (authenticated)
(tabs)/
index.tsx # Home -- map, search, recent rides
rides.tsx # Ride history
chat.tsx # Messaging
profile.tsx # User profile
find-ride.tsx # Route preview with map
confirm-ride.tsx # Driver selection
book-ride.tsx # Booking confirmation + payment
components/
CustomButton.tsx # Reusable button (bgVariant, textVariant)
DriverCard.tsx # Driver info card with rating
GoogleMap.tsx # Map component with markers & directions
GoogleTextInput.tsx # Places autocomplete input
InputField.tsx # Labeled input with icon
OAuth.tsx # Google OAuth button
Payment.tsx # Stripe payment component
RideCard.tsx # Ride history card
RideLayout.tsx # Map + bottom sheet layout
store/
index.ts # Zustand stores (location, driver)
rides.ts # Ride state management
lib/
auth.ts # Auth utilities
fetch.ts # API fetch helpers
map.ts # Map utility functions
utils.ts # General utilities
- Node.js 18+
- Expo CLI
- iOS Simulator (Xcode) or Android Emulator (Android Studio)
Create a .env file in the project root:
EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_key
EXPO_PUBLIC_GOOGLE_API_KEY=your_google_maps_key
EXPO_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_key
EXPO_PUBLIC_DATABASE_URL=your_neon_database_url
STRIPE_SECRET_KEY=your_stripe_secret_key# Install dependencies
npm install
# Start the development server
npx expo startThen press i for iOS simulator, a for Android emulator, or w for web.
| Command | Description |
|---|---|
npx expo start |
Start the Expo dev server |
npm run ios |
Build and run on iOS |
npm run android |
Build and run on Android |
npm run web |
Start for web |
npm run lint |
Run ESLint + Prettier |
- File-based routing -- Screens map directly to files under
app/. Route groups(auth)and(root)cleanly separate authenticated and unauthenticated flows. - Serverless API routes -- Backend logic lives alongside the frontend using Expo Router's
+api.tsconvention. No separate server needed. - New Architecture enabled -- Running on React Native's new rendering engine (Fabric) and TurboModules for improved performance.
- Native bottom tabs -- Using
react-native-bottom-tabsfor truly native tab bar rendering, not a JS-based alternative. - Bottom sheet pattern -- Ride booking screens use
@gorhom/bottom-sheetover the map for an experience that feels like leading ride-sharing apps.
This project is for educational and portfolio purposes.