Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/astrxnomo/tourify/llms.txt

Use this file to discover all available pages before exploring further.

The Tourify frontend is a React Native app built with Expo 54, targeting iOS, Android, and web browsers from a single codebase. It communicates with the Laravel backend exclusively via HTTP, attaching a Sanctum bearer token to every authenticated request. Tokens are persisted between sessions using Expo SecureStore on native platforms and localStorage on web.
Before starting, make sure you have:
  • Node.js 18 or higher — check with node --version
  • A running Tourify backend — follow the Backend Setup guide first, then note the URL shown by php artisan serve (default: http://localhost:8000)

​
Setup steps

1

Navigate to the frontend directory

From the repository root, change into the frontend folder.
cd tourify/frontend
2

Install dependencies

Install all JavaScript packages declared in package.json, including Expo, React Navigation, and Expo SecureStore.
npm install
3

Configure the API base URL

The app derives every API request from the API_URL constant defined at the top of services/post.js. Open the file and update the value to match your running backend:
// frontend/services/post.js
const API_URL = "http://localhost:8000/api";
If you are testing on a physical device (via Expo Go), replace localhost with your machine’s local IP address — for example http://192.168.1.42:8000/api — because the device cannot reach localhost on your development machine.All HTTP requests in the app flow through the helpers exported by this file (get, post, patch, del). Each call automatically attaches the stored bearer token as an Authorization header when the user is logged in:
async function getAuthHeaders() {
  const token = await storage.getItem("auth_token");
  return {
    "Content-Type": "application/json",
    Accept: "application/json",
    ...(token ? { Authorization: `Bearer ${token}` } : {}),
  };
}
4

Start the Expo development server

Launch the Metro bundler and Expo development server.
npm start
The terminal will display a QR code along with keyboard shortcuts for opening the app on a connected simulator or device.
5

Open the app on a device or simulator

Choose the platform you want to run on:
  • Physical device — install Expo Go from the App Store or Google Play, then scan the QR code shown in the terminal.
  • iOS Simulator — press i in the Metro terminal, or run npm run ios.
  • Android Emulator — press a in the Metro terminal, or run npm run android.
  • Web browser — press w in the Metro terminal, or run npm run web.
Expo Go is the fastest way to test on a real device without building a native binary. Install it once, scan the QR code, and your changes appear live over the network every time you save a file.

​
Run commands

All platform targets are available as npm scripts defined in package.json: 
# Opens the Metro bundler with an interactive menu.
# Press i, a, or w to choose iOS, Android, or web.
npm start

​
App navigation structure

Tourify uses React Navigation with a two-level structure: a native stack wrapping a set of bottom tabs for the main app, and a separate stack for the unauthenticated flows.

​
Bottom tabs (authenticated)

Once a user is logged in they land on the tab bar with four destinations:
TabScreenDescription
Home (Inicio)HomeScreenFeatured places, categories, and promotions. Supports text search and category filtering.
Explore (Explorar)ExploreScreenBrowse all cities, categories, and upcoming events in a card layout.
Favorites (Favoritos)FavoritesScreenAll places, events, and cities the user has saved. Powered by the GET /api/favorites endpoint.
Profile (Perfil)ProfileScreenAccount details, access to registrations, notifications, and logout.

​
Stack screens (authenticated)

Tapping on a card in any tab pushes one of the following detail screens onto the native stack:
Screen nameRoute triggerDescription
CityDetailTap a city cardFull city overview with its places and events.
PlaceDetailTap a place cardPlace details, photo, stats, and user reviews.
EventDetailTap an event cardEvent information, registration, and reviews.
CategoryDetailTap a category chipAll places belonging to a specific category.
NotificationsNotification bell in ProfilePaginated in-app notifications with mark-as-read.
MyRegistrations”Mis eventos” in ProfileList of events the authenticated user has registered for.

​
Auth stack (unauthenticated)

Users who are not logged in are routed to:
  • Login — email and password form with Sanctum token storage
  • Register — account creation
  • ForgotPassword — password recovery via email

Build docs developers (and LLMs) love

Get started for freeTalk to us