Frontend Setup and Usage Guide

This guide explains how to set up and run the frontend code for your project. It covers cloning the repository, installing dependencies, configuring Firebase, and running the application using Expo, React Native, and Android Studio. The app communicates with the backend Node.js API available at HikeMeet Backend Repository.

---

Prerequisites

Ensure you have the following installed on your system:

• Node.js (v16.x or higher)
• npm or yarn
• Expo CLI
• React Native
• Android Studio (for Android development and emulator)
• Git

---

Steps to Set Up the Frontend

1. Clone the Repository

git clone <repository_url>
cd <repository_name>

2. Install Dependencies

npm install

3. Configure Firebase

Update the .env file with your Firebase configuration:

# Firebase Configuration
FIREBASE_API_KEY=<your_firebase_api_key>
FIREBASE_AUTH_DOMAIN=<your_firebase_auth_domain>
FIREBASE_PROJECT_ID=<your_firebase_project_id>
FIREBASE_STORAGE_BUCKET=<your_firebase_storage_bucket>
FIREBASE_MESSAGING_SENDER_ID=<your_firebase_messaging_sender_id>
FIREBASE_APP_ID=<your_firebase_app_id>
FIREBASE_MEASUREMENT_ID=<your_firebase_measurement_id>
Local Server URL

EXPO_LOCAL_SERVER=http://localhost:5000

4. Start Android Studio Emulator

If you plan to use an Android emulator for testing:

1. Open Android Studio.
2. Go to Tools > AVD Manager.
3. Select or create an emulator (e.g., Pixel 4, API 30).
4. Start the emulator.

5. Start the Development Server

To run the application in development mode:

• Start the Expo server:

  npm start

• Run the app on Android Emulator:

  Press 'a' in the terminal to launch the app on the emulator.

• Run the app on a physical device:
  1. Install the Expo Go app from the Play Store.
  2. Scan the QR code generated by the Expo server.

7. Tailwind CSS Configuration

Tailwind CSS is configured using tailwind.config.js. You can customize the theme and addadditional classes if needed. To use Tailwind in components, use the className attribute.

8. Firebase Authentication

Firebase Authentication is already set up. To add new auth flows (e.g., Google Sign-In):

1. Go to the Firebase Console.
2. Enable the desired authentication method under Authentication > Sign-in method
3. Update the relevant parts of the code in src/services/authService.ts.

9. Backend Integration

The frontend communicates with the backend API available at HikeMeet Backend Repository. Ensure the backend server is running locally ordeployed to a live environment.

Update the EXPO_LOCAL_SERVER variable in the .env file with the backendserver URL.

---

Happy coding!