Course Overview
Course Introduction
Course Conclusion
Technical Interviews • 7 min

Front-End Offline Coding Example

Sample requirements for a take-home coding exercise to illustrate scope and expectations.

Switch to the audio version if you prefer to learn by listening rather than reading.

AI-generated audio transcript

--:--
--:--

Logistics

  • Time: 8 hours (Working day)
  • Tech Stack: React (you may use additional libraries if justified)
  • Submission: GitHub repository with README, optional short demo video

Task Description

This exercise will evaluate your ability to build a small but realistic front-end feature under limited time.

Build a Movies Explorer application using the OMDb API (requires a free API key) or a similar open API of your choice.
The application should allow users to:

  • Search for movies by title (API query).
  • Display results with poster, title, year, and type (movie/series).
  • Add a filter bar that allows the user to:
    • Filter by type (movie, series, episode).
    • Sort results by year (ascending/descending).
  • Implement pagination to navigate through multiple result pages.
  • Implement proper loading, error, and empty states when fetching data.
  • Add a detail view: clicking on a movie should open a page/modal showing its description, genre, and rating (fetched from the API).

Don't

Stop at rendering only the first page of results without navigation or states

Do

Handle edge cases such as errors, empty results, and paginated queries

Important Details

  • The UI should be functional and easy to understand.
  • Styling can be minimal, but code clarity and structure matter most.
  • You may use external libraries, but you must:
    • Explain what the library does.
    • Show (briefly) how the same could be done without it.
  • Build your solution incrementally and commit regularly to Git for clarity.

Clients value a clear, working solution with explanations more than pixel-perfect design.

Required Deliverables

  • A Git repository with your project code.
  • A README file that explains:
    • How to run the project.
    • How to test the features.
    • What trade-offs or assumptions you made.
  • (Optional) A short demo video to showcase the app in action.

Bonuses (Optional)

If you have extra time, you can pick one or more improvements. Make sure to mention in the README what you did and why.

  1. Additional Filters: Add filtering by year range or genre.

  2. Improved UX: Implement infinite scrolling instead and allow switch between classic pagination.

  3. Persistence: Store search queries, filters, and pagination in the URL query params so they survive refresh.

  4. Testing: Add a few simple unit tests for your filtering logic or API layer.

  5. Performance: Cache API results to avoid unnecessary re-fetching when navigating back and forth.

Don't

Over-invest in extras while leaving core features unfinished

Do

Tackle bonuses only after the main requirements are complete