Join Me - Activity Booking Platform

A React Native (Expo) application for organising and booking activities. Built to run on iOS, Android, and Web.

Features

For Organisers

• Create Activities: Define activities with name, description, photos, location (city and exact address), date range, and pricing
• Manage Slots: Configure available time slots for each activity (e.g., 5 slots per weekday from 9 AM)
• Slot Availability: Toggle slot availability when you're not available on certain days
• View Bookings: See all bookings for your activities with user details
• Revenue Tracking: Track total bookings and revenue for each activity

For Users

• Browse Activities: Search and filter activities by city, date range, and keywords
• View Details: See full activity information including location, pricing, and available slots
• Book Slots: Select and book available time slots with cash-on-arrival payment
• My Bookings: View all bookings - upcoming, past, and cancelled
• Cancel Bookings: Cancel upcoming bookings if plans change

Technical Features

• SQLite Database: Local database for offline capability
• Configurable Database Layer: Abstract interface allows easy swap to PostgreSQL, MySQL, etc.
• Cross-Platform: Runs on iOS, Android, and Web via Expo
• Responsive UI: Clean, modern design that works on all screen sizes

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Expo CLI (optional but recommended)
• iOS Simulator (for iOS development on Mac)
• Android Studio (for Android development)

Installation

# Navigate to the project directory
cd join-me

# Install dependencies
npm install

# Start the development server
npx expo start

Running the App

# Run on web browser
npm run web

# Run on iOS simulator
npm run ios

# Run on Android emulator
npm run android

Project Structure

join-me/
├── App.js                 # Main app entry point
├── src/
│   ├── components/        # Reusable UI components
│   │   ├── Button.js
│   │   ├── Input.js
│   │   ├── ActivityCard.js
│   │   ├── BookingCard.js
│   │   └── SlotCard.js
│   ├── context/           # React Context providers
│   │   └── AuthContext.js # Authentication state management
│   ├── database/          # Database layer
│   │   ├── DatabaseInterface.js  # Abstract interface
│   │   ├── SQLiteDatabase.js     # SQLite implementation
│   │   └── index.js              # Database export
│   ├── navigation/        # Navigation configuration
│   │   ├── AppNavigator.js
│   │   ├── AuthNavigator.js
│   │   ├── UserNavigator.js
│   │   └── OrganiserNavigator.js
│   ├── screens/           # App screens
│   │   ├── auth/
│   │   │   ├── LoginScreen.js
│   │   │   └── RegisterScreen.js
│   │   ├── organiser/
│   │   │   ├── OrganiserDashboard.js
│   │   │   ├── CreateActivityScreen.js
│   │   │   └── ManageActivityScreen.js
│   │   ├── user/
│   │   │   ├── ExploreScreen.js
│   │   │   ├── ActivityDetailsScreen.js
│   │   │   └── MyBookingsScreen.js
│   │   └── common/
│   │       └── ProfileScreen.js
│   └── utils/             # Utility functions
│       └── dateUtils.js
├── assets/                # Images and static assets
└── app.json              # Expo configuration

Database Schema

Users Table

Column	Type	Description
id	TEXT	Primary key (UUID)
email	TEXT	Unique email address
password	TEXT	User password (should be hashed in production)
name	TEXT	Full name
userType	TEXT	'organiser' or 'user'
phone	TEXT	Phone number (optional)
city	TEXT	City (optional)
createdAt	TEXT	ISO timestamp
updatedAt	TEXT	ISO timestamp

Activities Table

Column	Type	Description
id	TEXT	Primary key (UUID)
organiserId	TEXT	Foreign key to users
name	TEXT	Activity name
description	TEXT	Activity description
photoUri	TEXT	Photo URI (optional)
city	TEXT	City-level location
exactLocation	TEXT	Full address
startDate	TEXT	Start date (YYYY-MM-DD)
endDate	TEXT	End date (YYYY-MM-DD)
pricePerSlot	REAL	Price per booking
maxSlotsPerDay	INTEGER	Maximum slots per day
weekdaysOnly	INTEGER	1 for weekdays only

Slots Table

Column	Type	Description
id	TEXT	Primary key (UUID)
activityId	TEXT	Foreign key to activities
date	TEXT	Slot date (YYYY-MM-DD)
startTime	TEXT	Start time (HH:MM)
endTime	TEXT	End time (HH:MM)
isAvailable	INTEGER	1 if available

Bookings Table

Column	Type	Description
id	TEXT	Primary key (UUID)
userId	TEXT	Foreign key to users
slotId	TEXT	Foreign key to slots
activityId	TEXT	Foreign key to activities
status	TEXT	'confirmed', 'cancelled', or 'completed'
paymentMethod	TEXT	'cash_on_counter'
paymentStatus	TEXT	'pending', 'paid', or 'refunded'
totalAmount	REAL	Total booking amount

Switching Database

The app uses a database interface pattern. To switch from SQLite to another database:

1. Create a new implementation file (e.g., PostgresDatabase.js) that extends DatabaseInterface
2. Implement all required methods
3. Update src/database/index.js to import and export your new implementation

Example:

// src/database/index.js
import database from './PostgresDatabase'; // Switch implementation
export default database;

Payment Integration

Currently, the app supports "Cash on Counter" payment only. To add payment gateways:

1. Create a payment service in src/services/
2. Integrate with Stripe, PayPal, or other providers
3. Update the booking flow in ActivityDetailsScreen.js

API Integration

To connect to a backend API instead of local SQLite:

1. Create src/services/ApiService.js with HTTP client (axios/fetch)
2. Create src/database/ApiDatabase.js implementing DatabaseInterface
3. Map API endpoints to database methods
4. Switch the import in src/database/index.js

License

MIT License - Feel free to use this project for learning or commercial purposes.