/my-image-gallery

Primary LanguageTypeScript

om's desktop wallpaper collection.

A collection of handpicked wallpapers that I like.

════ ⋆★⋆ ════

Live demo can be found here

SVG (Logo and Bridge files used on this project) designed by CodeLikeAGirl29. Also this website is inspired from her image-gallery website :D

Tech Stack

  • Next.js

  • Typescript

  • Tailwind CSS

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

Run

    npm run start

Run as dev

    npm run dev

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