Project: Pexels Image Gallery

This project is an image gallery application that fetches images from pexels.com. It features pagination and allows users to search for images based on the object in the picture (e.g., typing "cat" displays images of cats). The application was built using the following technologies and tools:

1. Framework and Core

• NextJS: A React framework that provides server-side rendering and static site generation, enhancing performance and SEO.
• TypeScript: A statically typed superset of JavaScript that enhances code quality and maintainability.

2. Styling

• Tailwind CSS: A utility-first CSS framework that enables the creation of responsive and custom designs efficiently.

3. Validation and Data Handling

• zod: A TypeScript-first schema declaration and validation library used to ensure the correctness of data throughout the application.
  • Learn more about zod
• plaiceholder: A library for generating low-quality image placeholders, improving the user experience by providing a preview while images load.
  • Learn more about plaiceholder
• envalid: A library for validating environment variables to ensure the application configuration is correct and secure.
  • Learn more about envalid

4. Image Fetching and Search

• Pexels API: Used to fetch images from pexels.com, allowing users to browse a wide range of high-quality photos.
  • Learn more about Pexels API

Each of these technologies plays a vital role in delivering a modern, efficient, and user-friendly image gallery application.