feat(phase-4): implement modern Chakra UI frontend with comprehensive tracking interface
🎨 Modern React Frontend: - Complete Chakra UI integration with custom theme and dark/light mode - Responsive design with mobile-first navigation and layout - Beautiful component library with cards, forms, and data visualization - Professional typography and color system with brand consistency 🚀 Advanced URL Tracking Interface: - Comprehensive tracking form with real-time validation using React Hook Form + Zod - Advanced options panel with configurable parameters (max hops, timeout, headers) - SSL, SEO, and security analysis toggles with user-friendly controls - Smart URL normalization and method selection interface 📊 Rich Results Visualization: - Interactive tracking results with hop-by-hop analysis tables - Performance metrics with latency visualization and progress bars - Status badges with color-coded redirect types and HTTP status codes - Comprehensive error handling and user feedback system 🧭 Navigation & Layout: - Responsive navigation bar with user authentication state - Mobile-friendly drawer navigation with touch-optimized interactions - Professional footer with feature highlights and API documentation links - Breadcrumb navigation and page structure for optimal UX 🔐 Authentication Integration: - Complete authentication context with JWT token management - User registration and login flow preparation (backend ready) - Protected routes and role-based access control framework - Session management with automatic token refresh and error handling 🌟 User Experience Features: - Toast notifications for all user actions and API responses - Loading states and skeleton screens for smooth interactions - Copy-to-clipboard functionality for tracking IDs and results - Tooltips and help text for advanced features and configuration 📱 Responsive Design: - Mobile-first design approach with breakpoint-aware components - Touch-friendly interfaces with appropriate sizing and spacing - Optimized layouts for desktop, tablet, and mobile viewports - Accessible design with proper ARIA labels and keyboard navigation 🔧 Developer Experience: - TypeScript throughout with comprehensive type safety - React Query for efficient API state management and caching - Custom hooks for authentication and API interactions - Modular component architecture with clear separation of concerns 🎯 API Integration: - Complete integration with all v2 API endpoints - Real-time health monitoring and status display - Backward compatibility with legacy API endpoints - Comprehensive error handling with user-friendly messages Ready for enhanced dashboard and analysis features in future phases!
This commit is contained in:
Andrei
381
apps/web/src/pages/HomePage.tsx
Normal file
381
apps/web/src/pages/HomePage.tsx
Normal file
@@ -0,0 +1,381 @@
|
||||
/**
|
||||
* Home Page for Redirect Intelligence v2
|
||||
*
|
||||
* Landing page with hero section, features, and quick start
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
Box,
|
||||
Heading,
|
||||
Text,
|
||||
Button,
|
||||
VStack,
|
||||
HStack,
|
||||
Container,
|
||||
SimpleGrid,
|
||||
Icon,
|
||||
Card,
|
||||
CardBody,
|
||||
Badge,
|
||||
useColorModeValue,
|
||||
Stat,
|
||||
StatLabel,
|
||||
StatNumber,
|
||||
StatHelpText,
|
||||
Divider,
|
||||
Link,
|
||||
} from '@chakra-ui/react';
|
||||
import { Link as RouterLink } from 'react-router-dom';
|
||||
import {
|
||||
FiShield,
|
||||
FiSearch,
|
||||
FiLock,
|
||||
FiTrendingUp,
|
||||
FiZap,
|
||||
FiDatabase,
|
||||
FiArrowRight,
|
||||
FiExternalLink
|
||||
} from 'react-icons/fi';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
|
||||
import { healthApi } from '../services/api';
|
||||
|
||||
export function HomePage() {
|
||||
const bgGradient = useColorModeValue(
|
||||
'linear(to-br, brand.50, white)',
|
||||
'linear(to-br, gray.900, gray.800)'
|
||||
);
|
||||
|
||||
const cardBg = useColorModeValue('white', 'gray.800');
|
||||
const shadowColor = useColorModeValue('gray.100', 'gray.700');
|
||||
|
||||
// Fetch health status for real-time stats
|
||||
const { data: health } = useQuery({
|
||||
queryKey: ['health'],
|
||||
queryFn: healthApi.getHealth,
|
||||
refetchInterval: 30000, // Refresh every 30 seconds
|
||||
});
|
||||
|
||||
const features = [
|
||||
{
|
||||
icon: FiZap,
|
||||
title: 'Lightning Fast Tracking',
|
||||
description: 'Track redirects in real-time with detailed hop-by-hop analysis and performance metrics.',
|
||||
color: 'yellow',
|
||||
},
|
||||
{
|
||||
icon: FiLock,
|
||||
title: 'SSL Certificate Analysis',
|
||||
description: 'Comprehensive SSL inspection with security scoring and vulnerability detection.',
|
||||
color: 'green',
|
||||
},
|
||||
{
|
||||
icon: FiSearch,
|
||||
title: 'SEO Optimization',
|
||||
description: 'Analyze meta tags, robots.txt, sitemaps, and get actionable SEO recommendations.',
|
||||
color: 'blue',
|
||||
},
|
||||
{
|
||||
icon: FiShield,
|
||||
title: 'Security Scanning',
|
||||
description: 'Detect mixed content, security headers, and potential vulnerabilities.',
|
||||
color: 'red',
|
||||
},
|
||||
{
|
||||
icon: FiDatabase,
|
||||
title: 'Persistent Storage',
|
||||
description: 'All analysis results are stored for historical tracking and trend analysis.',
|
||||
color: 'purple',
|
||||
},
|
||||
{
|
||||
icon: FiTrendingUp,
|
||||
title: 'Visual Dashboards',
|
||||
description: 'Beautiful charts and graphs to visualize redirect patterns and performance.',
|
||||
color: 'teal',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Box>
|
||||
{/* Hero Section */}
|
||||
<Box bgGradient={bgGradient} py={20}>
|
||||
<Container maxW="6xl">
|
||||
<VStack spacing={8} textAlign="center">
|
||||
<Badge colorScheme="brand" px={3} py={1} borderRadius="full" fontSize="sm">
|
||||
Version 2.0 - Now with Advanced Analysis
|
||||
</Badge>
|
||||
|
||||
<Heading
|
||||
as="h1"
|
||||
size="2xl"
|
||||
bgGradient="linear(to-r, brand.400, brand.600)"
|
||||
bgClip="text"
|
||||
maxW="4xl"
|
||||
>
|
||||
Comprehensive Redirect Intelligence Platform
|
||||
</Heading>
|
||||
|
||||
<Text fontSize="xl" color="gray.600" maxW="3xl" lineHeight={1.6}>
|
||||
Track, analyze, and optimize URL redirects with advanced SSL, SEO, and security insights.
|
||||
Get detailed hop-by-hop analysis with performance metrics and actionable recommendations.
|
||||
</Text>
|
||||
|
||||
<HStack spacing={4}>
|
||||
<Button
|
||||
as={RouterLink}
|
||||
to="/track"
|
||||
size="lg"
|
||||
colorScheme="brand"
|
||||
rightIcon={<Icon as={FiArrowRight} />}
|
||||
>
|
||||
Start Tracking
|
||||
</Button>
|
||||
<Button
|
||||
as={RouterLink}
|
||||
to="/analysis"
|
||||
size="lg"
|
||||
variant="outline"
|
||||
colorScheme="brand"
|
||||
>
|
||||
Try Analysis
|
||||
</Button>
|
||||
</HStack>
|
||||
</VStack>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
{/* Stats Section */}
|
||||
{health && (
|
||||
<Box py={12}>
|
||||
<Container maxW="6xl">
|
||||
<SimpleGrid columns={{ base: 1, md: 4 }} spacing={6}>
|
||||
<Stat
|
||||
bg={cardBg}
|
||||
p={6}
|
||||
borderRadius="lg"
|
||||
shadow="sm"
|
||||
border="1px solid"
|
||||
borderColor={shadowColor}
|
||||
>
|
||||
<StatLabel>API Status</StatLabel>
|
||||
<StatNumber color="green.500">Online</StatNumber>
|
||||
<StatHelpText>
|
||||
{health.environment} environment
|
||||
</StatHelpText>
|
||||
</Stat>
|
||||
|
||||
<Stat
|
||||
bg={cardBg}
|
||||
p={6}
|
||||
borderRadius="lg"
|
||||
shadow="sm"
|
||||
border="1px solid"
|
||||
borderColor={shadowColor}
|
||||
>
|
||||
<StatLabel>Version</StatLabel>
|
||||
<StatNumber>{health.version}</StatNumber>
|
||||
<StatHelpText>
|
||||
Latest stable release
|
||||
</StatHelpText>
|
||||
</Stat>
|
||||
|
||||
<Stat
|
||||
bg={cardBg}
|
||||
p={6}
|
||||
borderRadius="lg"
|
||||
shadow="sm"
|
||||
border="1px solid"
|
||||
borderColor={shadowColor}
|
||||
>
|
||||
<StatLabel>Analysis Types</StatLabel>
|
||||
<StatNumber>3</StatNumber>
|
||||
<StatHelpText>
|
||||
SSL, SEO, Security
|
||||
</StatHelpText>
|
||||
</Stat>
|
||||
|
||||
<Stat
|
||||
bg={cardBg}
|
||||
p={6}
|
||||
borderRadius="lg"
|
||||
shadow="sm"
|
||||
border="1px solid"
|
||||
borderColor={shadowColor}
|
||||
>
|
||||
<StatLabel>Backward Compatible</StatLabel>
|
||||
<StatNumber>100%</StatNumber>
|
||||
<StatHelpText>
|
||||
Legacy API preserved
|
||||
</StatHelpText>
|
||||
</Stat>
|
||||
</SimpleGrid>
|
||||
</Container>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Features Section */}
|
||||
<Box py={20}>
|
||||
<Container maxW="6xl">
|
||||
<VStack spacing={12}>
|
||||
<VStack spacing={4} textAlign="center">
|
||||
<Heading as="h2" size="xl">
|
||||
Powerful Analysis Features
|
||||
</Heading>
|
||||
<Text fontSize="lg" color="gray.600" maxW="3xl">
|
||||
Everything you need to understand, optimize, and secure your redirects
|
||||
</Text>
|
||||
</VStack>
|
||||
|
||||
<SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={8}>
|
||||
{features.map((feature, index) => (
|
||||
<Card
|
||||
key={index}
|
||||
bg={cardBg}
|
||||
shadow="sm"
|
||||
border="1px solid"
|
||||
borderColor={shadowColor}
|
||||
_hover={{
|
||||
shadow: 'md',
|
||||
transform: 'translateY(-2px)',
|
||||
transition: 'all 0.2s',
|
||||
}}
|
||||
>
|
||||
<CardBody p={6}>
|
||||
<VStack align="start" spacing={4}>
|
||||
<Box
|
||||
p={3}
|
||||
borderRadius="lg"
|
||||
bg={`${feature.color}.100`}
|
||||
color={`${feature.color}.600`}
|
||||
_dark={{
|
||||
bg: `${feature.color}.900`,
|
||||
color: `${feature.color}.300`,
|
||||
}}
|
||||
>
|
||||
<Icon as={feature.icon} boxSize={6} />
|
||||
</Box>
|
||||
|
||||
<VStack align="start" spacing={2}>
|
||||
<Heading as="h3" size="md">
|
||||
{feature.title}
|
||||
</Heading>
|
||||
<Text color="gray.600" fontSize="sm" lineHeight={1.6}>
|
||||
{feature.description}
|
||||
</Text>
|
||||
</VStack>
|
||||
</VStack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</VStack>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* API Section */}
|
||||
<Box py={20}>
|
||||
<Container maxW="6xl">
|
||||
<VStack spacing={8} textAlign="center">
|
||||
<Heading as="h2" size="xl">
|
||||
Developer-Friendly API
|
||||
</Heading>
|
||||
<Text fontSize="lg" color="gray.600" maxW="3xl">
|
||||
RESTful API with comprehensive documentation and 100% backward compatibility
|
||||
</Text>
|
||||
|
||||
<SimpleGrid columns={{ base: 1, md: 3 }} spacing={6} w="full" maxW="4xl">
|
||||
<VStack spacing={2}>
|
||||
<Badge colorScheme="green" px={3} py={1}>
|
||||
Legacy API
|
||||
</Badge>
|
||||
<Text fontWeight="medium">Fully Compatible</Text>
|
||||
<Text fontSize="sm" color="gray.600">
|
||||
All existing integrations continue to work
|
||||
</Text>
|
||||
</VStack>
|
||||
|
||||
<VStack spacing={2}>
|
||||
<Badge colorScheme="blue" px={3} py={1}>
|
||||
Enhanced API
|
||||
</Badge>
|
||||
<Text fontWeight="medium">v2 Features</Text>
|
||||
<Text fontSize="sm" color="gray.600">
|
||||
Advanced analysis and database persistence
|
||||
</Text>
|
||||
</VStack>
|
||||
|
||||
<VStack spacing={2}>
|
||||
<Badge colorScheme="purple" px={3} py={1}>
|
||||
Analysis API
|
||||
</Badge>
|
||||
<Text fontWeight="medium">Dedicated Endpoints</Text>
|
||||
<Text fontSize="sm" color="gray.600">
|
||||
SSL, SEO, and security analysis
|
||||
</Text>
|
||||
</VStack>
|
||||
</SimpleGrid>
|
||||
|
||||
<HStack spacing={4}>
|
||||
<Button
|
||||
as={Link}
|
||||
href="/api/docs"
|
||||
variant="outline"
|
||||
rightIcon={<Icon as={FiExternalLink} />}
|
||||
isExternal
|
||||
>
|
||||
API Documentation
|
||||
</Button>
|
||||
<Button
|
||||
as={Link}
|
||||
href="/health"
|
||||
variant="ghost"
|
||||
rightIcon={<Icon as={FiExternalLink} />}
|
||||
isExternal
|
||||
>
|
||||
API Status
|
||||
</Button>
|
||||
</HStack>
|
||||
</VStack>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
{/* CTA Section */}
|
||||
<Box bgGradient={bgGradient} py={20}>
|
||||
<Container maxW="4xl">
|
||||
<VStack spacing={8} textAlign="center">
|
||||
<Heading as="h2" size="xl">
|
||||
Ready to Get Started?
|
||||
</Heading>
|
||||
<Text fontSize="lg" color="gray.600">
|
||||
Start tracking and analyzing your redirects in seconds
|
||||
</Text>
|
||||
|
||||
<HStack spacing={4}>
|
||||
<Button
|
||||
as={RouterLink}
|
||||
to="/track"
|
||||
size="lg"
|
||||
colorScheme="brand"
|
||||
rightIcon={<Icon as={FiArrowRight} />}
|
||||
>
|
||||
Track Your First URL
|
||||
</Button>
|
||||
<Button
|
||||
as={RouterLink}
|
||||
to="/register"
|
||||
size="lg"
|
||||
variant="outline"
|
||||
colorScheme="brand"
|
||||
>
|
||||
Create Account
|
||||
</Button>
|
||||
</HStack>
|
||||
</VStack>
|
||||
</Container>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user