SiteScan - AI-Powered Infrastructure Inspection

SiteScan is a cutting-edge web application that leverages artificial intelligence to revolutionize infrastructure inspection and analysis. Upload videos from drones, cameras, or mobile devices, and get instant AI-powered defect detection with professional reporting.

🚀 Features

AI-Powered Analysis: Advanced machine learning models detect cracks, corrosion, and structural issues
Universal Compatibility: Works with videos from any device - drones, cameras, smartphones
Professional Reports: Generate comprehensive PDF reports with findings and recommendations
Real-time Processing: Fast analysis with progress tracking
Mobile-Responsive Landing: Optimized mobile experience for marketing pages
Desktop-Only App: Full application requires desktop for optimal user experience
Secure & Reliable: Enterprise-grade security with encrypted data handling

🏗️ Project Structure

sitescan-frontend/
├── public/                     # Static assets
│   ├── demo-video.mp4         # Demo video for landing page
│   ├── manifest.json          # PWA manifest
│   └── robots.txt             # SEO robots file
├── src/
│   ├── api/                   # API service layer
│   │   ├── auth.ts            # Authentication services
│   │   ├── videoApi.ts        # Video processing APIs
│   │   └── ...
│   ├── app/                   # App-level routing
│   │   └── AppRoutes.tsx      # Main routing configuration
│   ├── components/            # Shared components
│   │   ├── navigation/        # Navigation components
│   │   ├── ui/               # Reusable UI components
│   │   ├── DesktopOnlyBlocker.tsx  # Mobile blocker component
│   │   └── ...
│   ├── contexts/             # React contexts
│   │   ├── AuthContext.tsx   # Authentication state
│   │   └── AnalyticsContext.tsx
│   ├── features/             # Feature-based modules
│   │   ├── landing/          # Landing page components
│   │   │   ├── components/   # Landing-specific components
│   │   │   └── pages/        # Landing page layouts
│   │   ├── auth/             # Authentication features
│   │   ├── dashboard/        # Dashboard features
│   │   ├── projects/         # Project management
│   │   ├── video-analysis/   # Video processing features
│   │   └── map/              # Defect mapping features
│   ├── hooks/                # Custom React hooks
│   │   ├── useDeviceDetection.ts  # Device detection hook
│   │   ├── useVideoProcessing.ts  # Video processing hook
│   │   └── ...
│   ├── lib/                  # External library configurations
│   ├── styles/               # Global styles and CSS
│   ├── types/                # TypeScript type definitions
│   └── utils/                # Utility functions
├── supabase/                 # Database migrations and config
│   └── migrations/           # SQL migration files
├── dist/                     # Production build output
└── docs/                     # Additional documentation
    ├── ACCESS_CONTROL.md     # User access control guide
    ├── ANALYTICS.md          # Analytics implementation
    ├── BACKEND_INTEGRATION.md # Backend integration guide
    └── SEO.md                # SEO optimization guide

🛠️ Technology Stack

Frontend

React 18 - Modern React with hooks and concurrent features
TypeScript - Type-safe JavaScript development
Vite - Fast build tool and development server
Chakra UI - Modern, accessible component library
React Router - Client-side routing
React Query - Server state management

Backend Integration

Supabase - Database and authentication
REST APIs - Video processing and data management
WebSocket - Real-time updates (where applicable)

Development Tools

ESLint - Code linting and formatting
Prettier - Code formatting
Vitest - Unit testing framework
TypeScript - Static type checking

🚀 Getting Started

Prerequisites

Node.js (v18 or higher)
npm or yarn
Git

Installation

Clone the repository

git clone <repository-url>
cd sitescan/sitescan-frontend

Install dependencies
```
npm install
```

Set up environment variables

cp env.example .env.local

Edit .env.local with your configuration:

VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
VITE_API_BASE_URL=your_api_base_url

Start the development server
```
npm run dev
```
Open your browser Navigate to http://localhost:5173

Available Scripts

npm run dev - Start development server
npm run build - Build for production
npm run preview - Preview production build
npm run lint - Run ESLint
npm run test - Run unit tests
npm run type-check - Run TypeScript type checking

📱 Mobile vs Desktop Experience

Mobile Experience

Landing Page: Fully responsive and optimized for mobile devices
Navigation: Touch-friendly mobile menu
Content: Streamlined mobile layout without video clutter
CTA Buttons: Stacked layout for easy touch interaction

Desktop Experience

Full Application: Complete feature set with desktop-optimized UI
Video Demo: Interactive video player in hero section
Floating Elements: Animated feature cards and visual enhancements
Side-by-side Layouts: Optimized for larger screens

Desktop-Only Blocker

When mobile users try to access the full application (/app/* or /ai-scanner), they see a professional blocker that:

Explains the desktop requirement
Shows supported devices (desktop/laptop vs mobile)
Provides clear instructions
Offers contact information for support

🤝 Contributing

We welcome contributions! Please follow these guidelines:

Development Workflow

Fork the repository

Create a feature branch

git checkout -b feature/your-feature-name

Make your changes
- Follow the existing code style
- Add TypeScript types for new code
- Write tests for new functionality
- Update documentation as needed

Test your changes

npm run lint
npm run type-check
npm run test
npm run build

Commit your changes
```
git commit -m "feat: add your feature description"
```
Use conventional commit format:
- feat: - New features
- fix: - Bug fixes
- docs: - Documentation changes
- style: - Code style changes
- refactor: - Code refactoring
- test: - Adding tests
- chore: - Maintenance tasks

Push to your fork

git push origin feature/your-feature-name

Create a Pull Request

Code Style Guidelines

TypeScript: Use strict typing, avoid any
Components: Use functional components with hooks
Styling: Use Chakra UI components and responsive design
File Naming: Use PascalCase for components, camelCase for utilities
Imports: Use absolute imports with path mapping (@/, @components/, etc.)

Component Structure

// components/MyComponent.tsx
import React from 'react'
import { Box, Text } from '@chakra-ui/react'

interface MyComponentProps {
  title: string
  children?: React.ReactNode
}

const MyComponent: React.FC<MyComponentProps> = ({ title, children }) => {
  return (
    <Box>
      <Text>{title}</Text>
      {children}
    </Box>
  )
}

export default MyComponent

Responsive Design Guidelines

Mobile First: Start with mobile design, then enhance for desktop
Breakpoints: Use Chakra UI's responsive props
- base - Mobile (0px+)
- sm - Small tablet (480px+)
- md - Tablet (768px+)
- lg - Desktop (992px+)
- xl - Large desktop (1280px+)

// Example responsive component
<Box 
  p={{ base: 4, md: 8 }}
  fontSize={{ base: 'sm', md: 'md', lg: 'lg' }}
  direction={{ base: 'column', lg: 'row' }}
>

🧪 Testing

Running Tests

npm run test          # Run all tests
npm run test:watch    # Run tests in watch mode
npm run test:coverage # Run tests with coverage report

Writing Tests

Use Vitest for unit tests
Test components with React Testing Library
Mock external dependencies
Test responsive behavior when applicable

🚀 Deployment

Production Build

npm run build

Environment Setup

Set up environment variables for production
Configure Supabase for production database
Set up analytics tracking
Configure error monitoring

Deployment Platforms

Vercel (recommended) - Automatic deployments from Git
Netlify - Static site hosting with form handling
AWS S3 + CloudFront - Scalable static hosting

📊 Analytics & Monitoring

The application includes:

Vercel Analytics - Performance and usage metrics
Error Tracking - Production error monitoring
User Analytics - User behavior tracking (privacy-compliant)

See ANALYTICS.md for detailed analytics implementation.

🔐 Security

Authentication - Secure user authentication via Supabase
Data Encryption - All data encrypted in transit and at rest
Access Control - Role-based access control system
Input Validation - Comprehensive input sanitization
CORS - Properly configured cross-origin requests

📝 Additional Documentation

ACCESS_CONTROL.md - User roles and permissions
ANALYTICS.md - Analytics implementation details
BACKEND_INTEGRATION.md - API integration guide
SEO.md - SEO optimization strategies

🆘 Support

Email: ian@sitescan.build
Phone: (424) 354-0889
Issues: Create a GitHub issue for bugs or feature requests

📄 License

🙏 Acknowledgments

Built with modern web technologies and best practices for performance, accessibility, and user experience.

Made with ❤️ for construction professionals

Name		Name	Last commit message	Last commit date
Latest commit History 139 Commits
.vite/deps		.vite/deps
public		public
src		src
supabase		supabase
.gitattributes		.gitattributes
.gitignore		.gitignore
README.md		README.md
SEO.md		SEO.md
env.example		env.example
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vercel.json		vercel.json
vite.config.ts		vite.config.ts
vitest.config.ts		vitest.config.ts

casheridan/sitescan

Folders and files

Latest commit

History

Repository files navigation