🛡️ SmartYatra

Intelligent Tourist Safety & Monitoring Ecosystem

Empowering Tourist Safety Through Technology 🌍✨

Live Demo · Report Bug · Request Feature

📑 Table of Contents

🎯 Overview
✨ Key Features
🏗️ System Architecture
🎨 Technology Stack
📸 Screenshots
🚀 Getting Started
📂 Project Structure
🎭 User Roles & Features
🔧 Configuration
🧪 Testing
📦 Build & Deployment
🤝 Contributing
📄 License
👥 Team
📞 Contact

🎯 Overview

SmartYatra is a revolutionary tourist safety and monitoring platform designed to protect and assist travelers throughout their journey. Built with cutting-edge web technologies, it provides real-time tracking, emergency response, QR-based identity verification, and comprehensive analytics for law enforcement and tourists alike.

Why SmartYatra?

In an era where tourist safety is paramount, SmartYatra bridges the gap between tourists and local authorities through:

🎯 Real-time Location Tracking - GPS-enabled safety monitoring
🚨 Instant Emergency Response - One-tap panic button with auto-location sharing
🔐 Blockchain Verification - Secure identity verification via QR codes
📊 Advanced Analytics - AI-powered insights for authorities
🗺️ Geo-fencing - Smart boundary alerts for restricted areas
🌐 Multi-language Support - Accessible to international tourists

✨ Key Features

🧑‍✈️ For Tourists

📱 Interactive Dashboard Real-time safety score display Nearby emergency services locator Weather forecasts & alerts Destination ratings & reviews	🆘 Emergency System One-tap panic button Auto-location sharing with authorities Voice-activated SOS Evidence vault for incident documentation
🗺️ Smart Navigation Interactive map with safe zones Real-time traffic updates Tourist hotspot recommendations Offline map support	🎫 Digital Identity QR-based tourist card Blockchain-verified credentials Quick check-in at attractions Travel history tracking

👮 For Law Enforcement

📊 Command Dashboard Real-time tourist monitoring Active alerts management Safety score analytics Incident resolution tracking	📸 QR Scanner Instant identity verification Blockchain cross-validation Registration status check Scan history logging
📈 Analytics Suite Tourist traffic patterns Risk distribution analysis Predictive AI insights Location-based statistics	🚨 Alert Management Priority-based alert sorting One-click emergency response Broadcast messaging Geo-fence breach notifications

🏢 For Kiosks

Self-service Registration - Quick tourist onboarding
Document Verification - AI-powered ID scanning
QR Code Generation - Instant digital tourist card
Multi-language Interface - Support for 10+ languages

🏗️ System Architecture

graph TB
    A[Tourist Mobile App] --> B[React Frontend]
    C[Kiosk Interface] --> B
    D[Police Dashboard] --> B
    B --> E[React Router]
    E --> F[Context Providers]
    F --> G[Mock Data Service]
    F --> H[WebSocket Service]
    B --> I[Leaflet Maps]
    B --> J[Framer Motion]
    B --> K[Chart.js]
    
    style B fill:#61DAFB,stroke:#333,stroke-width:2px
    style F fill:#FF6B6B,stroke:#333,stroke-width:2px
    style I fill:#77DD77,stroke:#333,stroke-width:2px

Core Components

Frontend Layer - React 18 with TypeScript for type-safe development
State Management - Context API for global state (Auth, Theme, Session, etc.)
Routing - React Router v7 for seamless navigation
UI/UX - Tailwind CSS + Framer Motion for stunning animations
Maps Integration - Leaflet for interactive mapping
Data Visualization - Chart.js for analytics dashboards
Real-time Communication - WebSocket for live updates

🎨 Technology Stack

Category	Technologies
Frontend Framework
Build Tool
Styling
Animations
Maps
Charts
Icons
Routing
Code Quality
QR Generation

Key Libraries

{
  "dependencies": {
    "react": "18.2.0",
    "react-router-dom": "^7.8.2",
    "framer-motion": "^11.0.0",
    "leaflet": "^1.9.4",
    "chart.js": "^4.4.0",
    "lucide-react": "^0.344.0",
    "qrcode": "^1.5.4",
    "tailwind-merge": "^2.2.0"
  }
}

📸 Screenshots

Landing Page - Interactive Hero

Police Command Center - Apple-Inspired Design

QR Scanner - Real-time Verification

Analytics Dashboard - Data Visualization

Tourist App - Safety First

🚀 Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

📦 Node.js

Version 16.x or higher

📦 Package Manager

npm, pnpm, or yarn

💻 Code Editor

VS Code (recommended)

🌐 Modern Browser

Chrome, Firefox, Edge, or Safari

Installation

Follow these steps to set up SmartYatra locally:

1️⃣ Clone the Repository

# Using HTTPS
git clone https://github.com/yourusername/smartyatra.git

# Or using SSH
git clone git@github.com:yourusername/smartyatra.git

# Navigate to project directory
cd smartyatra

2️⃣ Install Dependencies

Choose your preferred package manager:

Using npm

npm install

Using pnpm (Recommended)

# Install pnpm globally if not installed
npm install -g pnpm

# Install project dependencies
pnpm install

Using yarn

yarn install

3️⃣ Environment Setup (Optional)

Create a .env file in the root directory:

# Application
VITE_APP_NAME=SmartYatra
VITE_APP_VERSION=1.0.0

# API Configuration (if using backend)
# VITE_API_URL=http://localhost:3000/api
# VITE_WS_URL=ws://localhost:3000

# Map Configuration
# VITE_MAP_API_KEY=your_mapbox_api_key

# Feature Flags
VITE_ENABLE_ANALYTICS=true
VITE_ENABLE_WEBSOCKET=false

Running the Application

Development Mode

Start the development server with hot-reload:

# Using npm
npm run dev

# Using pnpm
pnpm dev

# Using yarn
yarn dev

The application will be available at:

Local: http://localhost:5173
Network: http://192.168.x.x:5173

Production Build

Create an optimized production build:

# Build the application
npm run build

# Preview the production build
npm run preview

Code Linting

Check and fix code quality issues:

# Run ESLint
npm run lint

# Auto-fix issues
npm run lint -- --fix

📂 Project Structure

SmartYatra/
│
├── public/                      # Static assets
│   └── manifest.json           # PWA manifest
│
├── src/                        # Source code
│   ├── components/             # React components
│   │   ├── common/            # Reusable components
│   │   │   ├── Button.tsx
│   │   │   ├── Card.tsx
│   │   │   ├── MapComponent.tsx
│   │   │   ├── PanicButton.tsx
│   │   │   └── ...
│   │   │
│   │   ├── tourist/           # Tourist app components
│   │   │   ├── TouristDashboard.tsx
│   │   │   ├── TouristSafety.tsx
│   │   │   ├── TouristProfile.tsx
│   │   │   └── ...
│   │   │
│   │   ├── police/            # Police dashboard components
│   │   │   ├── PoliceDashboard.tsx
│   │   │   ├── QRScanner.tsx
│   │   │   ├── EnhancedAnalytics.tsx
│   │   │   ├── PoliceMap.tsx
│   │   │   └── ...
│   │   │
│   │   ├── kiosk/             # Kiosk interface components
│   │   │   ├── KioskWelcome.tsx
│   │   │   ├── KioskRegistration.tsx
│   │   │   ├── DocumentVerification.tsx
│   │   │   └── ...
│   │   │
│   │   ├── emergency/         # Emergency system components
│   │   │   ├── EmergencyActive.tsx
│   │   │   ├── EmergencyResponse.tsx
│   │   │   ├── EvidenceVault.tsx
│   │   │   └── ...
│   │   │
│   │   ├── LandingPage.tsx    # Main landing page
│   │   └── ...
│   │
│   ├── contexts/              # React Context providers
│   │   ├── AuthContext.tsx
│   │   ├── ThemeContext.tsx
│   │   ├── SessionContext.tsx
│   │   ├── MockDataContext.tsx
│   │   ├── WebSocketContext.tsx
│   │   └── ...
│   │
│   ├── hooks/                 # Custom React hooks
│   │   ├── useAccessibility.ts
│   │   ├── useEmergencySystem.ts
│   │   ├── useKeyboardShortcuts.tsx
│   │   └── ...
│   │
│   ├── services/              # Business logic & API calls
│   │   ├── mockData.ts
│   │   ├── sessionManager.ts
│   │   └── ...
│   │
│   ├── types/                 # TypeScript type definitions
│   │   ├── emergency.ts
│   │   ├── speech.d.ts
│   │   └── ...
│   │
│   ├── utils/                 # Utility functions
│   │   ├── cn.ts
│   │   ├── emergencyUtils.ts
│   │   ├── i18n.ts
│   │   └── ...
│   │
│   ├── App.tsx                # Root component
│   ├── main.tsx               # Entry point
│   ├── index.css              # Global styles
│   └── vite-env.d.ts          # Vite type declarations
│
├── .gitignore                 # Git ignore rules
├── eslint.config.js           # ESLint configuration
├── postcss.config.js          # PostCSS configuration
├── tailwind.config.js         # Tailwind CSS configuration
├── tsconfig.json              # TypeScript configuration
├── vite.config.ts             # Vite configuration
├── package.json               # Project dependencies
├── pnpm-lock.yaml            # Lock file (if using pnpm)
└── README.md                  # This file

🎭 User Roles & Features

1. 🧑‍✈️ Tourist Role

Access Route: /tourist/*

Feature	Description	Status
Dashboard	Personal safety dashboard with real-time metrics	✅ Active
Onboarding	Multi-step registration with document upload	✅ Active
Profile	Manage personal information & preferences	✅ Active
Safety Features	Panic button, emergency contacts, safe zones	✅ Active
Map Navigation	Interactive map with POIs and safe routes	✅ Active
Weather Forecast	Real-time weather updates	✅ Active
Destination Ratings	Review and rate tourist spots	✅ Active

2. 👮 Police/Authority Role

Access Route: /police/*

Feature	Description	Status
Command Dashboard	Real-time tourist monitoring & analytics	✅ Active
QR Scanner	Blockchain-verified identity checking	✅ Active
Analytics Suite	Advanced data visualization & insights	✅ Active
Alert Management	Priority-based alert handling	✅ Active
Tourist Registry	Search & manage tourist database	✅ Active
Live Map	Real-time tourist location tracking	✅ Active

3. 🏢 Kiosk/Registration Role

Access Route: /kiosk/*

Feature	Description	Status
Welcome Screen	Multi-language greeting interface	✅ Active
Self-Registration	Step-by-step tourist registration	✅ Active
Document Verification	AI-powered ID scanning	✅ Active
QR Generation	Digital tourist card creation	✅ Active
Completion	Print/download confirmation	✅ Active

🔧 Configuration

Vite Configuration (`vite.config.ts`)

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
    host: true
  },
  build: {
    outDir: 'dist',
    sourcemap: true
  }
})

Tailwind Configuration (`tailwind.config.js`)

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      // Custom theme extensions
    },
  },
  plugins: [],
}

TypeScript Configuration (`tsconfig.json`)

Strict type checking enabled for production-ready code.

🧪 Testing

Manual Testing Checklist

Browser Compatibility

Browser	Version	Status
Chrome	90+	✅ Supported
Firefox	88+	✅ Supported
Safari	14+	✅ Supported
Edge	90+	✅ Supported

📦 Build & Deployment

Production Build

# Create optimized build
npm run build

# Output directory: dist/

Deployment Options

Deploy to Vercel

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

Deploy to Netlify

# Install Netlify CLI
npm install -g netlify-cli

# Deploy
netlify deploy --prod

Deploy to GitHub Pages

Update vite.config.ts:

export default defineConfig({
  base: '/smartyatra/',
  // ...
})

Build and deploy:

npm run build
git add dist -f
git commit -m "Deploy to GitHub Pages"
git subtree push --prefix dist origin gh-pages

🤝 Contributing

We welcome contributions from the community! Here's how you can help:

Contribution Guidelines

Fork the Repository
Create a Feature Branch
```
git checkout -b feature/AmazingFeature
```
Commit Your Changes
```
git commit -m 'Add some AmazingFeature'
```
Push to the Branch
```
git push origin feature/AmazingFeature
```
Open a Pull Request

Code Style

Follow TypeScript best practices
Use ESLint rules defined in the project
Write meaningful commit messages
Add comments for complex logic
Update documentation for new features

Reporting Issues

Found a bug? Open an issue with:

Clear description of the problem
Steps to reproduce
Expected vs actual behavior
Screenshots (if applicable)
Environment details

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

MIT License

Copyright (c) 2025 SmartYatra Team

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files...

Built with ❤️

Making Tourism Safer, One Journey at a Time 🌍✨

FilesExpand file tree

README.md

Latest commit

History

README.md

File metadata and controls

🛡️ SmartYatra

Intelligent Tourist Safety & Monitoring Ecosystem

📑 Table of Contents

🎯 Overview

Why SmartYatra?

✨ Key Features

🧑‍✈️ For Tourists

📱 Interactive Dashboard

🆘 Emergency System

🗺️ Smart Navigation

🎫 Digital Identity

👮 For Law Enforcement

📊 Command Dashboard

📸 QR Scanner

📈 Analytics Suite

🚨 Alert Management

🏢 For Kiosks

🏗️ System Architecture

Core Components

🎨 Technology Stack

Key Libraries

📸 Screenshots

Landing Page - Interactive Hero

Police Command Center - Apple-Inspired Design

QR Scanner - Real-time Verification

Analytics Dashboard - Data Visualization

Tourist App - Safety First

🚀 Getting Started

Prerequisites

📦 Node.js

📦 Package Manager

💻 Code Editor

🌐 Modern Browser

Installation

1️⃣ Clone the Repository

2️⃣ Install Dependencies

3️⃣ Environment Setup (Optional)

Running the Application

Development Mode

Production Build

Code Linting

📂 Project Structure

🎭 User Roles & Features

1. 🧑‍✈️ Tourist Role

2. 👮 Police/Authority Role

3. 🏢 Kiosk/Registration Role

🔧 Configuration

Vite Configuration (vite.config.ts)

Tailwind Configuration (tailwind.config.js)

TypeScript Configuration (tsconfig.json)

🧪 Testing

Manual Testing Checklist

Browser Compatibility

📦 Build & Deployment

Production Build

Deployment Options

🤝 Contributing

Contribution Guidelines

Code Style

Reporting Issues

📄 License

Built with ❤️

Vite Configuration (`vite.config.ts`)

Tailwind Configuration (`tailwind.config.js`)

TypeScript Configuration (`tsconfig.json`)