Animated-Image-Gallery

A performant image gallery site that can handle hundreds of large images and deliver a great user experience.

I'll use the pexels Api and chakra-UI component library. I'll also use next.js component to optimize the images fetched from the pexels API Run - (npx create-next-app image-gallery)

Head over to https://www.pexels.com/api/new/ and create a new API key. Rename .env.example to .env.local and add the API key in it.

PEXELS_API_KEY =

This is a Next.js project bootstrapped with create-next-app.

Getting Started

Install the dependencies by running the following command.

npm install

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.