WanderLog – Personal Travel Journal 🌍✈️

1. Project Idea & Description

The Problem

Modern travelers often struggle with fragmented memories. Photos are scattered across camera rolls, notes are spread across multiple applications, and social media platforms tend to emphasize public sharing rather than personal reflection.

The Solution

WanderLog is a private, distraction-free digital travel journal. It serves as a dedicated space where users can collect and organize their travel experiences—photos, precise locations, and personal notes—into a single, structured, and easily accessible timeline.

---

2. Core Features

• User Profile & Statistics Dashboard
  A comprehensive dashboard displaying real-time statistics such as the number of countries and cities visited.

• Digital Passport
  An automated visual passport that dynamically generates country flags based on travel entries.

• Smart Home Screen
  A central hub featuring recent trips, quick navigation, and a real-time search bar for fast access.

• Interactive Map
  A visual map-based representation of travel history using custom location markers.

• Memory Creation Tools
  Support for multi-photo uploads, GPS-based location tagging, and detailed personal journaling.

• Secure Authentication
  Login and registration system powered by Firebase Authentication to ensure data privacy.

---

3. Technical Implementation

Backend

• Firebase Authentication for secure user management
• Firebase Firestore for real-time NoSQL data storage and synchronization

Navigation

• Hybrid navigation architecture using Stack Navigator and Bottom Tab Navigator

APIs & Libraries

• react-native-maps – Global travel visualization on interactive maps
• expo-image-picker – Camera and gallery access for media uploads
• expo-location – GPS-based location detection
• Nominatim API – Reverse geocoding for converting coordinates into readable addresses

Project Structure

Click to expand the directory tree

WANDERLOG/
├── assets/               # Static assets (images, icons, fonts)
├── src/                  # Main source code
│   ├── components/       # Reusable UI components
│   ├── navigation/       # Navigation configuration (Stack & Tabs)
│   ├── screens/          # Application screens (UI Logic)
│   ├── services/         # Firebase & API configurations
│   └── utils/            # Helper functions (Flag rendering, etc.)
│       
├── App.js                # Main Entry Point
└── .env                  # Environment variables

4. Visual Journey (Screen-by-Screen)

I. Authentication & Personalized Profile

Login Interface	Profile Customization
Secure Firebase Authentication	Hybrid photo & avatar system

---

II. Discovery & Exploration

Home Screen (Search & Filter)	Travel Map Visualization
Real-time filtering with compact UI	Interactive map with custom markers

---

III. Capturing Memories

New Memory Creation	Memory Detail & Gallery
Multi-image upload with GPS tagging	Carousel image gallery with journaling

---

IV. Travel Achievements

Digital Passport & Statistics	Visited Countries List
Automated stats and dynamic flags	ISO-based dynamic flag rendering

---

5. Functional Requirements Fulfillment

The application fulfills all requirements defined in the project proposal:

• CRUD Operations
  Users can create, read, update, and delete travel memories.

• Data Persistence
  Cloud-based storage ensures all data is preserved across sessions and devices.

• Hardware Integration
  Native access to camera, photo gallery, and GPS services.

---

6. Conclusion

WanderLog successfully demonstrates essential mobile application development concepts, including state management, asynchronous API usage, cloud database integration, and hardware access. It is a complete and functional mobile application designed for secure and personal travel documentation.

7. Setup & Execution Instructions

To run this project locally, follow the steps below.

Prerequisites

• Install Node.js (LTS version recommended)
• Install Expo Go on your iOS or Android device
• Create a Firebase Project with the following services enabled:
  • Authentication
  • Firestore
  • Storage

Installation

Clone the repository:

git clone https://github.com/miriyayy/WanderLog.git
cd WanderLog

Install dependencies:

npm install

Note: node_modules is excluded from the submission as per course requirements.

Environment Configuration

Create the following file:

services/firebaseConfig.js

Add your Firebase SDK configuration credentials into this file.

Running the Application

Start the Expo development server:

npx expo start

Scan the QR Code:

-Open the Expo Go app on your mobile device

-Scan the QR code generated in the terminal to launch the application

8. Development Challenges & Solutions

Challenge: Dynamic Flag Rendering for Localized Country Names

Solution: Implemented a custom mapping mechanism that converts country data retrieved from the Nominatim API into ISO 3166-1 alpha-2 country codes. These codes are then transformed into Unicode Regional Indicator Symbols, ensuring correct and consistent flag emoji rendering across different languages and locales.

Challenge: Real-Time State Synchronization Between Profile and Home Screens

Solution: Utilized the useIsFocused hook from React Navigation to trigger data re-fetching whenever the screen gains focus. This approach ensures that updates (such as username changes) are immediately reflected in the Home screen’s welcome message without requiring an application restart.