Travel Logger

A full-stack travel journal for logging past trips, organizing memories, tracking destinations, and planning future travel. Add completed trips, upcoming plans, and wishlist locations with notes, highlights, ratings, tags, photos, and context-aware weather.

This project was redesigned from a basic travel/weather app into a more practical TypeScript travel journal. Instead of showing current weather for old trips, it focuses on memories, planning, trip details, and searchable travel history. Weather is context-aware: completed trips use a written weather memory, while planned trips within the next 10 days can display a live weather snapshot.

---

Live Demo

• Frontend Website URL
• Backend Health Check

---

Features

Recent additions are in bold

• Add, edit, view, and delete travel entries
• Track trips by completed, planned, or wishlist status
• Store trip title, location, country, start/end dates, travel type, rating, notes, highlights, favorite memory, weather memory, photo URL, and tags
• Dashboard showing total trips, completed trips, planned trips, wishlist destinations, most recent trip, and favorite/highest-rated trip
• Search trips by title, location, notes, highlights, and memories
• Filter trips by status and tags
• Detailed trip modal for viewing memories, highlights, notes, ratings, and photos
• React + TypeScript frontend with a responsive travel-themed UI
• Express + TypeScript backend with REST API routes
• PostgreSQL database using Neon and Prisma migrations
• Frontend deployed on Vercel
• Backend API deployed on Render
• Current weather snapshots for planned trips within the next 10 days using Open-Meteo
• Edit trip workflow opens in its own modal
• Input validation for required fields, dates, statuses, and ratings

---

Tech Stack

• React
• TypeScript
• Vite
• Node.js
• Express
• Prisma
• PostgreSQL
• Neon
• Render
• Vercel
• CSS

---

Project Structure

travel-logger/
├── client/
│   ├── src/
│   │   ├── App.tsx
│   │   ├── App.css
│   │   └── main.tsx
│   ├── index.html
│   ├── package.json
│   └── vite.config.ts
├── server/
│   ├── prisma/
│   │   └── schema.prisma
│   ├── src/
│   │   ├── lib/
│   │   │   ├── prisma.ts
│   │   │   └── weather.ts
│   │   ├── routes/
│   │   │   └── trips.ts
│   │   └── server.ts
│   ├── .env.example
│   ├── package.json
│   └── tsconfig.json
├── DEPLOYMENT.md
├── package.json
├── .gitignore
└── README.md

---

How to Run Locally

1. Prerequisites: Ensure you have Node.js installed.
2. Clone the repository:

   git clone https://github.com/JacobDemory/travel-logger.git
   cd travel-logger

3. Install dependencies:

   npm install

4. Create your server environment file:

   cp server/.env.example server/.env

5. Add your database URLs to server/.env.
6. Run Prisma migrations:

   npm run db:migrate

7. Run the full app:

   npm run dev

The frontend runs at:

http://localhost:5173

The backend API runs at:

http://localhost:5001/api

---

Environment Variables

Server: server/.env

DATABASE_URL="your_neon_pooled_connection_string"
DIRECT_URL="your_neon_direct_connection_string"
PORT=5001
CLIENT_URL="http://localhost:5173"
NODE_ENV="development"

Vercel frontend variable

VITE_API_URL="https://your-render-api-url.onrender.com/api"

Never commit real .env values or database connection strings.

---

Deployment

This project is deployed with:

Frontend: Vercel
Backend API: Render
Database: Neon PostgreSQL

See DEPLOYMENT.md for more information on deployment.

---

Example Trip Entry

Title: Spring Break in Miami
Location: Miami, Florida
Country: United States
Status: Completed
Travel Type: Vacation
Rating: 5 stars
Tags: beach, food, friends
Highlights: South Beach, Cuban food, boat tour, and late-night walks
Favorite Memory: Watching the sunset from the pier
Weather Memory: Warm, sunny, and perfect beach weather

---

API Routes

GET    /api/health
GET    /api/trips
GET    /api/trips/stats
GET    /api/trips/weather?location=City&date=YYYY-MM-DD
GET    /api/trips/:id
POST   /api/trips
PUT    /api/trips/:id
DELETE /api/trips/:id

Query filters supported by GET /api/trips:

status=completed | planned | wishlist | all
search=keyword
tag=keyword
sort=newest | oldest

---

Future Improvements

• Add user authentication
• Add map-based trip visualization
• Upload local photos instead of using photo URLs
• Add budget and expense tracking
• Add packing lists for planned trips
• Add forecast details for upcoming trips
• Add itinerary planning by day
• Add export to CSV or PDF
• Add demo screenshots and a walkthrough video
• Add GitHub Actions for automated build checks
• Add a deployment status section or health-check badge