Skip to content

A sleek 🚌 Bus Booking app with Google Sign-In πŸ”, TanStack Query ⚑, and modern UI powered by Tailwind CSS 🎨. Built with TypeScript for a seamless mobile experience.

Notifications You must be signed in to change notification settings

chayan-1906/Busgo-React-Native

Repository files navigation

🚌 BusGo - Bus Booking App (Expo)

Expo React Native TypeScript TanStack Query NativeWind

A sleek, modern bus booking application built with Expo and React Native, featuring Google Sign-In, interactive seat selection, and seamless booking management with production-ready architecture.

✨ Features

  • 🎨 Modern UI/UX - Tailwind CSS with custom Okra typography
  • 🚌 Bus Booking - Search routes, select seats, manage bookings
  • πŸ” Google Sign-In - Secure OAuth authentication
  • πŸ“± Cross-Platform - iOS and Android with native performance
  • πŸͺ‘ Interactive Seats - Real-time seat availability and selection
  • πŸ”— Deep Linking - Direct bus access via shareable URLs
  • ⚑ TanStack Query - Efficient data fetching and caching
  • πŸ’Ύ MMKV Storage - Lightning-fast local storage
  • 🎯 TypeScript - Full type safety and enhanced developer experience
  • πŸ“ Location Services - City-to-city route discovery

πŸ“± Screenshots

LoginScreen Home Screen DatePicker BusListScreen Sort SeatSelectionScreen Ticket Modal

πŸ“± Download & Try

Download APK

Download and install the APK to experience the bus booking app on your Android device

πŸ—οΈ Tech Stack

πŸ“± Frontend

  • βš›οΈ Expo 53.0.15 - Development platform
  • πŸ“˜ React Native 0.79.4 - Mobile app framework
  • πŸ—ΊοΈ React Navigation 7.x - Navigation with deep linking
  • 🎨 NativeWind 4.1.23 - Tailwind CSS for React Native

πŸ”„ State Management & Data

  • ⚑ TanStack Query 5.81.5 - Server state management
  • 🌐 Axios 1.10.0 - HTTP client for API requests
  • πŸ”‘ JWT Decode 4.0.0 - Token management

🎨 UI & Styling

  • 🎨 NativeWind 4.1.23 - Tailwind CSS styling
  • 🌈 React Native Linear Gradient 2.8.3 - Gradient effects
  • 🎯 React Native Heroicons 4.0.0 - Icon library
  • πŸ–ΌοΈ React Native SVG 15.9.0 - SVG support

πŸ”§ Authentication & Storage

  • πŸ” Google Sign-In 15.0.0 - OAuth authentication
  • πŸ’Ύ React Native MMKV 3.3.0 - Fast key-value storage

πŸ“± Device Features

  • πŸ“… DateTimePicker 8.4.2 - Native date/time selection
  • 🎭 React Native Reanimated 3.18.0 - Smooth animations
  • πŸ‘† React Native Gesture Handler 2.27.1 - Touch gestures
  • πŸ“€ React Native Share 12.1.0 - Native sharing
  • πŸ“Έ React Native View Shot 4.0.3 - Screenshot capture

πŸš€ Getting Started

Prerequisites

  • Node.js (β‰₯18.0.0)
  • Expo CLI
  • Expo account
  • Android Studio (Android)
  • Xcode (iOS - Mac only)

Installation

  1. Clone the repository

    git clone https://github.com/chayan-1906/Busgo-React-Native.git
    cd Busgo-React-Native
  2. Install dependencies

    npm install
  3. iOS Setup (Mac only)

    npm run pod-install
  4. Environment Setup

    Create .env file (refer to .env.example)

  5. Start Expo dev server

    npm start
  6. Run on device/simulator

    # Android
    npm run android
    
    # iOS
    npm run ios

πŸ“¦ Build for Production

Android APK

npm run generate-apk

APK will be generated at: android/app/build/outputs/apk/release/app-release.apk

iOS Build

Use Xcode for iOS production builds:

  1. Open ios/BusGo.xcworkspace
  2. Select target device/simulator
  3. Product β†’ Archive

πŸ—οΈ Project Structure

src/
β”œβ”€β”€ components/         # Reusable UI components
β”‚   β”œβ”€β”€ home/          # Home screen components
β”‚   β”œβ”€β”€ ui/            # Generic UI components
β”‚   └── ui/modals/     # Modal components
β”œβ”€β”€ screens/           # Application screens
β”œβ”€β”€ navigation/        # Navigation configuration
β”œβ”€β”€ service/           # API client and requests
β”‚   └── requests/      # API endpoint handlers
β”œβ”€β”€ types/             # TypeScript type definitions
β”œβ”€β”€ utils/             # Utility functions and constants
└── assets/            # Images, fonts, and static files

πŸ—„οΈ Backend API

The app uses a hosted Node.js backend. Local setup is optional.

Hosted API

  • Production: https://busgo-node-js.onrender.com/api/v1
  • Status: Live & Ready

Local Setup (Optional)

# Clone the backend repository
git clone https://github.com/chayan-1906/BusGo-Node.js.git
cd BusGo-Node.js

# Install dependencies
npm install

# Setup environment variables
cp .env.example .env

# Start server
npm run dev

API Endpoints

  • Authentication: /user/login (POST)
  • RefreshToken: /user/refresh-token (POST)
  • Cities: /city (GET)
  • Buses: /bus/search?from={from}&to={to}&date={date}&tags={tags}&sortBy={sortBy} (GET)
  • BusDetails: /bus?busId={busExternalId} (GET)
  • Tickets: /ticket (GET)
  • BookTicket: /ticket (POST)

Repository

πŸ”— BusGo Node.js Backend

πŸ”— Deep Linking

URL Scheme

busgo://bus/{busExternalId}

Examples

# Direct bus access
busgo://bus/BUS_12345

# Open from terminal (Android)
adb -s 368fef2d shell am start -a android.intent.action.VIEW -d "busgo://bus/BUS_12345"
xcrun simctl openurl booted "busgo://bus/BUS_12345"

🎯 Key Highlights

  • Production Ready: Optimised Expo prebuild for iOS and Android
  • Modern Architecture: Clean code with TypeScript and TanStack Query
  • Offline First: MMKV storage with optimistic updates
  • Secure: JWT authentication with Google Sign-In
  • Performance: 60fps animations with Reanimated 3
  • Developer Friendly: ESLint, Prettier, and hot reload

πŸ“‹ Requirements

Android

  • Min SDK: 21 (Android 5.0)
  • Target SDK: 34 (Android 14)
  • Architecture: arm64-v8a, armeabi-v7a

iOS

  • Min Version: iOS 13.0
  • Architecture: arm64

Development

  • Node.js: β‰₯18.0.0
  • Expo CLI: Latest
  • Android Studio: Latest stable

🀝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

  1. Fork the project
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

πŸ‘¨β€πŸ’» Author

Padmanabha Das

🌟 Show Your Support

If this project helped you, please give it a ⭐️!

πŸ“± Connect With Me

LinkedIn GitHub


Made with ❀️ by Padmanabha Das

⭐ Star this repo if you found it helpful!

Note: This is the Expo prebuild implementation. Bare React Native version also available.

About

A sleek 🚌 Bus Booking app with Google Sign-In πŸ”, TanStack Query ⚑, and modern UI powered by Tailwind CSS 🎨. Built with TypeScript for a seamless mobile experience.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 2

  •  
  •