This is my implementation of a movie search app as part of an employer's take-home exercise
-
Movie Search: Users can search for movies by keyword and view a list of results.
-
Genre Filtering: Search results can be filtered by genre.
-
Pagination: The app implements next/previous pagination, allowing users to navigate through pages of results.
-
Total Results Count: It displays the count of search results by calculating the total from available pages and the number of items on the last page. (See: Future Enhancements)
-
Movie Details: Each search result shows key movie information, including a summary, poster, duration, rating, and more.
-
Framework & Tools: The app is built using the latest versions of React with Next.js. I chose these technologies to leverage their strengths in server-side rendering, routing, and performance.
-
Data Fetching & Caching: Data is fetched securely from the Movies API with error handling. I’ve implemented caching strategies via Next.js’s data fetching features to improve performance and reduce redundant API calls.
-
Hybrid Rendering Approach: To balance SEO and interactivity, the app uses server-side rendering for movie details and client-side rendering for snappier perceived performance in the movies list.
-
Third-Party Libraries: I have incorporated Shadcn UI components. They are found in the components/ui directory.
-
Design Philosophy: While the design is straightforward (focused on functionality over flash), I prioritized code clarity, performance, and a smooth user experience.
-
Highlights & Future Improvements:
- What I’m Proud Of: This being a total demo of streamlined work with completed requirements, tests, and a good basic ci/cd workflow.
- Future Enhancements: A follow-up feature may be to improve how I handle total count of search results. This is currently page results, as movie count is not part of GET /movies a follow up request. I would go back to product to clarify this requirement. I would update GET /movies with the count rather than using another request.
This implementation reflects my technical acumen and the thoughtful design choices I make when building products. I look forward to your feedback and further discussion on potential improvements or additional features.
- Add
API_BASE_URLto.env npm run dev
Common Next.js Project Information
This is a Next.js project bootstrapped with `create-next-app`.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses `next/font` to automatically optimize and load Geist, a new font family for Vercel.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.