Overview

This app uses React 19 and Next.js 15 (the latest versions), plus Typescript for type safety and ESLint for code quality and formatting.

Video Optimization Strategy

Using native HTML5 video elements instead of react-video for AWS S3/CloudFront hosted videos. Assumption is that these videos are already optimized and web-encoded, making additional optimization or transcoding unnecessary and avoiding performance overhead.

Video Mirroring Solution

Accepting reverse direction on video controls on mirrored exercise videos that demonstrate bilateral movements. This maintains simplicity while preserving video content clarity for both sides of the body.

Steps Taken

1. Add TypeScript types We are preventing runtime errors because of silly typos or given unexpected data types. We can easily inspect available properties. If API changes, we'll catch breaking changes immediately.
2. Add Data Fetching Logic (on Server) We are using server rendering for the data, keeping the data logic separate from the client/UI components. Unit testing these pure functions is easy, functions are reusable, and filter logic is centralized for easier optimization.
3. Add Unit Test For exercise-utils/Pure Functions
4. Add Basic Two-Pane Design, with basic search box, exercise list, and exercise detail pane with video player. Uses CSS Flexbox to create responsive two-pane layout and some basic mobile breakpoints. No external frameworks used.
5. Add Basic Accessiblity Features Keyboard navigation, keyboard activation with enter and space bar triggers, ARIA labels on all buttons, Semantic HTML, focuse styles indicators, and role attributes all in place.
6. Bug Squashed - New Video Not Loading Upon selection of new exercise, browser was not refreshing to load the new exercise video. Added useRef to access the video URL directly from the DOM, useEffect to force a browser reload new video source, and key prop to force React to create a new video element as well.
7. Video Display and Autoplay, VideoGrouping Group exercises by video URL to eliminate duplicate list entries for bilateral movements. Side selection buttons (Left Arm, Right Arm, etc.) are placed directly in the exercise list for immediate access. Non-flipped versions of bilateral-movement videos are prioritized and shown first by default. Videos autoplay when selected or when switching between variations, but with muted audio to comply with browser policies.
8. Add and synch sound as option for all videos
9. Enhance search functionality, add synonyms to exercise detail pane
10. Clean up

---

Here is a screenshot of my gitlogs, showing the time stamps for how the time was spent-- two sessions and about 3.5 hours.

---

Boilerplate README from create-next-app

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.