Sophisticated movie generator SPA that features different filters and a watchlist exclusively recommending highly-rated films. It integrates modern design principles and connects to the TMDB and JustWatch APIs for comprehensive movie data.
Note
This project is subject to a rewrite with remix and small design changes, making it more performant, easier to maintain, and more visually appealing. The new version will be available soon.
- Movie Recommendations: Get a random movie recommendation based on your preferences, including streaming provider, genre and release year.
- Watchlist: Add movies to your watchlist and keep track of your favorite films. No account required!
- Detail Pages: View detailed information about each movie, including the cast, the trailer and streaming options.
- Single Page Application (SPA): Built with React, Vite, Wouter, and React Helmet for a seamless user experience.
- Modern Design: Styled using Tailwind CSS and components from shadcn/ui, ensuring a visually appealing and responsive interface.
- API Integration: Connects to TMDB API and JustWatch API for accessing a vast database of movies and related information.
- Native Fetch with ofetch: Utilizes native fetch enhanced with ofetch for efficient and reliable data fetching.
- Toast Notifications: Implements React Hot Toast for elegant toast notifications.
surprise.movie is an open-source project, aimed at demonstrating how to create a single-page application (SPA) with specific features mentioned above. It serves as an educational resource for developers interested in building similar applications or learning about these technologies.
I welcome contributions from developers of all skill levels. If you're interested in contributing, you can:
- Fork the repository and create a new branch for your feature or fix.
- Submit a pull request with a clear description of your changes or new features.
Your feedback and bug reports are valuable. If you encounter any issues while using the application, please report them on the Issues page of the GitHub repository. Provide a detailed description of the issue, steps to reproduce it, and screenshots if possible.
Before running the site locally, you will need to obtain an API key from TMDB (The Movie Database). This key is essential for fetching movie data from the TMDB API.
- Create an account or log in to TMDB at TMDB API Reference.
- Navigate to your account settings and select the API section.
- Follow the instructions to request an API key.
Once you have your TMDB API key, you need to set it up in your local environment:
- Create a file named
.env.local
in the root directory of your project. - Add the following line to the file:
VITE_TMDB_API_KEY=your_tmdb_api_key
- Replace
your_tmdb_api_key
with the actual API key you obtained from TMDB.
After setting up the API key, you can run the application locally by following these steps:
- Clone the repository:
git clone https://github.com/nikolailehbrink/surprise.movie
- Navigate to the project directory:
cd surprise.movie
- Install dependencies:
npm install
- Start the development server:
npm run dev