e698f53481
🎨 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!
URL Redirect Tracker
A simple web application that tracks all intermediate redirects from an input URL to the final landing page.
Features
- Tracks all redirects from the initial URL to the final destination
- Displays the time in milliseconds for each redirect
- Marks non-SSL (non-HTTPS) redirects with red
- Shows a complete redirect chain with timing information
Installation
- Clone this repository
- Install dependencies:
npm install - Start the server:
npm start - Open your browser and navigate to
http://localhost:3333
How to Use
- Enter a URL in the input field (e.g.,
http://example.comorexample.com) - Click the "Track Redirects" button
- View the complete redirect chain, including timing information
- Non-SSL (HTTP) redirects will be marked in red
Technical Details
- Built with Node.js and Express
- Uses Axios for making HTTP requests and following redirects
- Frontend built with vanilla JavaScript, HTML, and CSS
- Server runs on port 3333
License
MIT