27db3d968f
This commit establishes the complete Next.js frontend foundation with comprehensive backend integration: ## Core Infrastructure ✅ - Next.js 14 with App Router and TypeScript configuration - Tailwind CSS with custom design system and dark mode - Complete project structure with proper imports and path aliases ## API Integration Layer ✅ - Full-featured API client with authentication, file upload, and WebSocket - Comprehensive TypeScript type definitions for all API responses - Axios-based HTTP client with interceptors and error handling - Socket.io integration for real-time progress updates ## Authentication System ✅ - useAuth hook with Google OAuth integration - JWT token management with automatic refresh - Protected route handling and session persistence - Login/logout flow with redirect management ## File Upload System ✅ - useUpload hook with drag & drop functionality - File validation (size, type, duplicates) - Progress tracking during upload - Batch creation and image processing workflow ## WebSocket Integration ✅ - useWebSocket hook for real-time updates - Progress subscription for batch processing - Reconnection logic with exponential backoff - Event-driven updates for batches, images, and user data ## UI Foundation ✅ - Responsive Header with user authentication state - Professional Footer with proper navigation - Error Boundary for graceful error handling - Toast notification system with multiple variants - Loading spinners and UI components ## Layout & Navigation ✅ - Main page component with authenticated/unauthenticated states - Dynamic content switching between landing and dashboard - Mobile-responsive design with proper accessibility This provides the complete foundation for a production-ready frontend that integrates seamlessly with the existing backend APIs, supporting all core workflows from authentication to file processing. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
92 lines
No EOL
2.6 KiB
JSON
92 lines
No EOL
2.6 KiB
JSON
{
|
|
"name": "@seo-image-renamer/frontend",
|
|
"version": "1.0.0",
|
|
"description": "Next.js frontend for SEO Image Renamer with complete backend integration",
|
|
"private": true,
|
|
"scripts": {
|
|
"dev": "next dev -p 3000",
|
|
"build": "next build",
|
|
"start": "next start -p 3000",
|
|
"lint": "next lint",
|
|
"type-check": "tsc --noEmit",
|
|
"test": "jest",
|
|
"test:watch": "jest --watch",
|
|
"test:coverage": "jest --coverage",
|
|
"storybook": "storybook dev -p 6006",
|
|
"build-storybook": "storybook build"
|
|
},
|
|
"dependencies": {
|
|
"next": "^14.0.4",
|
|
"react": "^18.2.0",
|
|
"react-dom": "^18.2.0",
|
|
"@types/node": "^20.10.5",
|
|
"@types/react": "^18.2.45",
|
|
"@types/react-dom": "^18.2.18",
|
|
"typescript": "^5.3.3",
|
|
"tailwindcss": "^3.3.6",
|
|
"autoprefixer": "^10.4.16",
|
|
"postcss": "^8.4.32",
|
|
"@tailwindcss/forms": "^0.5.7",
|
|
"@tailwindcss/typography": "^0.5.10",
|
|
"@headlessui/react": "^1.7.17",
|
|
"@heroicons/react": "^2.0.18",
|
|
"socket.io-client": "^4.7.4",
|
|
"axios": "^1.6.2",
|
|
"@stripe/stripe-js": "^2.4.0",
|
|
"react-dropzone": "^14.2.3",
|
|
"react-hook-form": "^7.48.2",
|
|
"react-hot-toast": "^2.4.1",
|
|
"clsx": "^2.0.0",
|
|
"class-variance-authority": "^0.7.0",
|
|
"lucide-react": "^0.298.0",
|
|
"next-themes": "^0.2.1",
|
|
"zustand": "^4.4.7",
|
|
"jszip": "^3.10.1",
|
|
"file-saver": "^2.0.5",
|
|
"@hookform/resolvers": "^3.3.2",
|
|
"zod": "^3.22.4",
|
|
"react-query": "^3.39.3",
|
|
"framer-motion": "^10.16.16"
|
|
},
|
|
"devDependencies": {
|
|
"@types/file-saver": "^2.0.7",
|
|
"@types/jszip": "^3.4.1",
|
|
"@typescript-eslint/eslint-plugin": "^6.14.0",
|
|
"@typescript-eslint/parser": "^6.14.0",
|
|
"eslint": "^8.55.0",
|
|
"eslint-config-next": "^14.0.4",
|
|
"eslint-plugin-react": "^7.33.2",
|
|
"eslint-plugin-react-hooks": "^4.6.0",
|
|
"@testing-library/react": "^14.1.2",
|
|
"@testing-library/jest-dom": "^6.1.5",
|
|
"@testing-library/user-event": "^14.5.1",
|
|
"jest": "^29.7.0",
|
|
"jest-environment-jsdom": "^29.7.0",
|
|
"@storybook/addon-essentials": "^7.6.6",
|
|
"@storybook/addon-interactions": "^7.6.6",
|
|
"@storybook/addon-links": "^7.6.6",
|
|
"@storybook/blocks": "^7.6.6",
|
|
"@storybook/nextjs": "^7.6.6",
|
|
"@storybook/react": "^7.6.6",
|
|
"@storybook/testing-library": "^0.2.2",
|
|
"storybook": "^7.6.6",
|
|
"prettier": "^3.1.1",
|
|
"prettier-plugin-tailwindcss": "^0.5.9"
|
|
},
|
|
"engines": {
|
|
"node": ">=18.0.0",
|
|
"npm": ">=8.0.0"
|
|
},
|
|
"browserslist": {
|
|
"production": [
|
|
">0.2%",
|
|
"not dead",
|
|
"not op_mini all"
|
|
],
|
|
"development": [
|
|
"last 1 chrome version",
|
|
"last 1 firefox version",
|
|
"last 1 safari version"
|
|
]
|
|
}
|
|
} |