Park Activities App

A cross-platform mobile and web application for managing and discovering park activities. Built with React Native (Expo), TypeScript, and an object-oriented architecture.

Features

• 📱 Cross-Platform: Works on iOS, Android, and Web browsers
• 🖥️ Desktop Support: Additional admin and office pages for desktop browsers
• 🔧 TypeScript: Full type safety with TypeScript/TSX
• 🏗️ OOP Architecture: Object-oriented structure with classes for models and services
• ☁️ AWS Ready: Designed for AWS Lambda and REST API backend integration
• 🔐 Auth Ready: Structure in place for user authentication (to be implemented)

Project Structure

src/
├── components/          # Reusable React components
│   ├── Button.tsx
│   └── ActivityCard.tsx
├── models/             # OOP model classes
│   ├── Activity.ts
│   └── User.ts
├── screens/            # Screen components (pages)
│   ├── HomeScreen.tsx
│   ├── ActivitiesScreen.tsx
│   ├── AdminDashboardScreen.tsx
│   └── OfficePortalScreen.tsx
├── services/           # Service classes for API calls
│   ├── BaseService.ts
│   ├── ActivityService.ts
│   └── AuthService.ts
├── types/             # TypeScript type definitions
│   ├── index.ts
│   ├── Activity.ts
│   └── User.ts
└── utils/             # Utility classes
    ├── Config.ts
    └── PlatformDetector.ts

Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Expo CLI (optional, but recommended)

Installation

1. Install dependencies:

npm install

2. Start the development server:

npm start

This will open the Expo development tools. You can then:

• Press i to open iOS simulator
• Press a to open Android emulator
• Press w to open in web browser
• Scan QR code with Expo Go app on your phone

Running on Specific Platforms

# iOS
npm run ios

# Android
npm run android

# Web
npm run web

Configuration

AWS API Configuration

Update the API endpoint in src/utils/Config.ts:

this.API_BASE_URL = 'https://your-api-gateway-url.execute-api.region.amazonaws.com/prod';

Or set it via environment variable:

EXPO_PUBLIC_API_URL=https://your-api-url.com

Architecture

Object-Oriented Design

The project follows an OOP approach with:

• Models: Classes that represent data entities (Activity, User)
• Services: Classes that handle business logic and API calls
• Components: React components for UI
• Utils: Utility classes for platform detection, configuration, etc.

Example: Using Services

import { ActivityService } from './services/ActivityService';

const activityService = ActivityService.getInstance();
const response = await activityService.getActivities();

if (response.success && response.data) {
  const activities = response.data.items;
  // Use activities...
}

Example: Using Models

import { Activity } from './models/Activity';

const activity = Activity.fromJSON(apiResponse);
if (activity.isAvailable()) {
  const spots = activity.getRemainingSpots();
}

Platform Detection

The app automatically detects the platform and adjusts the UI:

• Mobile: Full-screen experience with bottom navigation
• Desktop: Additional admin/office pages, wider layouts

import { PlatformDetector } from './utils/PlatformDetector';

const detector = PlatformDetector.getInstance();
if (detector.isDesktopPlatform()) {
  // Show admin features
}

Next Steps

1. User Authentication: Implement login/register functionality

   • Update AuthService.ts with token storage
   • Add login/register screens
   • Implement protected routes

2. AWS Lambda Integration:

   • Deploy your Lambda functions
   • Update API endpoints in Config.ts
   • Test API integration

3. Additional Features:

   • Activity detail screens
   • User profile pages
   • Push notifications
   • Offline support

Development Notes

• All services use singleton pattern for consistency
• Models include helper methods for business logic
• Services extend BaseService for common API functionality
• Platform-specific code is handled via PlatformDetector

Deployment

Web Deployment

npm run build:web

The built files will be in the web-build directory.

Mobile App Deployment

For iOS and Android, use Expo's build service or EAS Build:

# Install EAS CLI
npm install -g eas-cli

# Configure
eas build:configure

# Build
eas build --platform ios
eas build --platform android

License

MIT