Log inSign up
Onesidededdimple
OnesidededdimpleVirtualTourGuide
Public
Like
VirtualTourGuide
Code
5
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in miliseconds.
Sign up now
Code
/
Search
index.ts
https://Onesidededdimple--8aae46103fb711f09a0d76b3cceeab13.web.val.run
README.md

Virtual City Tour

A comprehensive virtual tour application that takes users on immersive journeys through cities worldwide, complete with cultural facts, food recommendations, useful phrases, and detailed analytics tracking.

Features

  • Interactive City Tours: Explore multiple cities with rich content
  • Cultural Facts: Learn interesting historical and cultural information
  • Food Recommendations: Discover local cuisine and dining tips
  • Language Phrases: Essential phrases for travelers
  • User Analytics: Track engagement, popular content, and tour completion rates
  • Admin Dashboard: Monitor user activity and content performance

Project Structure

├── backend/
│   ├── database/
│   │   ├── migrations.ts    # Database schema setup
│   │   └── queries.ts       # Database query functions
│   ├── routes/
│   │   ├── tours.ts         # Tour-related API endpoints
│   │   ├── analytics.ts     # Analytics and tracking endpoints
│   │   └── static.ts        # Static file serving
│   └── index.ts             # Main Hono server
├── frontend/
│   ├── components/
│   │   ├── App.tsx          # Main application component
│   │   ├── TourViewer.tsx   # Tour display component
│   │   ├── CitySelector.tsx # City selection interface
│   │   └── Analytics.tsx    # Analytics dashboard
│   ├── index.html           # Main HTML template
│   ├── index.tsx            # Frontend entry point
│   └── style.css            # Custom styles
├── shared/
│   └── types.ts             # Shared TypeScript types
└── data/
    └── cities.ts            # City tour data

Getting Started

  1. The backend serves the API and static files
  2. Frontend provides an interactive tour experience
  3. Analytics track user engagement automatically
  4. Admin can view detailed usage statistics

API Endpoints

  • GET /api/cities - List available cities
  • GET /api/tours/:cityId - Get tour data for a city
  • POST /api/analytics/track - Track user interactions
  • GET /api/analytics/dashboard - Get analytics data
  • GET /api/analytics/export - Export analytics data

Technologies Used

  • Backend: Hono (TypeScript API framework)
  • Frontend: React with TypeScript
  • Database: SQLite for analytics and user data
  • Styling: TailwindCSS
  • Icons: Unicode emojis and symbols
HTTP
Code