🍽️ Riviera - Cafeteria Seat Booking System

A production-ready React Native mobile application for booking cafeteria seats at IBM. Built with Expo, TypeScript, and a custom design system.

📱 Features

Core Functionality

• IBM w3 SSO Authentication - Secure login with IBM credentials
• Real-time Seat Availability - View available seats across 2 floors
• Visual Seat Selection - BookMyShow-style circular cafeteria layout
• Multi-seat Booking - Choose 1-5 seats via a stepper and select the same count on the map
• Smart Check-In System - 10-minute check-in window after slot starts
• Booking Management - View, manage, and cancel bookings
• Auto-expiration - Unused bookings automatically expire

Cafeteria Layout

• 2 Floors - Ground Floor & First Floor
• 10 Tables per floor - Arranged in circular layout
• 5 Seats per table - Total of 100 seats
• Visual Selection - See the entire floor layout at once

Booking Flow

1. Select Date - Choose from next 7 days
2. Select Time Slot - 4 lunch slots (12:00 PM - 2:00 PM)
3. Select Floor - Ground or First Floor
4. Select Seat(s) - Interactive circular cafeteria view with multi-select (match the seat count you chose)
5. Confirm - Review and confirm all selected seats

🏗️ Architecture

Project Structure

Riviera/
├── src/
│   ├── components/          # Reusable UI components
│   │   ├── Button.tsx
│   │   ├── Card.tsx
│   │   ├── EmptyState.tsx
│   │   ├── Loading.tsx
│   │   ├── SeatIcon.tsx
│   │   ├── SeatLegend.tsx
│   │   └── TableLayout.tsx
│   ├── constants/           # App constants & config
│   │   ├── cafeteriaLayout.ts
│   │   ├── config.ts
│   │   ├── theme.ts
│   │   └── timeSlots.ts
│   ├── context/            # React Context providers
│   │   ├── AuthContext.tsx
│   │   └── BookingContext.tsx
│   ├── navigation/         # Navigation setup
│   │   ├── BookNavigator.tsx
│   │   ├── MainNavigator.tsx
│   │   └── RootNavigator.tsx
│   ├── screens/            # Screen components
│   │   ├── booking/
│   │   │   ├── SelectDateScreen.tsx
│   │   │   ├── SelectTimeSlotScreen.tsx
│   │   │   ├── SelectFloorScreen.tsx
│   │   │   ├── SelectSeatScreen.tsx
│   │   │   └── ConfirmBookingScreen.tsx
│   │   ├── HomeScreen.tsx
│   │   ├── LoginScreen.tsx
│   │   ├── MyBookingsScreen.tsx
│   │   └── ProfileScreen.tsx
│   ├── services/           # API services
│   │   └── api.ts
│   └── types/             # TypeScript definitions
│       └── index.ts
├── App.tsx
└── package.json

Tech Stack

• Framework: Expo with TypeScript
• Navigation: React Navigation v6 (Stack + Bottom Tabs)
• State Management: Context API
• Date Handling: date-fns
• Storage: AsyncStorage
• Design: Custom IBM-inspired design system

🚀 Getting Started

Prerequisites

• Node.js 18+ (Expo SDK 54 requirement)
• npm (ships with Node) or yarn
• Expo CLI (optional; npx expo start works without a global install)
• iOS Simulator (Mac) or Android Emulator (or a real device with Expo Go)

Installation

1. Install dependencies

cd Riviera
npm install

2. Start the development server

npm start
# or
npx expo start

3. Run on your device/emulator

• iOS: Press i or scan the QR with the Camera app (Expo Go)
• Android: Press a or scan the QR with Expo Go
• Web: Press w

4. If Metro cache misbehaves

npm start -- --clear

📐 Design System

Color Palette

• Primary: IBM Blue (#0F62FE)
• Secondary: Purple (#8A3FFC)
• Success: Green (#24A148)
• Warning: Yellow (#F1C21B)
• Error: Red (#DA1E28)

Booking Status Colors

• Available: Green
• Booked: Red
• Selected: Blue
• Checked In: Purple

Typography

• H1: 32px, Bold
• H2: 24px, Semibold
• H3: 20px, Semibold
• Body: 16px, Regular
• Caption: 12px, Regular

🔐 Authentication

Currently uses mock authentication. To integrate IBM w3 SSO:

1. Update src/constants/config.ts with your SSO credentials:

SSO_CONFIG: {
  CLIENT_ID: 'your-ibm-w3-client-id',
  REDIRECT_URI: 'riviera://auth/callback',
  AUTHORIZATION_ENDPOINT: 'https://w3id.sso.ibm.com/auth/...',
  TOKEN_ENDPOINT: 'https://w3id.sso.ibm.com/auth/...',
}

2. Update src/services/api.ts authApi.login() to handle real SSO flow

🎯 API Integration

Current Setup

The app uses mock APIs with simulated delays. All mock data is in src/services/api.ts.

Switching to Real API

1. Update src/constants/config.ts:

API_BASE_URL: 'https://your-api-domain.com',
ENABLE_MOCK_API: false,

2. Update API functions in src/services/api.ts to call real endpoints

API Endpoints Needed

POST   /api/auth/login          - Login with SSO
POST   /api/auth/logout         - Logout
GET    /api/bookings            - Get user bookings
POST   /api/bookings            - Create booking
POST   /api/bookings/:id/checkin - Check in
DELETE /api/bookings/:id        - Cancel booking
GET    /api/availability?date=  - Get seat availability

📊 State Management

AuthContext

• User authentication state
• Login/logout functionality
• Session persistence with AsyncStorage

BookingContext

• Booking list management
• Create, check-in, cancel operations
• Seat availability data

🎨 UI Components

Core Components

• Button - Primary, secondary, outline, ghost variants
• Card - Elevated cards with shadows
• Loading - Full-screen loading indicator
• EmptyState - Empty state with icon and message

Booking Components

• SeatIcon - Individual seat representation
• TableLayout - Circular table with 5 seats
• SeatLegend - Color-coded seat status legend

📱 Screens

Authentication

• LoginScreen - IBM w3 SSO login

Main App

• HomeScreen - Dashboard with quick actions
• MyBookingsScreen - View and manage bookings with check-in
• ProfileScreen - User profile and app info

Booking Flow

• SelectDateScreen - Calendar-style date picker
• SelectTimeSlotScreen - Time slots with availability
• SelectFloorScreen - Floor selection (2 floors)
• SelectSeatScreen - Visual seat selection (circular layout)
• ConfirmBookingScreen - Review and confirm

🧪 Testing

Run the app and test:

1. Login flow
2. Date and time slot selection
3. Circular seat selection on both floors
4. Booking confirmation
5. Check-in within 10-minute window
6. Booking cancellation
7. View past bookings

🚢 Deployment

Build for Production

iOS:

eas build --platform ios

Android:

eas build --platform android

Configure EAS Build

Create eas.json:

{
  "build": {
    "production": {
      "ios": {
        "distribution": "internal"
      },
      "android": {
        "distribution": "internal"
      }
    }
  }
}

📝 Configuration

Time Slots

Edit src/constants/timeSlots.ts to modify lunch hours:

export const TIME_SLOTS: TimeSlot[] = [
  { id: 'slot-1', startTime: '12:00', endTime: '12:30', ... },
  // Add more slots
];

Cafeteria Layout

Edit src/constants/cafeteriaLayout.ts to change floor/table/seat configuration

Check-in Window

Edit src/constants/timeSlots.ts:

export const CHECK_IN_WINDOW_MINUTES = 10;

🐛 Troubleshooting

Common Issues

Metro bundler error:

npm start -- --reset-cache

AsyncStorage not found:

npx expo install @react-native-async-storage/async-storage

Navigation type errors:

• Check src/types/index.ts navigation types match your navigator setup

react-native-screens version warning:

• The project pins react-native-screens@~4.16.0 (Expo SDK 54 expectation). If you see a warning, run:

npx expo install react-native-screens@~4.16.0

📄 License

Internal IBM use only.

👥 Team

Built by IBM Engineering Team for cafeteria management.

---

🎯 Next Steps (Optional Enhancements)

1. Push Notifications - Remind users to check in
2. QR Code Check-in - Scan to check in at cafeteria
3. Favorites - Save preferred seats
4. Analytics - Track popular times/seats
5. Admin Panel - Manage cafeteria settings
6. Waitlist - Join waitlist for full slots
7. Social Features - See which colleagues are booking
8. Menu Integration - View daily menu

---

Version: 1.0.0
Last Updated: January 2026