https://github.com/codelikeagirl29/image-gallery
📷 Photo gallery that pulls images from my personal Cloudinary API - written in Typescript & styled with Tailwind.
https://github.com/codelikeagirl29/image-gallery
cloudinary css gallery javascript js nextjs photos react svg svg-text-design tailwindcss typescript
Last synced: 2 months ago
JSON representation
📷 Photo gallery that pulls images from my personal Cloudinary API - written in Typescript & styled with Tailwind.
- Host: GitHub
- URL: https://github.com/codelikeagirl29/image-gallery
- Owner: CodeLikeAGirl29
- Created: 2023-05-17T20:30:37.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-03T19:01:29.000Z (about 3 years ago)
- Last Synced: 2025-06-03T16:17:50.257Z (about 1 year ago)
- Topics: cloudinary, css, gallery, javascript, js, nextjs, photos, react, svg, svg-text-design, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://image-gallery-eight-lac.vercel.app
- Size: 646 KB
- Stars: 0
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://image-gallery-eight-lac.vercel.app/)
I even designed the SVG (Logo and Bridge files used on this project)
## Tech Stack
- 
- 
- 
---
## Environment Variables
To run this project, you will need to add the following environment variables to your .env file
`NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=`
`CLOUDINARY_API_KEY=`
`CLOUDINARY_API_SECRET=`
// optional
`CLOUDINARY_FOLDER=`
## 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
### Features
## Code
### Build
```
npm run build
```
### Deploy (how to install build product)
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FCodeLikeAGirl29%2Fimage-gallery&env=NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,CLOUDINARY_API_KEY,CLOUDINARY_API_SECRET&envDescription=API%20Keys%20are%20Needed%20for%20this%20to%20work.&envLink=https%3A%2F%2Fcloudinary.com%2Fguides%2Ffront-end-development%2Fintegrating-cloudinary-with-next-js&project-name=cloudinary-nextjs&demo-title=Img%20Gallery&demo-description=A%20Nextjs%20blog%20site%20using%20my%20Cloudinary%20Images%20%26%20styled%20with%20Tailwindcss.&demo-url=https%3A%2F%2Fimage-gallery-eight-lac.vercel.app%2F&integration-ids=oac_0Bh9szvT534p5qWBHYR2EwiG)
## License
This example shows how to create an image gallery site using Next.js, [Cloudinary](https://cloudinary.com), and [Tailwind](https://tailwindcss.com).
## Demo
View the demo [here](https://image-gallery-eight-lac.vercel.app/)
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
## How to use
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example::
```bash
npx create-next-app --example with-cloudinary nextjs-image-gallery
```
```bash
yarn create next-app --example with-cloudinary nextjs-image-gallery
```
```bash
pnpm create next-app --example with-cloudinary nextjs-image-gallery
```
## References
- Cloudinary API: https://cloudinary.com/documentation/transformation_reference