Stay Mate Hotel - Mobile

This is the Mobile portion of our final project of the Service Oriented Software Development course.

Table of Contents

• Technologies Used
• Required Dependencies
• Installation
• Before You Run
• Development
• Features
• Suggested VS Code Extensions
• Contributors

Technologies Used

• React Native
• Expo
• TypeScript
• Tailwind CSS
• Redux Toolkit
• TanStack React Query
• Axios

Required Dependencies

• Node.js v20.17 or later: Download Node.js
• Expo Go: This mobile app can be downloaded by scanning the QR code in Expo - Set up your environment page
• TypeScript

Make sure to have these installed before proceeding with the project setup.

Installation

Follow these steps to set up and run the application locally.

1. Clone the repository:

   git clone https://github.com/YGOhappy123/StayMateHotel-Mobile.git

2. Navigate to the project directory:

   cd StayMateHotel-Mobile

3. Install dependencies:

   npm install

Before You Run

Before running the project, make sure to set up the environment variables:

1. Create a .env file:

   In the root directory of your project (at the same level as .env.example), create a .env file.

2. Populate the environment variables:

   Copy the variables from .env.example into .env and replace the placeholder values with your actual configuration.

3. For collaborators:

   If you are a collaborator on this project, please contact the project owner to obtain the values for the environment variables.

Development

To start the development server, use:

npm run dev

This will start the Expo development server.

You can view the app by visiting http://localhost:3000 in your browser or scanning the QR code in the Terminal using your Expo Go mobile app.

Note: The color theme of the app will depend on your device's system settings.

Features

• Cross-Platform Development 📱 Build native apps for both iOS and Android from a single codebase.
• TypeScript Support 🛠 Enjoy static typing, better tooling, and a smoother development experience with TypeScript.
• Expo Managed Workflow ⚡ Streamlined development with Expo's easy setup, over-the-air updates, and powerful CLI tools.
• Fast Refresh 🚀 Instant feedback during development with Expo’s fast refresh feature.
• Customizable UI 🎨 Easily create custom, responsive user interfaces with React Native's flexible components.
• Built-in Expo Libraries 📦 Access to powerful Expo APIs for handling features like camera, notifications, sensors, and more.
• Third-Party Libraries Support 🌐 Seamless integration with popular libraries such as Axios, Redux, and React Navigation.
• Device-Specific Features 📱 Access to native device features like camera, GPS, and accelerometer using Expo SDK.
• Over-the-Air (OTA) Updates 🔄 Push updates to your app without requiring users to download a new version from the app store.
• Internationalization Ready 🌍 Easily support multiple languages and locales with libraries like react-native-localize.
• Styled with Tailwind CSS 🎨 for a modern, responsive design.
• State management with Redux Toolkit 🛠 for efficient state management.
• Data fetching with TanStack React Query 🔄 for powerful server state management.
• HTTP Requests with Axios 🌐 Simplified API integration for making HTTP requests to fetch and send data.

Suggested VS Code Extensions

Extension	Publisher	Required?	Supported features
Prettier - Code formatter	Prettier	Yes	Code formatting
Auto Rename Tag	Jun Han	No	Auto rename paired HTML/XML tag
Code Spell Checker	Street Side Software	No	Spelling checker for source code
ES7+ React/Redux/React-Native snippets	dsznajder	No	Code suggestions and snippets for React JS/TS
Multiple cursor case preserve	Cardinal90	No	Preserves case when editing with multiple cursors
Tailwind CSS IntelliSense	Tailwind Labs	No	Code suggestions for Tailwind CSS
TPretty TypeScript Errors	yoavbls	No	Make TypeScript errors prettier and more human-readable in VSCode

Contributors

Thanks to the following people for contributing to this project ✨:

YGOhappy123

DinhToanIT2003

Nguyen1609

vthanhdat99