Frontend Assignment - Emir B. #759

emirbayraktdev · 2025-08-23T23:48:11Z

🎬 CinEmir — TMDB Movie Explorer

A sleek, fast movie browser built with React + TypeScript + Vite, styled with Tailwind, and powered by TMDB. It features a dynamic, cinematic UI, smooth navigation, rich details, and a polished mobile experience.

“Find your next favorite film faster — with style.”

🌐 Live Demo

👉 cinemir.vercel.app

✨ Highlights

Smart search with debounce, grid results, and “Load more”
Cinematic detail page: hero with backdrop + gradient, ratings, and key facts
Tabbed details (synced to URL): Overview / Videos / Photos
Cast grid (with profile placeholders) & More like this rail (drag-to-scroll)
Robust states: skeletons, graceful errors (with retry), and empty views
A11y & UX polish: keyboard focus, CLS‑safe images
Sticky header & well-designed footer
Document title hook (tab shows the movie title)
Scroll behavior: scroll-to-top on route change, but not on “Load more” or tab switch
Decent amount of tests (limited due to time constraints): Vitest unit tests + Playwright E2E

🧱 Tech Stack

Frontend: React, TypeScript, Vite
Routing: React Router
Styles: Tailwind CSS, lucide-react icons
API: TMDB (The Movie Database)
Testing: Vitest + @testing-library/react + Playwright

📦 Getting Started

# 1) Install deps
npm install

# 2) Set env (see next section)
cp .env.example .env
# then set VITE_TMDB_API_KEY=your_key_here

# 3) Run dev server
npm run dev

# 4) Build & preview
npm run build
npm run preview

🔐 Environment Variables

Create .env from the example and add your TMDB key:

VITE_TMDB_API_KEY=YOUR_TMDB_KEY

This product uses the TMDB API but is not endorsed or certified by TMDB.

🧪 Testing

Unit: Vitest + Testing Library

Configured JSDOM environment
Global test utils (RTL, user-event), JSX transform, and strict TypeScript

Run:

npm run test          # watch
npm run test:run      # single run (CI)
npm run test:ui       # if using the Vitest UI

Folder convention:

tests/
  unit/
    *.test.tsx
  e2e/
    *.spec.ts

E2E: Playwright

Headless-stable tests with API mocking (routes for TMDB endpoints)
Local dev server bootstrapped via Playwright webServer

Run:

npm run e2e        # headless
npm run e2e:open   # headed (debug)

Tip: For headless reliability, don’t use arbitrary timeouts — mock network and assert on locators (we do).

🌐 Deployment (Vercel)

This is a client-side SPA; add a rewrite so all routes serve index.html:

vercel.json

{
    "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}

Then:

Push your branch to GitHub (e.g., assignment).
In Vercel, import the repo and select the assignment branch (Project → Settings → Git → Production Branch) or create a Preview for the branch.
Set VITE_TMDB_API_KEY in Project → Settings → Environment Variables.
Build Command: vite build • Output: dist

If you saw the Vercel default 404 page, you were missing the rewrite above.

🔧 Developer Notes

Reduced CLS: explicit image width/height; reserved spaces in skeletons; hero has fixed height
URL tab sync: ?tab=overview|videos|photos (resets to overview when navigating to a new movie)
Images endpoint & language: the images API can return empty arrays when language filters; we fetch without forcing language there to always get assets.
Scroll restoration: customized so pagination/tab switches don’t yank the viewport.

👏 Credits

Data/API: TMDB
- This product uses the TMDB API but is not endorsed or certified by TMDB.
Icons: lucide.dev

📄 License

MIT — do what you love. 💚

…; add base dark layout (Header/Footer) and routes

… from .env

…onents; wire global ErrorBoundary; install lucide-react icons

…e”; show title/year/rating

…tle gradient effect

…gradient), ratings and key metadata

…empty tabs gracefully

… images

…ith retry

…yling

…arch functionality and loading states

… hero dimensions; add custom hook for document title management

…lToTop component for improved navigation; update PillTabs styling; refine MovieHero gradients and loading behavior; adjust scrollbar styles for better aesthetics

…HomeRails for improved structure; add SearchResultsSection for handling search results; implement useTmdbSearch hook for data fetching and error handling

…rgins and paddings for improved responsiveness and aesthetics

…improve layout; implement custom hook for document title management; update storyline heading style in OverviewSection

…e project structure.

…dd Vercel configuration for rewrites

…jects; clean up MovieHeroSkeleton and update test assertions for clarity

…uctions, and improve testing section

…for consistency

…d CastSection components

… improve semantics

snewell92 · 2025-08-27T16:04:14Z

emir-assignment/src/lib/tmdb.ts

+
+    url.search = search.toString();
+
+    const res = await fetch(url.toString(), init);


Nowadays I would want to use react-query and build the tmdb lib around useQuery primitives with hooks like useMovies and useMovieDetails or something like that, you get caching OOTB that way.

snewell92 · 2025-08-27T16:05:46Z

emir-assignment/src/app/routes/HomePage.tsx

+        setLoading(true);
+        setError(null);
+
+        fetchJson<SearchResponse>(


All the loading around here (loading / error) can be subsumed into react-query (now called tanstack query), as the useQuery hook implements all of this for you.

You would like build your query key for useQuery with the page and page size in mind.

snewell92 · 2025-08-27T16:07:21Z

emir-assignment/src/app/routes/MoviePage.tsx

+                );
+            })
+            .finally(() => {
+                if (!controller.signal.aborted) setLoading(false);


It's very nice seeing someone be aware of and use abort controllers!

snewell92 · 2025-08-27T16:07:37Z

emir-assignment/src/app/routes/MoviePage.tsx

+                <div className="absolute inset-0">
+                    {heroBg ? (
+                        <div
+                            className="absolute inset-0 bg-cover bg-center blur-sm scale-105"


gotta love tailwind

snewell92 · 2025-08-27T16:13:13Z

emir-assignment/src/app/routes/HomePage.tsx

+            : "bg-[#00ad99] hover:bg-[#009b89]"
+    }
+    text-white disabled:opacity-60
+  `}


I think i'd recommend looking at clsx and the full tailwind utility suite. Shadcn also uses these utilities, it makes conditional classes behave without messy nested logic like this. So you could refacotr this bit into:

<button className={cn( loading ? "bg-[#00ad99]/40 cursor-not-allowed" : "bg-[#00ad99] hover:bg-[#009b89]", "inline-flex items-center justify-center gap-2 rounded-lg px-5 py-2 text-lg font-medium transition-colors duration-200 text-white disabled:opacity-60" )}

Set up for a cn function is documented here: https://ui.shadcn.com/docs/installation/manual

snewell92 · 2025-08-27T16:15:24Z

emir-assignment/src/hooks/useTmdbSearch.ts

+
+type SearchResponse = TmdbPage<TmdbMovie>;
+
+export function useTmdbSearch(query: string, page: number) {


Great intuition to pull this hook out - having it be useQuery inside will erase a lot of the complexity too.

emirbayrakt added 30 commits August 23, 2025 16:04

chore: initialize Vite React+TS app with Tailwind v4 and React Router…

14525e9

…; add base dark layout (Header/Footer) and routes

feat(api): add TMDB client with auth and image url helpers; load keys…

182aaf3

… from .env

feat(ui): add loading spinners, skeletons, and error/empty state comp…

cec9ded

…onents; wire global ErrorBoundary; install lucide-react icons

feat(search): debounced search bar with URL-synced query (?q=)

9803155

feat(search): movie grid backed by /search/movie with paged “Load mor…

4961403

…e”; show title/year/rating

feat(ui): add MovieCard hover overlay with truncated overview and sub…

c032204

…tle gradient effect

feat(home): add Trending/Popular

5adcedb

feat(detail): movie details page and cinematic hero (uses backdrop + …

ad97edb

…gradient), ratings and key metadata

feat(detail): add Overview/Videos/Photos tabs with URL state; handle …

ea07680

…empty tabs gracefully

feat(detail): add Cast section using /movie/{id}/credits with profile…

9826646

… images

feat(detail): add “More like this” rail via /movie/{id}/similar

f3ec503

feat(core): add 404 page and robust error handling for API failures w…

40f3a0b

…ith retry

feat: enhance layout and loading states; add skeletons and improve st…

9fd1c3b

…yling

feat: update layout with new header and footer components; enhance se…

a15ec07

…arch functionality and loading states

feat: enhance layout and styling of footer and header; improve search…

4813895

… hero dimensions; add custom hook for document title management

feat: enhance footer with copyright and author information; add Scrol…

5a13445

…lToTop component for improved navigation; update PillTabs styling; refine MovieHero gradients and loading behavior; adjust scrollbar styles for better aesthetics

feat: refactor HomePage component; introduce SearchHeaderSection and …

8e3d6ee

…HomeRails for improved structure; add SearchResultsSection for handling search results; implement useTmdbSearch hook for data fetching and error handling

feat: adjust layout and styling across multiple components; refine ma…

082173e

…rgins and paddings for improved responsiveness and aesthetics

feat: enhance Footer and Header components; add navigation links and …

7075c25

…improve layout; implement custom hook for document title management; update storyline heading style in OverviewSection

fix not found text

58ff781

feat: add testing setup with Vitest and Playwright

67946dd

feat: enhance test coverage with new unit and e2e tests

000f207

Remove unused React dependencies and their source maps to clean up th…

6614d90

…e project structure.

feat: update grid layout classes for consistency across components; a…

c6c9e55

…dd Vercel configuration for rewrites

refactor: streamline Playwright config by removing unused browser pro…

0369706

…jects; clean up MovieHeroSkeleton and update test assertions for clarity

docs: update README to enhance project overview, add deployment instr…

45ed5c8

…uctions, and improve testing section

docs: add Live Demo section with project link to README

df1cc5e

fix: correct placeholder text in SearchBar component and update test …

e054306

…for consistency

fix: update text color to white for better visibility in MovieCard an…

e6ec763

…d CastSection components

fix: replace anchor tag with span for title in MovieCard component to…

eda4759

… improve semantics

snewell92 reviewed Aug 27, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Frontend Assignment - Emir B. #759

Frontend Assignment - Emir B. #759

Uh oh!

emirbayraktdev commented Aug 23, 2025

Uh oh!

snewell92 Aug 27, 2025 •

edited

Loading

Uh oh!

snewell92 Aug 27, 2025

Uh oh!

snewell92 Aug 27, 2025

Uh oh!

snewell92 Aug 27, 2025

Uh oh!

snewell92 Aug 27, 2025

Uh oh!

snewell92 Aug 27, 2025

Uh oh!

snewell92 Aug 27, 2025

Uh oh!

Uh oh!


		url.search = search.toString();

		const res = await fetch(url.toString(), init);


		type SearchResponse = TmdbPage<TmdbMovie>;

		export function useTmdbSearch(query: string, page: number) {

Frontend Assignment - Emir B. #759

Are you sure you want to change the base?

Frontend Assignment - Emir B. #759

Uh oh!

Conversation

emirbayraktdev commented Aug 23, 2025

🎬 CinEmir — TMDB Movie Explorer

🌐 Live Demo

✨ Highlights

🧱 Tech Stack

📦 Getting Started

🔐 Environment Variables

🧪 Testing

Unit: Vitest + Testing Library

E2E: Playwright

🌐 Deployment (Vercel)

🔧 Developer Notes

👏 Credits

📄 License

Uh oh!

snewell92 Aug 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

snewell92 Aug 27, 2025

Choose a reason for hiding this comment

Uh oh!

snewell92 Aug 27, 2025

Choose a reason for hiding this comment

Uh oh!

snewell92 Aug 27, 2025

Choose a reason for hiding this comment

Uh oh!

snewell92 Aug 27, 2025

Choose a reason for hiding this comment

Uh oh!

snewell92 Aug 27, 2025

Choose a reason for hiding this comment

Uh oh!

snewell92 Aug 27, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

snewell92 Aug 27, 2025 •

edited

Loading