cine-vault is a web application designed for movie and series enthusiasts, providing an easy and organized way to save, track, and manage your favorite content. If you’re someone who always forgets to watch a movie or series, or you want to track which episodes you've watched, this project is made just for you!
You can explore cine-vault in two ways:
-
Access the Live Version:
You can access the hosted project on Vercel here: cine-vault. No setup required, just start using it directly! -
Run Locally:
If you'd like to run the project on your own system, follow the steps below.
cine-vault was built with the goal of offering a unique experience to users who wish to:
- Search and save movies, series, or episodes for future viewing.
- Track the progress of watched content, allowing users to mark what has been seen and what still needs to be watched.
- Easy navigation, with a pagination system for larger results.
- Interactive and visual metrics, making the experience more fun and dynamic, giving users clear insights into their watching progress.
The project also features an intelligent search input for easily finding the desired content and a responsive interface that ensures a great experience across all devices, whether on desktop, tablet, or mobile.
Follow these steps to set up and run the project locally:
git clone https://github.com/Miguelzvd/CineVault.git
cd cine-vault.io- Visit OMDb API and register to create a free API key.
- After obtaining your API key, follow these steps:
With the project open, create a file named .env in the root directory. Inside the file, add the following line:
VITE_API_KEY = "your_api_key_here";Replace your_api_key_here with the API key you received from OMDb in your e-mail.
Make sure you have Node.js installed. Then, install the project dependencies:
npm installStart the application in development mode:
npm run devThe application will be accessible at:
http://localhost:5173
This project is built using:
- Vercel: Used for deploying the project.
- Tailwind CSS: For styling and responsive design.
- shadcn/ui: Provides reusable components.
- Magic UI: Adds additional visual enhancements.
- Axios: Used for making HTTP requests to fetch content.
- React Query: Manages server-state data fetching, caching, and synchronization.
- Sonner: A modern toast notification library to display success and error messages.
/src: Contains all the source code, including components, hooks, and pages./public: Static assets like images and icons./styles: Custom styling configurations, including Tailwind settings.
- Save Content: Save movies and series to watch later.
- Watch Tracking: Mark content as watched or unwatched.
- Progress Monitoring: View progress for movies, series, and episodes.
- Responsive Design: Optimized for all screen sizes.
This project is licensed under the MIT License.
Feel free to:
- Suggest new features.
- Report bugs via the repository's issue tracker.
- Contribute to the codebase.
Thank you for your support! 😊