🎬 Movie-Finder Movie-Finder is a simple, responsive web application built with React that lets you search for movies and view their details. With a focus on a component-based structure and a clean user interface, it provides a fast and intuitive way to discover film information, including posters, ratings, and plot summaries, directly from the web.
✨ Features Search Functionality: Find movies quickly and efficiently using a dynamic search bar.
Movie Cards: The application displays a card for each movie, showing its poster, title, and a brief summary.
Responsive Design: The app is fully responsive, offering a seamless experience across all devices, from desktops to mobile phones.
API Integration: Fetches up-to-date movie data from The Open Movie Database (OMDb) API.
🛠️ Technologies Used React: For building the user interface with a component-based architecture.
TypeScript: For application logic, state management, and API calls, providing type safety and better code quality.
Tailwind CSS: A utility-first CSS framework for rapid and responsive UI development.
The Open Movie Database (OMDb) API: Provides the source of all movie data.
🚀 Getting Started Follow these steps to get the project running on your local machine.
Prerequisites You will need a modern web browser and a code editor. You will also need to have Node.js installed on your machine.
Installation Clone the repository:
git clone https://github.com/thatcoolcoder1/movie-finder.git
Navigate to the project directory:
cd movie-finder
Install dependencies:
npm install
Run the application:
npm start
The application should now be running on http://localhost:3000 in your machine.
Note: The application requires an API key from OMDb. You can get one for free by signing up on their website, and then you'll need to add it to your project's code for the app to function correctly.
⚙️ Configuration & .gitignore To prevent sensitive files and build artifacts from being committed to your repository, it's a best practice to use a .gitignore file. Here is a recommended configuration for a React project:
logs .log npm-debug.log yarn-debug.log* yarn-error.log* pnpm-debug.log* lerna-debug.log*
node_modules dist dist-ssr *.local
.vscode/* !.vscode/extensions.json .idea .DS_Store *.suo .ntvs *.njsproj *.sln *.sw? .env