Svelte Kite TV Maze

About the Project

This is an image and video search application powered by the Pexels API. It allows users to search for high-quality images and videos by entering keywords. The application fetches data from the Pexels API to provide a seamless and visually appealing experience.

Key highlights of the application include:

• Image Search: Find stunning images by entering relevant keywords.
• Video Search: Discover high-quality videos based on your search criteria.
• Infinite Scrolling: Browse through an endless collection of media with smooth scrolling.
• Download Options: Easily download images and videos directly from the application.
• Responsive Design: Optimized for both desktop and mobile devices, ensuring a consistent user experience.

By utilizing the Pexels API, this application provides access to a vast library of free-to-use images and videos, making it a valuable tool for content creators, designers, and anyone in need of high-quality media.

Screenshots

Please find some of the screenshots of the application below.

Development

Sign up of this https://www.pexels.com/api/ Pexels website and get your API key. This API does have generous free tier which should be good enough for experimentation. The goal is this application was to implement a visual gallery consisting of images and videos which includes features like search and load more data on demand.

Once you got the key, you need to create an env file inside the root folder.

VITE_API_KEY=your_key

Install the dependencies and you should be fine.

SSR - When to render on client and when on server?

server-side rendering (SSR), consider the following:

• Render on the server when the data is dynamic, sensitive, or needs to be indexed by search engines. For example, fetching movie details from an API that requires authentication or ensuring SEO for movie pages.
• Render on the client when the data is user-specific, frequently updated, or doesn't need to be indexed. For example, displaying a user's watchlist or handling client-side interactions like filtering and sorting movies.

By balancing SSR and client-side rendering, you can optimize performance and user experience.

Technologies Used

• SvelteKit: A modern framework for building fast and scalable web applications.
• TailwindCSS: A utility-first CSS framework for styling.
• TypeScript: A strongly typed programming language for better code quality and maintainability.

Getting Started

To run the project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/apfirebolt/sveltekit-pexels-gallery.git
   

2. Navigate to the project directory:

   cd sveltekit-pexels-gallery
   

3. Install dependencies:

   npm install
   

4. Start the development server:

   npm run dev
   

5. Open your browser and navigate to http://localhost:8080.

If you liked this project and found it helpful, please consider giving it a ⭐ on GitHub!

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.