EasyHosts App - React Native Frontend

Trabalho de Conclusão de Curso (TCC) apresentado na FATEC Guaratinguetá, sob orientação do Prof. João Mod, no curso de Análise e Desenvolvimento de Sistemas, ano de 2023.

Overview

EasyHosts App is a comprehensive hotel management mobile application built with React Native and Expo. This app serves as a mobile solution for both guests and hotel staff to manage hotel operations including bookings, room service requests, and staff workflows.

Architecture

graph TB
    UI[Mobile App - React Native plus Expo] --> RN[React Navigation]
    RN --> Auth[AuthContext - Custom Context]
    Auth --> AsyncStorage[Async Storage - react-native-async-storage]
    Auth --> TanStack[React Query - tanstack react-query]
    TanStack --> API[axiosClient - APIService]
    API --> Services[Service - Requests and Mutations]
    Services --> Queries[Queries - Data Fetching]
    Services --> Mutations[Data Mutations - POST PUT DELETE]
    UI --> Components[Reusable Components]
    UI --> Screens[Feature Screens]
    Components --> Styled[styled-components - Styling Framework]
    RN --> Native[Native Modules - AsyncStorage - SafeArea]
    Components --> Theme[RN Elements - rneui base]
    Styled --> Animation[react-native-animatable - Animations]
    API --> JWT[JWT Token - Authentication]
    API --> Local[Local Storage]
    Screens --> Context[Auth Context]
    Screens --> Menu[Navigation Menu]
    Screens --> Card[Card Components]
    Screens --> Button[Interactive Buttons]

Project Structure

easyhosts-app/
├── src/
│   ├── @types/                    # TypeScript type definitions
│   ├── components/               # Reusable UI components
│   │   ├── Button/              # Custom button components
│   │   ├── Card/                # Display components
│   │   ├── Input/               # Form input fields
│   │   ├── Menu/                # Navigation menu
│   │   └── Modal/               # Modal dialogs
│   ├── context/                 # React context providers
│   │   ├── AuthContext.ts       # Authentication context
│   │   └── AuthProvider.tsx     # Authentication provider component
│   ├── hooks/                   # Custom React hooks
│   ├── routes/                  # Application routing configuration
│   ├── screens/                 # Feature screens
│   │   ├── Home/               # Main dashboard
│   │   ├── Login/              # User authentication
│   │   ├── Welcome/            # Onboarding/introductory screen
│   │   ├── Booking/            # Booking information display
│   │   ├── OrderServices/      # Service request management
│   │   └── Manager/            # Administrative interface
│   ├── service/                 # API service layer
│   │   ├── @types/             # Service response type definitions
│   │   ├── index.ts            # Service configuration and setup
│   │   ├── mutations/          # Data mutation operations
│   │   └── queries/            # Data query operations
│   └── styles/                  # Styled-components configuration
├── .eslintrc.json              # ESLint configuration
├── .prettierrc                 # Prettier formatting configuration
├── .editorconfig               # Editor configuration
├── .gitignore                  # Git ignore patterns
├── babel.config.js            # Babel configuration
├── index.d.ts                  # TypeScript definitions
├── tsconfig.json              # TypeScript configuration
├── package.json               # Project dependencies and scripts
├── app.json                    # Expo configuration
├── README.md                   # This documentation
└── assets/                     # Static assets (images, logos)

Key Features

For Guests

View Bookings: Browse personal booking information and details
Room Services: Request and track room service requests (Cleaning, Food, Maintenance)
Service Tracking: Monitor service request status (Open, In Progress, Completed, Closed)

For Hotel Staff

Assign Services: Assign service requests to team members
Update Status: Change service statuses (In Progress, Completed)
View Assignments: See all assigned service requests

For Management

Management Interface: Administrative dashboard for hotel operations
User Management: Manage guest and staff accounts
Service Oversight: Monitor and control all service operations

Technology Stack

Component	Technology	Version	Purpose
Framework	React Native	0.81.5	Native mobile development
Runtime	Expo	~54.0.0	Cross-platform mobile framework
Navigation	React Navigation	^7.0.0	App navigation management
State Management	React Query	^5.0.0	Server state management
Authentication	JWT + AsyncStorage	Built-in	User authentication & persistence
Styling	Styled Components	^6.0.0	CSS-in-JS styling
Animation	react-native-animatable	^1.4.0	UI animations
Icons	Ionicons	@expo/vector-icons	Icon library
Date Handling	luxon	^3.5.0	Date/time formatting
UI Framework	React Native Elements	5.0.0	UI components

API Integration

The frontend connects to the EasyHosts .NET backend API located in the parent directory (/home/aureo.filho/Área de trabalho/refactor/Easy.Hosts).

Core Backend Endpoints

POST /api/account/login - User authentication
GET /api/bookings/{userId} - Fetch guest bookings
GET /api/orderservice/user/{userId} - Get user's room services
GET /api/orderservice/employee/{employeeId} - Get employee's assigned services
PATCH /api/orderservice/{id} - Assign employee to service
PATCH /api/orderservice/completedOrderService/{id} - Mark service as completed

Development Setup

Prerequisites

Node.js and npm/yarn (v14 or later)
Expo CLI (npx create-expo-app)
TypeScript support
React Native development environment

Installation

# Clone the repository
git clone <repository-url>
cd easyhosts-app

# Install dependencies
yarn install
# or
npm install

Development Server

# Start development
yarn start
# or
npm start

# Run on specific platforms
yarn android
# or
yarn ios

# Run web version (for desktop testing)
yarn web

Configuration

app.json (Expo Configuration)

{
  "name": "easyhosts-app",
  "slug": "easyhosts-app",
  "version": "1.0.0",
  "orientation": "portrait",
  "icon": "./assets/icon.png",
  "userInterfaceStyle": "light",
  "splash": {
    "image": "./assets/splash.png",
    "resizeMode": "contain",
    "backgroundColor": "#ffffff"
  },
  "updates": {
    "fallbackToCacheTimeout": 0
  },
  "assetBundlePatterns": ["**/*"],
  "ios": {
    "supportsTablet": true,
    "bundleIdentifier": "com.easyhosts.app"
  },
  "android": {
    "package": "com.easyhosts.app",
    "adaptiveIcon": {
      "foregroundImage": "./assets/adaptive-icon.png",
      "backgroundColor": "#ffffff"
    }
  },
  "web": {
    "bundler": "metro",
    "outputPath": "dist/"
  },
  "extra": {
    "eas": {
      "projectId": "your-project-id"
    }
  }
}

package.json (Scripts)

{
  "scripts": {
    "start": "expo start",
    "android": "expo run android",
    "ios": "expo run ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "lint": "eslint .",
    "format": "prettier --write .",
    "test": "jest"
  }
}

Key Files and Their Purpose

Root Level Files

App.tsx: Root component with main application setup
package.json: Dependencies and scripts
tsconfig.json: TypeScript configuration
app.json: Expo configuration

Core Application Files

src/context/AuthContext.ts & AuthProvider.tsx: Authentication management
src/routes/index.tsx: Application routing configuration
src/service/index.ts: API configuration and axios client setup
src/service/queries/: Data fetching operations
src/service/mutations/: Data mutation operations

UI Components

src/components/: Reusable UI components
src/screens/: Feature-specific screens
src/styles/: Styled-components configuration

Screens and Navigation

Public Screens (No Authentication Required)

Welcome: Introductory screen shown to first-time users
Login: User authentication form

Protected Screens (Requires Authentication)

Home: Main dashboard with booking and service overview
Booking: Detailed booking information display
OrderServices: Service request management for logged-in users

Staff/Management Screens

Manager: Administrative interface for hotel management
ListOrderService: Staff view for managing assigned services

Navigation Flow

graph TD
    A[Welcome] --> B[Login]
    B --> C[Home]
    C --> D[Booking]
    C --> E[OrderServices]
    E --> F[ListOrderService]
    D --> C
    C --> G[Manager]

Development Workflow

Authentication Flow

User opens app and sees Welcome screen
User enters credentials on Login screen
Successful login stores JWT token and user data in AsyncStorage
Sets up Axios interceptor with token for API calls
Redirects to Home screen based on user role

Service Request Flow

User selects "Request Service" from Home screen
Chooses service type (Cleaning, Food, Maintenance)
Selects associated booking
Submits service request to backend
Service appears in user's OrderServices list with "OPEN" status
Staff member assigns service and changes status to "INPROGRESS"
Service is completed and marked as "COMPLETED"

Staff Workflow

Staff member logs in as Manager or Employee
Views assigned services on ListOrderService screen
Changes status from "OPEN" to "INPROGRESS"
Updates status to "COMPLETED" when done
System notifies user of completion

Testing

Testing Setup

The application uses:

Jest: JavaScript testing framework
React Testing Library: Testing utilities for React components
TypeScript: Static type checking

Running Tests

# Run all tests
yarn test
# or
npm test

# Run specific test file
yarn test src/screens/Login.test.tsx

Test Structure

tests/
├── __mocks__/          # Mock files
├── unit/              # Unit tests
└── integration/       # Integration tests

Code Quality

Linting

ESLint: Code linting and style checking
Prettier: Code formatting
TypeScript: Static type checking

Code Standards

Modular Components: Reusable UI components
Type Safety: Comprehensive TypeScript typing
Clean Architecture: Separation of concerns
Component Patterns: Functional components with hooks
Responsive Design: Cross-platform compatibility

Deployment

Production Build

# Build for production
yarn build

# Deploy to app stores
yarn android build:generate
yarn ios build:generate

CI/CD

The application can be integrated with CI/CD pipelines for automated testing and deployment.

Troubleshooting

Common Issues

"AsyncStorage is not working on web"

// Add this to your code to avoid errors on web
if (Platform.OS !== 'web') {
  // Use AsyncStorage
}

Expo CLI Not Found

# Install Expo CLI globally or use npx
npx expo install
npx expo start

TypeScript Errors

# Type check your code
yarn typecheck
# or if not configured, use:
npx tsc --noEmit

Contributing

Development Guidelines

Code Quality: Follow the existing code style and patterns
Testing: Write comprehensive tests for new features
Documentation: Update documentation for new features
Linting: Run linting before committing changes
Type Safety: Ensure TypeScript type checking passes

Pull Request Process

Create a feature branch
Make your changes
Run tests and linting
Create a Pull Request
Request code review

License

This project is licensed under the MIT License.

Acknowledgements

React Native & Expo teams for the mobile development platform
React Navigation team for navigation solutions
TanStack React Query team for server state management
Ionicons team for icon library
The community for open-source React Native packages

Support

For issues or questions, please:

Check the project's GitHub issues
Review the documentation
Contact the development team

Note: This mobile application connects to the EasyHosts backend API (Easy.Hosts project in the parent directory). For backend documentation, refer to the README.md file in the Easy.Hosts directory.

Name		Name	Last commit message	Last commit date
Latest commit History 43 Commits
assets		assets
src		src
.editorconfig		.editorconfig
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.prettierrc		.prettierrc
App.tsx		App.tsx
README.md		README.md
app.json		app.json
babel.config.js		babel.config.js
index.d.ts		index.d.ts
package.json		package.json
tsconfig.json		tsconfig.json
yarn.lock		yarn.lock

Folders and files

Latest commit

History

Repository files navigation