What’s Around Me?

Location-based discovery app built with React Native (Expo) and a Node.js + Express backend. The app retrieves the user’s current location, fetches nearby points of interest using the Google Places API, and displays results on both an interactive map and a searchable list.

Features

Core

• Location permission handling (iOS-compatible via Expo Go).
• Accurate current-location retrieval using expo-location.
• Interactive map using react-native-maps.
• Nearby places search with filters:
  • Category filtering
  • Keyword search
• List and Map views with independent refresh and loading logic.
• Place detail screen with:
  • Address
  • Opening hours
  • Ratings
  • Website
  • Phone
  • Navigation link

Backend

• Express server providing:
  • /api/places/nearby
  • /api/places/details/:placeId
  • /api/places/categories
• Internal service layer using Axios for Google Places API.
• CORS configured for Expo development.
• Error handling middleware.

Tech Stack

Mobile App

• React Native (Expo)
• TypeScript
• React Navigation (Stack + Tabs)
• react-native-maps
• expo-location
• Axios
• Context API for state

Backend

• Node.js + Express
• Axios
• Google Places API
• Helmet + Morgan
• dotenv

Folder Structure (Simplified)

WhatsAroundMe/
│
├── server/
│   ├── src/
│   │   ├── controllers/
│   │   ├── middleware/
│   │   ├── routes/
│   │   ├── services/
│   │   └── server.js
│   └── .env
│
├── src/
│   ├── screens/
│   ├── navigation/
│   ├── context/
│   ├── services/
│   ├── components/
│   ├── constants/
│   └── types/
│
├── App.tsx
├── app.json
├── .env
└── package.json

Environment Variables

Mobile .env

API_URL=http://YOUR_LOCAL_IP:3001/api

Server .env

PORT=3001
NODE_ENV=development
GOOGLE_PLACES_API_KEY=YOUR_KEY
CORS_ORIGIN=http://localhost:3000,exp://192.168.*.*:8081

Running the Project

Option 1: Start the Full App (Recommended)

Run this from the project root:

npm install
npm run dev

This starts both:

• the Express backend on port 3001
• the Expo development server for the mobile app

You do not need to run npm run dev inside server/ as well.

Option 2: Start Only the Backend

Use this only when you want to run the API by itself:

cd server
npm install
npm run dev

Option 3: Start Only the Expo App

Use this only when you want to run the mobile app without starting the backend command from the root script:

npm install
npm start

If you are using Expo Go, make sure API_URL in the root .env points to your computer's LAN IP, for example http://192.168.x.x:3001/api.

API Endpoints

GET /api/places/nearby

Query params:

• lat
• lng
• radius (optional)
• type (optional)
• keyword (optional)

GET /api/places/details/:placeId

GET /api/places/categories

How It Works

Location Flow

1. Request foreground permission.
2. Retrieve coordinates.
3. Update global context.
4. Trigger nearby search.

Places Retrieval Flow

1. Mobile calls backend with coordinates.
2. Backend calls Google Places Nearby Search.
3. Response normalized.
4. Results displayed in map/list.
5. Filters modify query.

Place Detail Flow

1. Mobile calls /details/:placeId.
2. Backend queries Place Details API.
3. Response normalized for display.

Known Constraints

• iOS builds require Mac or EAS.
• Google Places API quota limits.
• No marker clustering yet.
• No offline caching.

Future Enhancements

• Favorites.
• Marker clustering.
• Infinite scrolling.
• Offline caching.
• Reviews.
• Theme switching.