Movie Explorer - React Frontend Tech Task

Overview

Build a simple React application where users can search for movies and view their details using the OMDb API. This task is designed to assess your React skills, component architecture, state management, and UI/UX implementation.

⏱️ Time Limit: 3 hours - Focus on core functionality and clean code over additional features.

Features & Requirements

Main Features

1. Search Bar - Allow users to type a movie title to search
2. Movie Cards - Display search results showing movie poster, title, year, and rating
3. Detail View - Click a card to open detailed information showing title, poster, year, genre, and plot summary
4. State Management - Handle loading, empty, and error states

Technical Requirements

• React (latest version with functional components and hooks)
• JavaScript or TypeScript (your choice)
• CSS (vanilla CSS, CSS Modules, or styled-components - your choice)
• Component-based architecture with React hooks (useState, useEffect, etc.)
• Responsive design (mobile-first approach preferred)
• Clean, readable code with proper naming conventions
• Error handling for API failures and loading states during API calls

UI/UX Requirements

• Responsive Layout - Works well on mobile, tablet, and desktop
• Loading Spinner - Show while fetching data from API
• Empty State - Display "No results found" when search returns no movies
• Error Handling - Show user-friendly error messages for failed API calls
• Clean Design - Professional, modern interface with intuitive navigation
• Clear visual hierarchy and accessible design practices

API Integration

OMDb API Setup

1. Get a free API key from OMDb API
2. Use these endpoints:
   • Search: https://www.omdbapi.com/?apikey=YOUR_KEY&s=batman
   • Details: https://www.omdbapi.com/?apikey=YOUR_KEY&i=MOVIE_ID

Project Setup

Your project should be created with Create React App or Vite and run successfully with npm install && npm start.

Suggested Structure

src/
├── components/     # React components
├── services/       # API calls
├── styles/         # CSS files (if not using CSS-in-JS)
├── App.js
└── index.js

Submission Instructions

Option 1: GitHub Repository (Preferred)

1. Create a new public GitHub repository
2. Commit your code with clear, descriptive commit messages
3. Send the repository link via email

Option 2: Zip File

1. Create a zip file of your project (exclude node_modules folder)
2. Send via email attachment

Submission Requirements

Your submission must include:

• Working application that runs with npm install && npm start
• Clean, well-organized code
• Brief README.md with setup instructions, how to run the project, any assumptions or decisions made, and time spent on the task

Evaluation Criteria

Your submission will be evaluated on:

• Code Quality (30%) - Clean, readable code with proper naming conventions and component organization
• React Implementation (25%) - Effective use of hooks, component architecture, and state management
• API Integration (20%) - Proper error handling, loading states, and data fetching implementation
• UI/UX Design (15%) - Visual design quality, responsive layout, and user experience
• Functionality (10%) - All required features working with proper edge case handling

Tips for Success

1. Start Simple - Get basic functionality working first, then enhance
2. Handle Edge Cases - Empty searches, API failures, no results
3. Test Your App - Try different searches and test responsive design
4. Time Management - Focus on functionality first, styling second

Questions?

If you have any questions about the requirements, please don't hesitate to reach out via email.

---

Good luck! We look forward to reviewing your submission.