This is a demo project showcasing a movie search app built with Next.js and the OMDb API. It allows users to search for movies, view detailed information about them, and explore movie posters, ratings, and more. Perfect for learning how to integrate third-party APIs with React-based frameworks like Next.js.
- Search for movies using the OMDb API.
- Display movie posters, titles, year of release, and IMDb ratings.
- Responsive design with smooth UI interactions.
- Server-side rendering (SSR) for better SEO and performance.
- Frontend: React, Next.js
- API: OMDb API (Open Movie Database)
- Styling: CSS, Flexbox, Grid
- Deployment: Vercel (or any preferred platform)
Here are some cool screenshots of the app in action:
This is a Next.js project bootstrapped with create-next-app.
To get this project up and running on your local machine, follow these steps:
- Node.js (v14 or later)
- npm or yarn
- OMDb API key (sign up at OMDb API to get one)
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen 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.
If you'd like to contribute to this project, feel free to fork the repo, create a branch, and submit a pull request. Make sure to follow the coding conventions and write tests where applicable.
This project is licensed under the MIT License - see the LICENSE file for details.
If you found this project useful, then please consider giving it a ⭐️ on Github and sharing it with your friends via social media.
Feel free to reach out to me through @sanjaykumarwebs if you have any questions or feedback!