FE Technical Task TMDB - Kayode Olumo

[Kayode-Olumo]

flixDB — Mews Frontend Developer Task

flixDB is a small movie search app built with Next.js 14, TypeScript, and Tailwind CSS, powered by the TMDB API.
It lets users search for movies, browse paginated results, and view detailed information for each film.
The goal was to create something production-minded — clean, fast, and easy to maintain — without overbuilding it.

LIVE APP: https://flix-db-app.vercel.app/

---

Tech stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS (with a few shadcn/ui components)
• API: TMDB v3 endpoints (proxied through Next.js API routes)
• State management: React hooks and a custom useDebounce hook
• Icons: Lucide React
• Testing: Jest + React Testing Library (for debounce logic)
• Build tool: npm + Next.js (Vercel-ready)

---

Overview

The app provides a simple, responsive movie search experience:

• Users can search for movies with a debounced input, reducing unnecessary API calls.
• Results are displayed in a responsive grid with pagination via a “Load More” button.
• Each movie links to a detail view showing the title, overview, release date, runtime, genres, rating, and production info.
• The UI includes loading, empty, and error states for smoother user experience.

All API calls are routed through server-side endpoints under /api/ to keep the TMDB access token secure.

---

Structure

flixdb/
  app/
    api/                # Server routes for TMDB API calls
    movie/[id]/         # Movie detail page
    page.tsx            # Home page (debounced search)
  components/           # UI components
  services/             # TMDB API helpers
  constants/            # URLs, debounce timing, and config
  types/                # TMDB response types
  __tests__/            # Jest tests
  test/                 # Test setup

The main logic sits in services/ and constants/ for clarity.
I kept the structure modular and predictable, making it easy to follow or extend later.

---

Notes and trade-offs

• All requests proxy through /api/* to protect the TMDB key and allow future caching.
• Chose pagination instead of infinite scroll for clarity and user control.
• Used Tailwind CSS for speed and consistency — minimal custom utilities.
• Avoided React Query or SWR to keep dependencies light; plain async functions were enough.
• Implemented debounce using a custom hook to keep searches responsive and efficient.
• Focused on one high-value test (debounce logic) rather than broad but shallow coverage.

---

Testing

Added one focused test covering the debounced search flow.
The app makes an initial API call on mount (“Now Showing”), so the test clears that call, types a new query, and confirms one API call is made after the debounce window with the correct arguments.

If extended, I’d add:

• Unit tests for API routes and error handling.
• Integration test for the movie detail page.
• Accessibility test using Playwright or Axe.

---

Future improvements

If this were a live product, I’d focus on:

• Localisation: Add support for multiple languages using TMDB’s language parameter.
• Accessibility: Better focus states and keyboard navigation.
• Performance: Cache frequent searches and prefetch details on hover.
• Analytics: Track search queries and user interactions to inform UX decisions.
• Testing: Expand to API and E2E tests.

---

How to run

npm install
cp .env.example .env.local
# Add your TMDB v4 Read Access Token:
# TMDB_ACCESS_TOKEN=<token>
npm run dev

Then open http://localhost:3000

To run tests:

npm run test

---

Final thoughts

I built flixDB to demonstrate how I think about structure, performance, and user experience — not just to make it work, but to make it maintainable.
It’s small, straightforward, and realistic, built the same way I’d approach an internal or production project.

[wiz-trial-29da161873]

Wiz Scan Summary

Scanner	Findings
Vulnerabilities	-
Sensitive Data	-
SAST Findings	1
Total	1

View scan details in Wiz

To detect these findings earlier in the dev lifecycle, try using Wiz Code VS Code Extension.