andrei/url_tracker_tool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Simplify home page and remove tracking form

Browse Source 
- Remove complex tracking form from home page
- Replace with clean 'Analyze URL Redirects' call-to-action button
- Remove announcement badge '🚀 URL Tracker Tool V2 - Now Available'
- Clean up unused imports and form-related code
- Direct users to dedicated /track page for full functionality
- Improve user experience with cleaner, more focused home page

Changes:
- Simplified HomePage component with single CTA button
- Removed form validation, mutation handling, and result display
- Maintained all tracking functionality on /track page
- Professional appearance without promotional clutter
This commit is contained in:
Andrei
2025-08-23 19:07:02 +00:00
parent 6e41d9874d
commit f797f9b07c
93 changed files with 312537 additions and 798 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/web/.turbo/turbo-build.log
View File

@@ -4,13 +4,13 @@
The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
vite v5.4.19 building for production...
transforming (1) index.htmltransforming (5) ../../node_modules/react/cjs/react.production.min.jstransforming (17) src/pages/RegisterPage.tsxtransforming (32) ../../node_modules/@tanstack/query-core/build/modern/index.jstransforming (290) ../../node_modules/@tanstack/react-query-devtools/build/modern/ReactQueryDevtoolsPanel.js[transforming (298) ../../node_modules/@chakra-ui/icons/dist/esm/index.mjstransforming (302) ../../node_modules/@tanstack/query-core/build/modern/retryer.jstransforming (428) ../../node_modules/@chakra-ui/react/dist/esm/toast/toast.component.mjstransforming (433) ../../node_modules/@tanstack/query-devtools/build/index.jstransforming (684) ../../node_modules/@chakra-ui/icons/dist/esm/Search.mjstransforming (957) ../../node_modules/react-dom/cjs/react-dom.production.min.jstransforming (969) ../../node_modules/react-dom/index.jstransforming (997) ../../node_modules/file-selector/dist/es2015/file-selector.jstransforming (1129) ../../node_modules/framer-motion/dist/es/utils/is-ref-object.mjstransforming (1175) ../../node_modules/prop-types/factoryWithThrowingShims.jstransforming (1179) ../../node_modules/@chakra-ui/anatomy/dist/esm/components.mjstransforming (1299) ../../node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.jstransforming (1396) ../../node_modules/date-fns/locale/_lib/buildFormatLongFn.mjstransforming (1462) ../../node_modules/focus-lock/dist/es2015/utils/safe.js✓ 1467 modules transformed.
rendering chunks (1)...computing gzip size (0)...computing gzip size (1)...computing gzip size (2)...dist/index.html  0.40 kB │ gzip: 0.28 kB
dist/assets/index-BlWSZgaf.js 894.26 kB │ gzip: 280.42 kB │ map: 4,094.03 kB
transforming (1) index.htmltransforming (4) src/App.tsxtransforming (13) ../../node_modules/react/jsx-runtime.jstransforming (29) src/components/Layout/Layout.tsxtransforming (258) ../../node_modules/@chakra-ui/react/dist/esm/ttransforming (290) ../../node_modules/@tanstack/react-query-devtotransforming (299) ../../node_modules/@chakra-ui/icons/dist/esm/itransforming (428) ../../node_modules/@chakra-ui/react/dist/esm/ttransforming (433) ../../node_modules/@tanstack/query-devtools/butransforming (685) ../../node_modules/@chakra-ui/icons/dist/esm/Stransforming (956) ../../node_modules/axios/index.jstransforming (968) ../../node_modules/react-dom/cjs/react-dom.protransforming (997) ../../node_modules/toggle-selection/index.js[transforming (1122) ../../node_modules/framer-motion/dist/es/utiltransforming (1173) ../../node_modules/prop-types/lib/ReactPropTytransforming (1177) ../../node_modules/react-is/cjs/react-is.prodtransforming (1296) ../../node_modules/hoist-non-react-statics/ditransforming (1380) ../../node_modules/@popperjs/core/lib/dom-utitransforming (1408) ../../node_modules/framer-motion/dist/es/motitransforming (1462) ../../node_modules/focus-lock/dist/es2015/uti✓ 1467 modules transformed.
rendering chunks (1)...computing gzip size (0)...computing gzip size (1)...computing gzip size (2)...dist/index.html  0.39 kB │ gzip: 0.28 kB
dist/assets/index-Cvvd48Mn.js 912.12 kB │ gzip: 283.66 kB │ map: 4,164.53 kB

(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
✓ built in 9.24s
✓ built in 9.54s
⠙

432
apps/web/dist/assets/index-CMV47a2r.js vendored
View File

File diff suppressed because one or more lines are too long

1
apps/web/dist/assets/index-CMV47a2r.js.map vendored
View File

File diff suppressed because one or more lines are too long

430
apps/web/dist/assets/index-DhEjB2de.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
apps/web/dist/assets/index-DhEjB2de.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

12
apps/web/dist/index.html vendored
View File

@@ -5,7 +5,17 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>URL Tracker Tool V2</title>
<script type="module" crossorigin src="/assets/index-CMV47a2r.js"></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ZDZ26XYN2P"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-ZDZ26XYN2P');
</script>
<script type="module" crossorigin src="/assets/index-DhEjB2de.js"></script>
</head>
<body>
<div id="root"></div>

374
apps/web/src/pages/HomePage.tsx
View File

@@ -2,8 +2,7 @@
* Home Page - Landing page and quick start interface
*/
import { useState } from 'react';
import { trackUrlSubmission, trackAnalysisResult, trackError } from '../utils/analytics';
import {
Box,
Heading,
@@ -13,48 +12,18 @@ import {
HStack,
Card,
CardBody,
CardHeader,
SimpleGrid,
Button,
Badge,
Input,
Icon,
useToast,
useColorModeValue,
Stat,
StatLabel,
StatNumber,
StatHelpText,
FormControl,
FormLabel,
Select,
Switch,
FormHelperText,
Slider,
SliderTrack,
SliderFilledTrack,
SliderThumb,
NumberInput,
NumberInputField,
NumberInputStepper,
NumberIncrementStepper,
NumberDecrementStepper,
Textarea,
Collapse,
Divider,
Alert,
AlertIcon,
// StatArrow,
// Flex,
// Stack,
// Image,
// Center,
Badge,
} from '@chakra-ui/react';
import { Link as RouterLink } from 'react-router-dom';
import { useMutation } from '@tanstack/react-query';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import {
FiTrendingUp,
FiActivity,
@@ -64,35 +33,16 @@ import {
FiUpload,
FiBarChart,
FiZap,
// FiGlobe,
FiArrowRight,
FiCheckCircle,
} from 'react-icons/fi';
import { trackingApi, TrackRequestV2 } from '../services/api';
import { useAuth } from '../contexts/AuthContext';
import { TrackingResults } from '../components/Tracking/TrackingResults';
const trackingSchema = z.object({
url: z.string().min(1, 'URL is required').url('Invalid URL format'),
method: z.enum(['GET', 'POST', 'HEAD']),
userAgent: z.string().optional(),
maxHops: z.number().min(1).max(20),
timeout: z.number().min(1000).max(30000),
enableSSLAnalysis: z.boolean(),
enableSEOAnalysis: z.boolean(),
enableSecurityAnalysis: z.boolean(),
customHeaders: z.string().optional(),
});
type TrackingFormData = z.infer<typeof trackingSchema>;
export function HomePage() {
const [showAdvanced, setShowAdvanced] = useState(false);
const [trackingResult, setTrackingResult] = useState<any>(null);
const { isAuthenticated } = useAuth();
const toast = useToast();
const cardBg = useColorModeValue('white', 'gray.800');
const borderColor = useColorModeValue('gray.200', 'gray.700');
const bgGradient = useColorModeValue(
@@ -100,112 +50,6 @@ export function HomePage() {
'linear(to-br, gray.900, blue.900, purple.900)'
);
const {
register,
handleSubmit,
watch,
setValue,
formState: { errors },
} = useForm<TrackingFormData>({
resolver: zodResolver(trackingSchema),
defaultValues: {
method: 'GET',
maxHops: 10,
timeout: 15000,
enableSSLAnalysis: true,
enableSEOAnalysis: true,
enableSecurityAnalysis: true,
},
});
const maxHops = watch('maxHops');
const timeout = watch('timeout');
// Tracking mutation
const trackingMutation = useMutation({
mutationFn: async (data: TrackRequestV2) => {
// Track URL submission
trackUrlSubmission(data.url, isAuthenticated);
return await trackingApi.trackUrlV2(data);
},
onSuccess: (result) => {
setTrackingResult(result);
toast({
title: 'Tracking completed',
description: `Found ${result.check.redirectCount} redirects`,
status: 'success',
duration: 3000,
isClosable: true,
});
// Track analysis results
const analysis = (result as any).check?.analysis;
if (analysis) {
trackAnalysisResult(
(result as any).check.redirectCount || 0,
analysis.ssl?.warningsJson?.length > 0 || false,
!analysis.seo?.robotsTxtStatus || analysis.seo?.noindex || false,
analysis.security?.mixedContent === 'PRESENT' || analysis.security?.safeBrowsingStatus !== 'safe' || false
);
}
// Don't auto-navigate on home page to allow users to see results
// They can manually navigate to their dashboard to see saved results
},
onError: (error: any) => {
// Track errors
trackError('tracking_failed', error.response?.data?.message || error.message || 'Unknown error');
toast({
title: 'Tracking failed',
description: error.response?.data?.message || 'An error occurred',
status: 'error',
duration: 5000,
isClosable: true,
});
},
});
const onSubmit = (data: TrackingFormData) => {
let headers: Record<string, string> = {};
// Parse custom headers if provided
if (data.customHeaders) {
try {
const lines = data.customHeaders.split('\n').filter(line => line.trim());
for (const line of lines) {
const [key, ...valueParts] = line.split(':');
if (key && valueParts.length > 0) {
headers[key.trim()] = valueParts.join(':').trim();
}
}
} catch (error) {
toast({
title: 'Invalid headers format',
description: 'Please use format: Header-Name: Header-Value',
status: 'error',
duration: 3000,
isClosable: true,
});
return;
}
}
const trackRequest: TrackRequestV2 = {
url: data.url,
method: data.method,
userAgent: data.userAgent,
headers: Object.keys(headers).length > 0 ? headers : undefined,
maxHops: data.maxHops,
timeout: data.timeout,
enableSSLAnalysis: data.enableSSLAnalysis,
enableSEOAnalysis: data.enableSEOAnalysis,
enableSecurityAnalysis: data.enableSecurityAnalysis,
};
trackingMutation.mutate(trackRequest);
};
const features = [
{
icon: FiActivity,
@@ -278,9 +122,7 @@ export function HomePage() {
<Box bgGradient={bgGradient} py={{ base: 16, md: 24 }}>
<Container maxW="6xl">
<VStack spacing={8} textAlign="center">
<Badge colorScheme="brand" variant="subtle" px={4} py={2} borderRadius="full">
🚀 URL Tracker Tool V2 - Now Available
</Badge>
<VStack spacing={4}>
<Heading
@@ -297,185 +139,32 @@ export function HomePage() {
</Text>
</VStack>
{/* Advanced Tracking Form */}
{/* Call to Action */}
<Card bg={cardBg} border="1px solid" borderColor={borderColor} maxW="4xl" w="full">
<CardHeader>
<HStack justify="space-between">
<Heading as="h3" size="md">
URL Redirect Tracker
</Heading>
<Badge colorScheme="brand">Enhanced v2</Badge>
</HStack>
</CardHeader>
<CardBody>
<form onSubmit={handleSubmit(onSubmit)}>
<VStack spacing={6} align="stretch">
{/* URL Input */}
<FormControl isInvalid={!!errors.url}>
<FormLabel>URL to Track</FormLabel>
<Input
{...register('url')}
placeholder="https://example.com or example.com"
size="lg"
/>
{errors.url && (
<Text color="red.500" fontSize="sm" mt={1}>
{errors.url.message}
</Text>
)}
<FormHelperText>
Enter the URL you want to track. Protocol (http/https) is optional.
</FormHelperText>
</FormControl>
{/* Method Selection */}
<FormControl>
<FormLabel>HTTP Method</FormLabel>
<Select {...register('method')}>
<option value="GET">GET</option>
<option value="HEAD">HEAD</option>
<option value="POST">POST</option>
</Select>
<FormHelperText>
HTTP method to use for the initial request
</FormHelperText>
</FormControl>
{/* Analysis Options */}
<FormControl>
<FormLabel>Analysis Options</FormLabel>
<VStack align="start" spacing={3}>
<HStack justify="space-between" w="full">
<Text>SSL Certificate Analysis</Text>
<Switch {...register('enableSSLAnalysis')} colorScheme="brand" />
</HStack>
<HStack justify="space-between" w="full">
<Text>SEO Optimization Analysis</Text>
<Switch {...register('enableSEOAnalysis')} colorScheme="brand" />
</HStack>
<HStack justify="space-between" w="full">
<Text>Security Vulnerability Scan</Text>
<Switch {...register('enableSecurityAnalysis')} colorScheme="brand" />
</HStack>
</VStack>
<FormHelperText>
Enable advanced analysis features (recommended)
</FormHelperText>
</FormControl>
{/* Advanced Options Toggle */}
<Button
variant="ghost"
onClick={() => setShowAdvanced(!showAdvanced)}
size="sm"
>
{showAdvanced ? 'Hide' : 'Show'} Advanced Options
</Button>
{/* Advanced Options */}
<Collapse in={showAdvanced}>
<VStack spacing={6} align="stretch">
<Divider />
{/* Max Hops */}
<FormControl>
<FormLabel>Maximum Hops: {maxHops}</FormLabel>
<Slider
value={maxHops}
onChange={(value) => setValue('maxHops', value)}
min={1}
max={20}
step={1}
colorScheme="brand"
>
<SliderTrack>
<SliderFilledTrack />
</SliderTrack>
<SliderThumb />
</Slider>
<FormHelperText>
Maximum number of redirects to follow (1-20)
</FormHelperText>
</FormControl>
{/* Timeout */}
<FormControl>
<FormLabel>Timeout (milliseconds)</FormLabel>
<NumberInput
value={timeout}
onChange={(valueString) => setValue('timeout', parseInt(valueString) || 15000)}
min={1000}
max={30000}
step={1000}
>
<NumberInputField />
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>
<FormHelperText>
Request timeout in milliseconds (1000-30000)
</FormHelperText>
</FormControl>
{/* User Agent */}
<FormControl>
<FormLabel>Custom User Agent</FormLabel>
<Input
{...register('userAgent')}
placeholder="Mozilla/5.0 (compatible; RedirectTracker/2.0)"
/>
<FormHelperText>
Custom User-Agent header (optional)
</FormHelperText>
</FormControl>
{/* Custom Headers */}
<FormControl>
<FormLabel>Custom Headers</FormLabel>
<Textarea
{...register('customHeaders')}
placeholder="Accept: application/json&#10;X-Custom-Header: value"
rows={4}
resize="vertical"
/>
<FormHelperText>
Custom headers, one per line in format: Header-Name: Header-Value
</FormHelperText>
</FormControl>
</VStack>
</Collapse>
{/* Rate Limiting Warning */}
{!isAuthenticated && (
<Alert status="info" borderRadius="md">
<AlertIcon />
<VStack align="start" spacing={1}>
<Text fontWeight="medium">Anonymous Usage</Text>
<Text fontSize="sm">
Anonymous users are limited to 50 requests per hour.
<Text as="span" color="brand.500" fontWeight="medium">
{' '}Sign up for higher limits and saved results.
</Text>
</Text>
</VStack>
</Alert>
)}
{/* Submit Button */}
<Button
type="submit"
colorScheme="brand"
size="lg"
isLoading={trackingMutation.isPending}
loadingText="Tracking..."
>
Track URL
</Button>
</VStack>
</form>
<VStack spacing={6} textAlign="center">
<Heading as="h3" size="lg">
Ready to Analyze Your URLs?
</Heading>
<Text fontSize="lg" color="gray.600">
Get comprehensive redirect analysis, SSL certificate checks, SEO insights, and security reports.
</Text>
<Button
as={RouterLink}
to="/track"
colorScheme="brand"
size="xl"
leftIcon={<Icon as={FiSearch} />}
px={8}
py={6}
fontSize="lg"
>
Analyze URL Redirects
</Button>
<Text fontSize="sm" color="gray.500">
No registration required • Free analysis • Enhanced reporting
</Text>
</VStack>
</CardBody>
</Card>
@@ -702,12 +391,7 @@ export function HomePage() {
</VStack>
</Container>
{/* Results */}
{trackingResult && (
<Container maxW="7xl" py={16}>
<TrackingResults result={trackingResult} />
</Container>
)}
</Box>
);
}