Worldwise - Travel Tracker App

A React-based travel tracking application built with Vite, React Router, and Leaflet maps.

Local Development

Prerequisites

• Node.js 16+ and npm
• Backend API running on http://localhost:9000 (or configure with VITE_API_URL)

Installation & Setup

# Install dependencies
npm install

# Create .env.local for local development
cp .env.example .env.local

# Start the development server
npm run dev

# In a separate terminal, start the JSON server (for local backend)
npm run server

The app will be available at http://localhost:5173

Building for Production

# Build the optimized production bundle
npm run build

# Preview the production build locally
npm run preview

Deployment to Netlify

Option 1: Deploy via Netlify CLI

# Install Netlify CLI globally
npm install -g netlify-cli

# Login to Netlify
netlify login

# Deploy from project root
netlify deploy --prod

Option 2: Deploy via GitHub (Recommended)

1. Push code to GitHub

   git init
   git add .
   git commit -m "Initial commit"
   git branch -M main
   git remote add origin <your-github-repo-url>
   git push -u origin main

2. Connect to Netlify

   • Go to Netlify
   • Click "New site from Git"
   • Select your GitHub repository
   • Netlify will auto-detect the build settings from netlify.toml

Configuration

The netlify.toml file contains the deployment configuration:

• Build command: npm run build
• Publish directory: dist
• Routing: Configured for SPA (Single Page Application)

Environment Variables

For production on Netlify, you need to set the API endpoint:

1. In Netlify dashboard, go to Site settings → Build & deploy → Environment
2. Add an environment variable:
   • Key: VITE_API_URL
   • Value: Your production API URL (e.g., https://api.example.com)

Or edit the netlify.toml file directly and update the VITE_API_URL in the production context.

Project Structure

src/
├── components/        # React components
├── contexts/          # React context (CitiesContext, FakeAuthContext)
├── hooks/             # Custom hooks (useGeolocation, useUrlPosition)
├── pages/             # Page components
├── App.jsx            # Main app component
├── main.jsx           # React entry point
└── index.css          # Global styles

Features

• ✈️ Track cities and countries you've visited
• 🗺️ Interactive map powered by Leaflet
• 📍 Add new cities with geolocation
• 🔐 Protected routes with fake authentication
• 📱 Responsive design
• ⚡ Code splitting and lazy loading

Technology Stack

• React 18.2.0
• Vite 4.2.0
• React Router 6.9.0
• Leaflet 1.9.3
• React Leaflet 4.2.1
• React DatePicker 4.11.0

Notes

• The app uses a JSON Server mock backend by default for local development
• For production, you'll need to connect a real API backend
• Update the VITE_API_URL environment variable for your API endpoint
• Ensure CORS is properly configured on your backend API

Troubleshooting

"API not found" error on Netlify

• Verify VITE_API_URL is set correctly in Netlify environment variables
• Ensure your API backend is running and accessible from Netlify

Blank page after deployment

• The netlify.toml file handles SPA routing - all requests go to index.html
• Check browser console for errors

Cities not loading

• Verify the API endpoint is correct
• Check CORS headers on your backend API
• Ensure the backend is running and accessible