🖼️ Implemented a photo gallery with NextJs and Cloudinary.
next-photo-album.mp4
- Upload Images
- Search Images by tag name
- Add Image to album
- Add to favorites
- Transform Images
- Dark Theme Toggle
- Clone the repository:
git clone https://github.com/ranepaarth/next-photo-album.git
- Navigate to the project directory:
cd next-photo-album
- Install the dependencies:
npm install
Add a .env
file in the root directory and follow
# Create or login to your cloudniary account and then navigate to the developer dashboard, there you can get the following values
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
CLOUDINARY_URL
NEXT_PUBLIC_CLOUDINARY_API_KEY
CLOUDINARY_API_SECRET
# You can create your own custom upload preset from cloudinary settings after you have logged in
NEXT_PUBLIC_UPLOAD_PRESET
# This is done so as to not exceed cloudinary storage
NEXT_PUBLIC_MAX_IMAGES
- Start development server
npm run dev
- Open your Browser and visit http://localhost:3000 to view the website
- NextJs 14 App routing
- Server Actions
- Optimistic Updates
- Cloudinary's Upload & Search APIs
- Framer motion animation & transitions