Future Exercise Library

A responsive exercise library application built with Next.js, TypeScript, and React. Features real-time search, filtering, keyboard navigation, and theme support.

🎯 Key Features

• Real-time search with debounced input
• Advanced filtering by muscle groups and equipment
• Keyboard navigation with comprehensive shortcuts
• Responsive design for mobile and desktop
• Dark/Light theme support
• Favorites system with localStorage persistence
• Comprehensive testing coverage covering critical logic

🚀 Quick Start

# Install dependencies
npm install

# Start development server
npm run dev

# Run tests
npm test

🏗️ Architecture

Tech Stack

• Framework: Next.js 14 with App Router
• Language: TypeScript
• Styling: CSS Modules with custom properties
• Testing: Jest + React Testing Library
• API: Next.js proxy route

Key Decisions

API Proxy Pattern: /api/exercises proxies external API to avoid CORS issues.

Custom Hooks:

• useExercises - Data fetching and error handling
• useFavorites - localStorage persistence
• useKeyboardShortcuts - Navigation system
• useTheme - Dark/light mode

File Structure:

src/
├── components/       # UI components
├── hooks/           # Custom React hooks
├── lib/             # Utility functions (see exerciseUtils.ts)
├── types/           # TypeScript definitions
└── styles/          # Global styles and design tokens

⌨️ Keyboard Navigation

Shortcut	Action
/ or Cmd+K	Focus search
↑ / k	Navigate up
↓ / j	Navigate down
f	Toggle favorite
Esc	Clear/Close
Cmd+D	Toggle theme

🧪 Testing

Test coverage across critical logic in hooks, components, and utilities:

• useExercises: API integration, error handling, loading states
• useKeyboardShortcuts: Navigation system and input focus behavior
• SearchBar: User input, debouncing, accessibility
• exerciseUtils: Search logic, filtering, sorting algorithms

Run tests: npm test

🎨 Design System

See src/styles/globals.css for:

• CSS custom properties for theming
• Typography scale and spacing system
• Color palette for light/dark themes

🔌 API Integration

Endpoint: https://candidate.staging.future.co/sandbox/api/exercises Proxy: /api/exercises (avoids CORS) Types: See src/types/index.ts for Exercise interface

🔧 Implementation Notes

• TypeScript: Strict mode enabled
• Performance: Debounced search, memoized callbacks
• Accessibility: WCAG 2.1 AA compliant
• Testing: Comprehensive coverage with mocked dependencies

👨‍💻 Author/Developer

Jordan J. Dominguez Full-Stack Developer & Software Engineer

• GitHub: @jj-dominguez
• Email: [email protected]
• LinkedIn: Jordan J. Dominguez

Built with attention to detail, performance optimization, and end user experience in mind. This project demonstrates modern React patterns, comprehensive testing strategies, and production-ready code architecture. Let's build something great together!