This is a dynamic image gallery using Pexels API and Next.js. This project is bootstrapped with create-next-app
. It uses Netlify Blobs for data storage and Netlify Image CDN for serving optimized images.
Landing page fetches a list of curated images from Pexels API. User can click on the image to view in detailed mode. User can also use the search functionality to find images of any topic. Moreover, authenticated users are allowed to like any image and create his/her own collection of liked images. From the user profile page, user can upload profile picture and change password.
Live project link: https://photograph-mzd.netlify.app
● Install the necessary dependencies:
pnpm install
● Rename the .env.example
file to .env
and add your PEXELS_API_KEY
obtained from https://www.pexels.com/api.
● Install Netlify CLI globally.
pnpm add netlify-cli -g
● Follow the step by step guide from the netlify documentation.
● Once you are done with that, you should be able to run the project locally by this command.
netlify dev
● Open http://localhost:8888 with your browser to see the result.