A modern, production-ready React frontend for a URL analysis and phishing detection web application. This SPA provides a polished, accessible interface for users to analyze URLs and get ML-powered phishing risk assessments.
- 🚀 Fast & Modern: Built with React 18, TypeScript, and Vite
- 🎨 Beautiful UI: Tailwind CSS with custom design tokens
- 📊 Data Visualization: Charts and graphs using Recharts
- 🔒 Type Safe: Full TypeScript coverage
- ♿ Accessible: WCAG AA compliant with ARIA labels
- 📱 Responsive: Mobile-first design
- 🧪 Testable: Ready for unit and E2E tests
- 🔄 State Management: React Query for server state
- ✅ Form Validation: React Hook Form + Zod
- Framework: React 18 with TypeScript
- Build Tool: Vite
- Styling: Tailwind CSS
- State Management: TanStack React Query
- Forms: React Hook Form + Zod
- Charts: Recharts
- Icons: Lucide React
- Routing: React Router v6
- Date Handling: date-fns
- Node.js 18+ and npm/yarn/pnpm
- Clone the repository:
git clone <repository-url>
cd url-phishing-detector- Install dependencies:
npm install
# or
yarn install
# or
pnpm install- Set up environment variables:
cp .env.example .envEdit .env and set your API base URL:
VITE_API_BASE_URL=http://localhost:8000/api
- Start the development server:
npm run dev
# or
yarn dev
# or
pnpm devThe app will be available at http://localhost:3000
npm run build
# or
yarn build
# or
pnpm buildThe production build will be in the dist directory.
npm run preview
# or
yarn preview
# or
pnpm previewsrc/
├── components/ # Reusable UI components
│ ├── Layout.tsx # Main layout with navigation
│ ├── URLInput.tsx # URL input form with validation
│ ├── RiskCard.tsx # Risk score display card
│ ├── FeatureList.tsx # ML feature importance list
│ ├── CheckTimeline.tsx # Security checks timeline
│ ├── HistoryTable.tsx # Analysis history table
│ ├── BatchUploader.tsx # Bulk CSV upload component
│ ├── Toast.tsx # Toast notification component
│ └── Modal.tsx # Modal dialog component
├── pages/ # Page components
│ ├── HomePage.tsx # Landing page
│ ├── AnalyzePage.tsx # Main analysis page
│ ├── HistoryPage.tsx # Analysis history
│ ├── DashboardPage.tsx # Analytics dashboard
│ ├── SettingsPage.tsx # User settings
│ └── HelpPage.tsx # Help and information
├── services/ # API service layer
│ └── api.ts # API client functions
├── types/ # TypeScript type definitions
│ └── index.ts # Shared types
├── utils/ # Utility functions
│ ├── urlValidation.ts # URL validation helpers
│ └── riskHelpers.ts # Risk label helpers
├── data/ # Mock data and fixtures
│ └── mockData.ts # Sample analysis results
├── App.tsx # Main app component
├── main.tsx # Entry point
└── index.css # Global styles
The frontend expects a RESTful API with the following endpoints:
POST /api/analyze
Body: { "url": "https://example.com" }
Response: AnalysisResult
POST /api/analyze/batch
Body: { "urls": ["url1", "url2", ...] }
Response: { "job_id": "uuid" }
GET /api/jobs/:id
Response: BatchAnalysisJob
GET /api/history?limit=50&page=1&label=suspicious
Response: HistoryResponse
POST /api/report
Body: { "analysis_id": "uuid", "user_label": "safe", "notes": "..." }
Response: { "success": true }
See src/services/api.ts for the full API client implementation.
For development and testing, mock data is available in src/data/mockData.ts. You can use this to:
- Test components without a backend
- Develop UI/UX
- Write tests
| Variable | Description | Default |
|---|---|---|
VITE_API_BASE_URL |
Backend API base URL | http://localhost:8000/api |
- Product description and value proposition
- Quick URL input
- Trust indicators (accuracy, model version)
- Feature highlights
- URL input with validation
- Real-time analysis status
- Risk score visualization
- Feature importance breakdown
- Security checks timeline
- Export and sharing options
- Paginated analysis history
- Filtering by label, score, date
- CSV export
- Quick re-analysis links
- Analytics charts
- Risk distribution visualization
- Score distribution
- Summary statistics
- API key configuration
- Privacy controls
- Theme toggle (light/dark)
- Model information
- Limitations and disclaimers
- Privacy policy
- Contact information
npm run testE2E tests can be added using Cypress or Playwright. See the testing section in the project requirements.
The application follows WCAG AA guidelines:
- Keyboard navigation support
- ARIA labels on interactive elements
- Color contrast compliance
- Focus indicators
- Screen reader support
- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)
- Build the project:
npm run build - Deploy the
distdirectory - Set environment variables in Netlify dashboard
- Connect your Git repository
- Set build command:
npm run build - Set output directory:
dist - Configure environment variables
- Install
gh-pages:npm install --save-dev gh-pages - Add to
package.json:
"scripts": {
"deploy": "npm run build && gh-pages -d dist"
}- Run:
npm run deploy
- Components are designed to be testable with mocked API responses
- All API calls go through the
apiservice layer for easy mocking - TypeScript ensures type safety across the application
- Tailwind utility classes provide consistent styling
- React Query handles caching and refetching automatically
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests if applicable
- Submit a pull request
For questions or issues, please open an issue on GitHub or contact the developer.
Built with ❤️ for security practitioners, developers, and users who want to stay safe online.