Skip to content

πŸ“· Photo gallery that pulls images from my personal Cloudinary API - written in Typescript & styled with Tailwind.

Notifications You must be signed in to change notification settings

CodeLikeAGirl29/image-gallery

Repository files navigation

Better Together.

A gallery meant to inspire.

════ β‹†β˜…β‹† ════

Touch the Color; See the Sound

When unexpected sadness really hits home & it's difficult to shake it... always remember it's the smallest things that manage to melt my heart.

Live demo can be found here

I even designed the SVG (Logo and Bridge files used on this project)

Tech Stack

  • nextjs

  • typescript

  • tailwindcss


Environment Variables

To run this project, you will need to add the following environment variables to your .env file

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=<name-of-cloud>

CLOUDINARY_API_KEY=<your-api-key>

CLOUDINARY_API_SECRET=<secret-key>

// optional

CLOUDINARY_FOLDER=<specific-folder-name>

Configuration

Add the following variables to your .env.local or .env file. & if you deploy it, with Vercel for example, you can place these variables in the Envorpnment Variables part of the setup!

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=""

CLOUDINARY_API_KEY=

CLOUDINARY_API_SECRET=

CLOUDINARY_FOLDER=

Dependencies

  • From the command line:
  1. @headlessui/react
  2. @heroicons/react
  3. cloudinary
  4. eslint-config-next
  5. framer-motion
  6. imagemin
  7. imagein-jpegtran
  8. next
  9. react
  10. react-dom
  11. react-hooks-global-state
  12. react-swipeable
  13. react-use-keypress

Usage

Screenshots

App Screenshot

Features

Code

Vercel

Build

    npm run build

Deploy (how to install build product)

Deploy with Vercel

License

This example shows how to create an image gallery site using Next.js, Cloudinary, and Tailwind.

Demo

View the demo here

Check out our Next.js deployment documentation for more details.

How to use

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example::

 npx create-next-app --example with-cloudinary nextjs-image-gallery
yarn create next-app --example with-cloudinary nextjs-image-gallery
pnpm create next-app --example with-cloudinary nextjs-image-gallery

References