A comprehensive collection of challenging React coding exercises designed to test advanced frontend development skills. Each exercise is a complete project with its own Vite setup, dependencies, and detailed requirements.
These exercises are designed for experienced React developers looking to demonstrate their skills in:
- Performance Optimization: Virtual scrolling, efficient re-rendering, memory management
- Complex State Management: Real-time data, optimistic updates, conflict resolution
- Advanced Interactions: Drag-and-drop, keyboard navigation, accessibility
- Professional UI/UX: Responsive design, themes, animations
- Real-world Patterns: File management, form building, data visualization
ui-coding-tests/
├── exercise-1-advanced-data-table/ # Virtual scrolling & data management
├── exercise-2-realtime-dashboard/ # Real-time data & WebSocket simulation
├── exercise-3-form-builder/ # Drag-and-drop & dynamic forms
├── exercise-4-file-manager/ # Complex hierarchical data & operations
├── exercise-5-chat-application/ # Real-time communication & state sync
└── README.md # This file
Each exercise is a standalone project. To get started:
# Choose an exercise
cd exercise-1-advanced-data-table
# Install dependencies
npm install
# Start development server
npm run devDifficulty: ⭐⭐⭐⭐ Focus: Performance, Virtualization, Complex Filtering
Build a high-performance data table that can handle 50,000+ rows with:
- Virtual scrolling with
@tanstack/react-virtual - Advanced filtering and sorting
- Column management (resize, reorder, hide/show)
- Row selection and bulk operations
- Export functionality
Key Skills: Performance optimization, virtual scrolling, state management
Difficulty: ⭐⭐⭐⭐⭐ Focus: Real-time Data, Charts, WebSocket Simulation
Create a live metrics dashboard with:
- Real-time data updates (100+ metrics/second)
- Interactive charts with Recharts
- Customizable layout with drag-and-drop
- Alert system with thresholds
- Time-range controls and historical data
Key Skills: Real-time updates, data visualization, performance under load
Difficulty: ⭐⭐⭐⭐⭐ Focus: Drag-and-Drop, Dynamic Components, Form Validation
Build a visual form builder similar to TypeForm:
- Drag components from palette to canvas
- 15+ field types with validation
- Conditional logic and dependent fields
- Real-time preview and JSON export
- Multi-step forms and templates
Key Skills: Complex drag-and-drop, dynamic component generation, form handling
Difficulty: ⭐⭐⭐⭐ Focus: Hierarchical Data, Keyboard Navigation, Complex Interactions
Create a file explorer interface like VS Code:
- Tree navigation with lazy loading
- Multi-selection and bulk operations
- Context menus and keyboard shortcuts
- Drag-and-drop file operations
- Search and multiple view modes
Key Skills: Tree structures, keyboard accessibility, complex state updates
Difficulty: ⭐⭐⭐⭐⭐ Focus: Real-time Communication, State Synchronization, Rich Interactions
Build a Slack-like chat application:
- Real-time messaging with WebSocket simulation
- Multiple channels and direct messages
- Rich text formatting and file sharing
- Typing indicators and presence system
- Message threads and reactions
Key Skills: Real-time state sync, optimistic updates, complex messaging UI
- Code Quality: Clean, maintainable, well-structured code
- Performance: Efficient rendering, memory usage, and user interactions
- Architecture: Proper separation of concerns, reusable components
- TypeScript: Proper typing, interfaces, and type safety
- Testing: Unit tests for complex logic (bonus points)
- Responsiveness: Works well on desktop, tablet, and mobile
- Accessibility: Keyboard navigation, screen reader support, ARIA labels
- Visual Design: Professional appearance, consistent spacing, smooth animations
- Error Handling: Graceful error states and user feedback
- Loading States: Appropriate loading indicators and skeleton screens
- Performance at Scale: Handles large datasets without degradation
- Offline Support: Works without network connection
- Keyboard Shortcuts: Power-user keyboard navigation
- Customization: Themes, user preferences, layout options
- Real-time Features: Live updates, collaborative editing
- Read the entire exercise before writing any code
- Start with the core features - get the basics working first
- Focus on one exercise - don't try to do them all at once
- Plan your architecture - sketch out components and data flow
- Use TypeScript effectively - proper interfaces and type safety
- Optimize early - consider performance from the beginning
- Test as you go - verify functionality works correctly
- Handle edge cases - empty states, errors, loading states
- Go beyond requirements - implement bar raiser features
- Polish the details - smooth animations, perfect spacing
- Document your decisions - explain complex code and trade-offs
- Show your process - commit frequently with good messages
- React 18+ with TypeScript
- Vite for build tooling
- Modern CSS (CSS Modules, Styled Components, or Tailwind)
- @tanstack/react-virtual - Virtual scrolling
- @dnd-kit - Drag and drop interactions
- Recharts - Data visualization
- React Hook Form - Form management
- Date-fns - Date manipulation
- Lucide React - Icons
- React Query/SWR - Data fetching and caching
- Zustand/Redux Toolkit - State management
- Framer Motion - Animations
- React Testing Library - Testing
- Storybook - Component documentation
Each exercise should handle realistic scale:
- Data Table: 50,000+ rows without lag
- Dashboard: 100+ metric updates per second
- Form Builder: 100+ form fields
- File Manager: 10,000+ files in a directory
- Chat: 1,000+ messages with real-time updates
- Clean, modern interface with consistent spacing
- Professional color scheme (avoid bright/neon colors)
- Smooth animations and transitions
- Clear visual hierarchy and typography
- Intuitive navigation and controls
- Helpful loading states and error messages
- Responsive design for all screen sizes
- Accessible to users with disabilities
- Consistent naming conventions
- Clear component structure
- Appropriate comments for complex logic
- Clean git history with meaningful commits
- Working code with all features implemented
- README explaining your approach and decisions
- Setup instructions to run the project locally
- Demo or screenshots showing key features
- Completeness: Did you implement the core requirements?
- Quality: Is the code clean, performant, and well-structured?
- UX: Is the interface intuitive and polished?
- Advanced Features: Did you implement bar raiser challenges?
Each exercise includes:
- Detailed requirements with core and advanced features
- Architecture suggestions and best practices
- Mock data and starter components
- Performance guidelines and optimization tips
Recommended Order:
- Data Table - Start here for performance fundamentals
- File Manager - Build on state management skills
- Dashboard - Add real-time data handling
- Form Builder - Master complex interactions
- Chat App - Combine all skills for the ultimate challenge
- React Performance Patterns
- Accessible React Components
- TypeScript React Patterns
- Testing React Applications
Good luck! These exercises are designed to be challenging but rewarding. Take your time, focus on quality over speed, and don't hesitate to implement creative solutions. Show us what you can build! 🚀