Travel Journal App

"Animals like birds and whales return to the same migration routes year after year, remembering their paths across continents. Humans? We forget the ramen shop we ate at last night. WanderPath helps us remember and share our journeys."

People travel through cities but forget the routes they took (where they walked, shopped, ate). When recommending trips to friends, it's hard to recall exact paths, not just single spots. Current tools (Google Maps "Starred" places) don't show the lived journey.

Just like birds, whales, and butterflies remember and retrace migration routes, our platform lets travelers log their personal travel routes and share them with others.

• 🗺️ Drop Pins: Click on the map to drop pins at restaurants, shops, attractions
• 🛤️ Build Migration Trails: Pins are auto-connected into a trail (like a bird's flight path)
• 🌐 Explore Community Trails: Search a city → see migration routes made by others
• ⭐ Crowdsourced Memory Paths: Popular routes rise to the top

1. Log Your Route (Drop Pins)

   • Click on the map to drop pins at restaurants, shops, attractions
   • Each pin = memory

2. Build a Migration Trail

   • Pins are auto-connected into a trail (like a bird's flight path)
   • Saved as a named "route" (e.g., Switzerland Christmas Wonderland, Singapore Food Crawl)

3. Explore Community Trails

   • Search a city → see migration routes made by others
   • Popular routes rise to the top (crowdsourced "memory paths")

• Node.js with Express.js
• MongoDB with Mongoose ODM
• JWT for authentication
• Swagger for API documentation
• bcryptjs for password hashing

• React 19 with Vite
• React Router for navigation
• Leaflet with React-Leaflet for maps
• Axios for API calls

Canva-Hackathon/
├── backend/
│   ├── src/
│   │   ├── config/          # Database and Swagger configuration
│   │   ├── middleware/      # Authentication middleware
│   │   ├── models/          # MongoDB schemas (User, Route, Pin)
│   │   └── routes/          # API endpoints
│   └── package.json
├── frontend/
│   ├── src/
│   │   ├── pages/           # React components
│   │   ├── lib/             # API utilities
│   │   └── assets/          # Static assets
│   └── package.json
└── README.md

• Node.js (v16 or higher)
• MongoDB (local or cloud instance)
• npm or yarn

1. Clone the repository

   git clone <repository-url>
   cd Canva-Hackathon

2. Set up the Backend

   cd backend
   npm install

3. Set up the Frontend

   cd ../frontend
   npm install

4. Environment Configuration

   Create a .env file in the backend directory:

   PORT=4000
   MONGODB_URI=mongodb://localhost:27017/travel-migration
   JWT_SECRET=your-secret-key
   NODE_ENV=development

1. Start the Backend Server

   cd backend
   npm run dev

   The API will be available at http://localhost:4000

2. Start the Frontend Development Server

   cd frontend
   npm run dev

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

3. Access API Documentation Visit http://localhost:4000/api-docs for Swagger documentation

• No navigation bar
• Signup/Login buttons in top right corner
• Logo in top left corner
• "Where will you (go) today?" call-to-action button

• Signup Page: User registration
• Login Page: User authentication

• Popular destinations with pictures
• Navigation Bar with:
  • SEARCH: Explore more routes (filter by most recent, most liked)
  • MAKE YOUR OWN ROUTE: Create new migration trails
  • FAVOURITES: Saved favorite routes
  • MY ROUTES: Personal route management

• Search location using Google Maps API
• Add pin locations with details
• Order changing feature among places
• "CREATE YOUR ROUTE" button
• Success confirmation: "Route Successfully Created!"

• List of favorite routes

• List of personal routes (sorted by cities)
• Sorting options: latest to oldest, oldest to latest
• Filter by country

{
  userId: String,
  city: String,
  name: String,
  pins: [
    { 
      name: String, 
      category: String, 
      note: String, 
      lat: Number, 
      lng: Number 
    }
  ],
  timestamp: Date
}

• Real-time collaboration on routes
• Photo uploads for each pin
• Route sharing via social media
• Mobile app development
• Offline map support
• Route recommendations based on preferences

Remember your journeys, share your paths, and discover the world through others' migration trails. 🐦✨