If you want to read this readme in Spanish
Welcome to my movie search engine! With this tool, you can explore and search for your favorite films.
Filter by release year and discover new cinematic gems.
Enjoy the magic of cinema! 🎥🍿
.webp)
.webp)
- Favicon Support: Support for a wide range of favicon sizes has been added, ensuring that the site’s icon displays correctly on all devices and platforms.
- Open Graph and Twitter Tags: Open Graph and Twitter meta tags have been included, which optimize the preview of the website on social platforms like Facebook and Twitter.
- Cross-Browser Compatibility: The web page uses the
X-UA-Compatiblemeta tag, which helps ensure compatibility with multiple browsers, especially older versions of Internet Explorer. - Movie API (OMDb): I used the OMDb (Open Movie Database) API to retrieve movie information.
- Grid Responsive: In this application, the movies will be displayed in rows and columns, adjusting to look good on both large screens and mobile devices.
- Avoiding Duplicate Searches: I've implemented logic to prevent the same search from being performed twice in a row. This improves efficiency and the user experience.
- Automatic Search While Typing: When the user types in the search field, the application automatically performs a search against the OMDb API without requiring an additional button click. This provides a quicker and smoother response for the user.
- Avoiding Continuous Searches While Typing (Debounce): Debounce is a technique that delays the execution of a function (in this case, the search) until the user has stopped typing for a brief period (300 ms). This prevents continuous searches while the user is still typing, which could overload the API or impact application performance.
- React - A JavaScript library for building interactive user interfaces.
- Vite - A fast and lightweight development environment for modern web applications.
- ESLint - An open-source tool that helps you find and fix problems in your JavaScript code.
- Fork or clone this repository
git clone git@github.com:joserafael0160/Movie-Finder.git- Install the dependencies:
- I used bun to install and manage the dependencies.
# Install bun for MacOS, WSL & Linux:
curl -fsSL https://bun.sh/install | bash
# Install bun for Windows:
powershell -c "iwr bun.sh/install.ps1|iex"
# Install with bun:
bun install- or you can use pnpm:
# Install pnpm globally if you don't have it:
npm install -g pnpm
# Install dependencies:
pnpm install- Run the development server:
# Run with bun:
bun run dev
# Run with pnpm:
pnpm run dev| Command | Action | |
|---|---|---|
| ⚙️ | dev |
Starts the local development server. |
| ⚙️ | build |
Builds the production version to ./dist/. |
| ⚙️ | lint |
Runs ESLint to find issues in your JavaScript code. |
| ⚙️ | preview |
Previews the local build. |
| ⚙️ | predeploy |
Generates the production version before deploying. |
| ⚙️ | deploy |
Deploys the site to GitHub Pages from the dist folder. |
Contributions are always welcome! Whether you’re reporting bugs, requesting new features, or improving existing functionalities, your help is greatly appreciated.
If you have any suggestions that could improve the project, please make a fork of the repository and create a pull request. You can also simply open an issue with the “enhancement” label.
Here is a quick guide:
- Make a fork of the Project
- Clone your fork (
git clone <URL of the fork>) - Add the original repository as remote (
git remote add upstream <URL of the original repository>) - Create your Feature Branch (
git switch -c feature/NewFeature) - Make your Changes (
git commit -m 'Add: some NewFeature') - Push to the Branch (
git push origin feature/NewFeature) - Open a pull request
Don't forget to leave a star ⭐️
✌️
A project created by @joserafael0160