Scribd
Upload
48 views2 pages

Mini Movie Explorer App Project Brief

The project involves creating a 'Mini Movie Explorer,' a single-page app for users to search for movies and maintain a watchlist. Key features include a search UI that utilizes the OMDb API, a watchlist that persists through localStorage, and a responsive layout. Additional stretch goals may include a movie details drawer, watchlist management options, and a dark-mode toggle.

Uploaded by

ujjawalduhan01
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
48 views2 pages

Mini Movie Explorer App Project Brief

The project involves creating a 'Mini Movie Explorer,' a single-page app for users to search for movies and maintain a watchlist. Key features include a search UI that utilizes the OMDb API, a watchlist that persists through localStorage, and a responsive layout. Additional stretch goals may include a movie details drawer, watchlist management options, and a dark-mode toggle.

Uploaded by

ujjawalduhan01
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Project brief

Build a “Mini Movie Explorer.”


A small single-page app that lets users search for movies and save a personal “watchlist.”

Core requirements (must-haves)


1. Search UI

o Text input that debounces user typing.

o On submit (or after a 500 ms pause), call the free OMDb public API (no key
needed for up to 1 000 calls/day).

o Display up to 10 results with poster, title, and year.

2. Watchlist

o Clicking a “＋ Watchlist” button next to a movie adds it to a watchlist panel.

o Duplicates should be prevented.

o Persists between page reloads via localStorage.

3. Responsive layout

o Mobile-first; grid/column swap on ≥768 px.

4. Clean code

o Functional components, React 18+ hooks (useState, useEffect).

o PropTypes or TypeScript for type-safety.

o Organized folder structure (e.g., components/, hooks/, styles/).

Nice-to-have stretch goals (do only if time allows)


• Movie details drawer – click a result to open a side panel showing full plot & ratings
(extra API call).

• Remove / reorder watchlist items (drag-and-drop or up/down arrows).

• Dark-mode toggle (CSS variables or Tailwind).


Deliverables

Item Expectation

GitHub repo Clear README with setup & “how I approached it” section.

Running app npm start without errors; Vite or Create-React-App both fine.

Short Loom / video Quick walkthrough of decisions & trade-offs. (Optional but gains
(≤3 min) brownie points.)

Review rubric (what we’ll look at)


• Functionality (50%) – Does search work? Is watchlist persisted?

• Code clarity (25%) – Naming, component size, separation of concerns.

• UI/UX polish (20%) – Responsiveness, empty/error states, keyboard nav.

• Extras (5%) – Any stretch goals, testing, or CI.

You might also like