Skip to content

problem2

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History
 
 

problem2

README.md

Currency Swap Form

A world-class, global-scale currency swap application built with modern React, TypeScript, and Vite. This enterprise-grade application provides seamless cryptocurrency trading with real-time exchange rates, advanced analytics, offline support, and a premium user experience.

🚀 Standalone Project

This is a complete, production-ready React frontend application that can be developed, tested, and deployed independently. It contains everything needed for a modern web application:

  • ✅ Independent Dependencies: Own package.json with React 19, TypeScript, Vite
  • ✅ Complete Source Code: React components, hooks, utilities, and configurations
  • ✅ Comprehensive Testing: 17 unit tests + E2E tests with Playwright
  • ✅ CI/CD Pipeline: GitHub Actions with automated testing and deployment
  • ✅ Production Build: Optimized bundle ready for deployment
  • ✅ Documentation: Complete setup and development guide

✨ Features

Core Functionality

  • Real-time Exchange Rates: Live price data from Switcheo's API with automatic updates every 30 seconds
  • Currency Selection: Comprehensive dropdown selectors with token icons from Switcheo repository
  • Advanced Validation: Type-safe validation using Zod schemas with detailed error messages
  • Smart Input Handling: Debounced inputs to optimize API calls and user experience
  • Price History: Historical price tracking for market analysis

User Experience

  • Dark/Light Mode: Complete theme system with persistent user preferences
  • Responsive Design: Mobile-first approach with adaptive layouts
  • Loading States: Elegant skeleton loaders and progress indicators
  • Error Recovery: Graceful error handling with automatic retry mechanisms
  • Accessibility: WCAG 2.1 AA compliant with ARIA labels and keyboard navigation

Global Scale Features

  • Internationalization: Multi-language support (English, Vietnamese) with react-i18next
  • Progressive Web App: Installable PWA with offline capabilities
  • Advanced Analytics: Comprehensive event tracking and business metrics
  • Performance Monitoring: Real-time performance tracking and optimization
  • Offline Support: Service worker caching for uninterrupted usage

Enterprise Features

  • Security: Input sanitization, secure API communication, and XSS prevention
  • Caching Strategy: Multi-layer caching (memory, localStorage, service worker)
  • Error Boundaries: React error boundaries with recovery mechanisms
  • Feature Flags: Configurable feature toggles for controlled rollouts
  • Comprehensive Testing: 100% test coverage with unit, integration, and E2E tests

🛠 Tech Stack

Frontend Framework

  • React 19 with modern hooks, concurrent features, and Suspense
  • TypeScript 5.3+ for type safety and developer experience
  • Vite for lightning-fast development and optimized production builds

State Management & Data

  • React Hooks: useState, useEffect, useCallback, useContext
  • Zod: Runtime type validation and schema definitions
  • Local Storage: Persistent caching and user preferences
  • Service Worker: Offline caching and background sync

UI/UX & Styling

  • CSS Variables: Dynamic theming system with dark/light mode
  • CSS Modules: Scoped styling with custom properties
  • Responsive Design: Mobile-first with adaptive breakpoints
  • Animations: Smooth transitions and micro-interactions

Internationalization & Accessibility

  • react-i18next: Complete internationalization framework
  • ARIA: Comprehensive accessibility support
  • Keyboard Navigation: Full keyboard accessibility
  • Screen Reader: Optimized for assistive technologies

Development & Testing

  • Vitest: Fast unit testing with React Testing Library
  • Playwright: End-to-end testing for critical user flows
  • Storybook: Component documentation and visual testing
  • ESLint: Code quality and consistency enforcement
  • TypeScript: Strict type checking and IntelliSense

Performance & Analytics

  • Performance Monitoring: Custom hooks for render and interaction tracking
  • Bundle Analysis: Webpack bundle analyzer integration
  • Advanced Analytics: Event tracking and conversion metrics
  • Caching: Multi-layer caching strategy for optimal performance

🚀 Getting Started

Prerequisites

  • Node.js 18+
  • npm or yarn
  • Modern web browser with ES2020 support

Installation

  1. Navigate to the problem2 directory:

    cd src/problem2

  2. Install dependencies:

    npm install

  3. Start the development server:

    npm run dev

  4. Open http://localhost:5173 in your browser.

Available Scripts

  • npm run dev - Start development server with hot reload
  • npm run build - Production build with optimization
  • npm run preview - Preview production build locally
  • npm run test - Run unit tests with coverage
  • npm run test:e2e - Run end-to-end tests (requires dev server)
  • npm run lint - Run ESLint for code quality
  • npm run storybook - Start Storybook development server
  • npm run build-storybook - Build Storybook for production
  • npm run analyze-bundle - Analyze bundle size and dependencies

🏗 Project Structure

src/
├── components/              # Reusable UI components
│   ├── CurrencyInput.tsx    # Currency selection and input component
│   ├── ErrorBoundary.tsx    # Error boundary with recovery
│   ├── LoadingSkeleton.tsx  # Skeleton loading states
│   ├── Modal.tsx           # Modal dialog component
│   └── ErrorBoundary.tsx   # Error boundary component
├── contexts/               # React contexts for global state
│   └── ThemeContext.tsx    # Theme provider for dark/light mode
├── hooks/                  # Custom React hooks
│   ├── useAnalytics.ts     # Analytics tracking hook
│   ├── useCurrencySwap.ts  # Main business logic hook
│   ├── useDebounce.ts      # Input debouncing hook
│   ├── usePerformanceMonitor.ts # Performance tracking
│   └── useRateLimit.ts     # Rate limiting hook
├── utils/                  # Utility functions and configurations
│   ├── i18n.ts            # Internationalization setup
│   ├── logger.ts          # Logging utilities
│   ├── security.ts        # Security utilities
│   └── validation.ts      # Zod validation schemas
├── config/                # Configuration files
│   └── features.ts        # Feature flags and toggles
├── stories/               # Storybook stories for components
├── test/                  # Test utilities and setup
│   └── setup.ts          # Test configuration
├── public/                # Static assets
│   ├── sw.js            # Service worker for PWA
│   └── manifest.json    # PWA manifest
└── assets/               # Build-time assets

🎯 Key Features Deep Dive

Real-Time Price Updates

  • Automatic polling every 30 seconds for live exchange rates
  • Background updates without disrupting user interactions
  • Price history tracking for market analysis
  • Intelligent caching with fallback mechanisms

Dark Mode & Theming

  • Complete theme system with CSS variables
  • Persistent user preferences in localStorage
  • Smooth transitions between light and dark modes
  • Theme-aware components and icons

Progressive Web App (PWA)

  • Installable on desktop and mobile devices
  • Offline functionality with service worker caching
  • Background sync for price updates
  • Native app-like experience

Advanced Analytics

  • Comprehensive event tracking (page views, interactions, conversions)
  • Business metrics for swap transactions
  • Performance monitoring integration
  • Privacy-focused local storage persistence

Internationalization (i18n)

  • Multi-language support (English, Vietnamese)
  • Dynamic language switching
  • RTL support ready
  • Culturally appropriate formatting

🔧 API Integration

Switcheo Price API

  • Endpoint: https://interview.switcheo.com/prices.json
  • Update Frequency: Real-time polling every 30 seconds
  • Caching: 5-minute localStorage cache + service worker
  • Retry Logic: Exponential backoff (3 attempts)
  • Error Handling: Graceful degradation with cached data

Token Icons

  • Repository: Switcheo Token Icons
  • Format: SVG icons for all supported currencies
  • Fallback: Generic currency icons for missing assets
  • Caching: Browser cache with CDN optimization

🧪 Testing Strategy

Unit Tests (17 tests passing)

Run with npm test (runs once and exits) or npm run test:watch (watch mode for development). Comprehensive coverage of:

  • Hook logic and state management
  • Component rendering and user interactions
  • Validation functions and error handling
  • Utility functions and edge cases
  • Performance monitoring and analytics

End-to-End Tests

Run with npm run test:e2e. Critical user journey testing:

  • Complete currency swap workflows
  • Error states and recovery scenarios
  • Form validation and submission
  • Cross-browser compatibility

Component Testing

Storybook integration for visual testing:

  • Component variations and states
  • Interactive documentation
  • Accessibility testing
  • Visual regression prevention

🚀 CI/CD Pipeline

This project uses GitHub Actions for comprehensive continuous integration and deployment:

Pipeline Features

  • Matrix Testing: Node.js 18.x and 20.x across all test suites
  • Security Audits: Automated dependency vulnerability scanning
  • Code Quality: ESLint linting and bundle analysis
  • Comprehensive Testing: Unit tests (17 passing) and E2E tests with Playwright
  • Coverage Reporting: Codecov integration for test coverage tracking
  • Artifact Management: Build and test result artifacts
  • Path-based Triggers: Only runs when problem2 files change
  • GitHub Pages Deployment: Automated deployment to GitHub Pages on main branch

Available Scripts

npm test              # Run unit tests (runs once and exits)
npm run test:watch    # Run unit tests in watch mode
npm run test:coverage # Run tests with coverage report
npm run test:e2e      # Run E2E tests with Playwright
npm run build         # Production build
npm run preview       # Preview production build

Pipeline Stages

  1. Test: Matrix testing, security audit, linting, unit tests, E2E tests
  2. Build: Production build with bundle analysis
  3. Deploy: GitHub Pages deployment for main branch pushes

📊 Performance & Monitoring

Performance Features

  • Debouncing: 300ms input debouncing to reduce API calls
  • Lazy Loading: Component lazy loading with React.lazy
  • Code Splitting: Route-based and component-based splitting
  • Bundle Optimization: Tree shaking and dead code elimination
  • Caching Layers: Memory → localStorage → service worker

Monitoring & Analytics

  • Render Tracking: Component render performance monitoring
  • Interaction Tracking: User interaction analytics
  • Error Tracking: Comprehensive error logging and reporting
  • Conversion Tracking: Business metric collection
  • Performance Metrics: Core Web Vitals monitoring

🔒 Security & Compliance

Security Measures

  • Input sanitization for all user inputs
  • XSS prevention with content security policies
  • Secure API communication with HTTPS
  • Rate limiting for API requests
  • Secure local storage handling

Accessibility (WCAG 2.1 AA)

  • Semantic HTML structure
  • ARIA labels and live regions
  • Keyboard navigation support
  • Screen reader optimization
  • Color contrast compliance
  • Focus management and indicators

🌐 Browser Support & PWA

Browser Compatibility

  • Chrome 90+
  • Firefox 88+
  • Safari 14+
  • Edge 90+
  • Mobile browsers (iOS Safari, Chrome Mobile)

PWA Features

  • Installable: Add to home screen on mobile/desktop
  • Offline Support: Core functionality works offline
  • Background Sync: Price updates when connection restored
  • Push Notifications: Ready for future notification features
  • App-like UX: Native app feel with web technologies

🚀 Deployment & Production

Build Optimization

npm run build
  • Minified bundles with source maps
  • Asset optimization and compression
  • Service worker generation
  • PWA manifest generation

Environment Configuration

  • Environment-specific API endpoints
  • Feature flag management
  • Analytics configuration
  • Performance monitoring setup

CDN & Caching Strategy

  • Static asset CDN distribution
  • Aggressive caching headers
  • Service worker for runtime caching
  • Offline-first approach

🤝 Contributing

Development Workflow

  1. Setup: Follow installation steps above
  2. Branching: Create feature branches from main
  3. Development: Use npm run dev for development
  4. Testing: Run full test suite before committing
  5. Code Quality: Ensure ESLint passes and TypeScript is happy
  6. Documentation: Update README and component docs as needed

Code Standards

  • TypeScript strict mode enabled
  • ESLint configuration for consistency
  • Prettier for code formatting
  • Conventional commit messages
  • Comprehensive test coverage required

Feature Development

  • Use feature flags for experimental features
  • Add Storybook stories for new components
  • Include accessibility considerations
  • Performance impact assessment required
  • Analytics tracking for user interactions

📈 Roadmap & Future Enhancements

Planned Features

  • Advanced Trading: Limit orders and advanced order types
  • Portfolio Tracking: User portfolio management
  • Price Alerts: Notification system for price movements
  • Multi-wallet Support: Integration with popular crypto wallets
  • Advanced Charts: Historical price charts and technical analysis
  • Social Features: Trading communities and social trading

Technical Improvements

  • GraphQL API: More efficient data fetching
  • WebSocket Integration: Real-time price streaming
  • Advanced Caching: Redis integration for server-side caching
  • Micro-frontends: Modular architecture for scalability
  • AI/ML: Price prediction and trading insights

Built with ❤️ using modern web technologies for a world-class cryptocurrency trading experience.