A responsive Next.js 14 + TailwindCSS web application that displays movies currently playing in theaters using The Movie Database (TMDB) www.themoviedb.org API.

• Responsive UI (desktop, tablet & mobile)

Web page URL https://interview-test-pi.vercel.app/

The web page should be displayed:

1. Now Playing movies from TMDB, that shows 30 movies per page, most popular first.
2. On top of the movie list, it shows filters by genre and ratings.
3. We can also sort the movie list by movie title, release date, popularity or ratings.
4. When we click the movie card, each of it will display a movie popup window - contains:
   • movie title
   • release date
   • summary(sypnosis)
   • "cast's name" as "character's name"

1️⃣ Clone the Repository

git clone https://github.com/emiraabdulrahman/movie-tmdb-app.git
cd movie-tmdb-app

2️⃣ Install Dependencies

npm install

3️⃣ Set Up Environment Variables

Create a .env.local file in the root folder and add:

TMDB_API_KEY=your_tmdb_api_key_here

🔑 You can get a free API key from TMDB.

4️⃣ Run the Development Server

npm run dev

Then open http://localhost:3000 🎉

---

📸 Screenshots

Movie Listing

---

Movie Modal

👩‍💻 Author

Developed by \emira abdul rahman 📧 For access to the source code: contact it@sixides.com