A modern Next.js 15 application showcasing seamless integration with Cloudinary for powerful media management, featuring a beautiful UI built with Shadcn components and fluid animations.
- 🖼️ Complete Cloudinary API integration
- 🚀 Next.js 15 App Router
- 🔒 Protected API routes with NextAuth.js
- 💅 Beautiful UI with Shadcn UI components
- ✨ Smooth animations with Framer Motion
- 📱 Fully responsive design
- 🌗 Light/dark mode support
- 🧩 Modular and extensible architecture
- Image/video uploads with drag & drop
- Asset gallery with filtering and sorting
- Image transformations and editing
- Asset tagging and organization
- Bulk operations (delete, tag, download)
- Image optimization and responsive delivery
- Node.js 18.17 or later
- npm or yarn
- Cloudinary account
- Clone the repository:
git clone https://github.com/coderooz/Cloudinary-NextJs.git
cd Cloudinary-NextJs- Install dependencies:
npm install
# or
yarn install- Set up environment variables:
Create a .env.local file in the root directory with the following variables:
# Cloudinary Configuration
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret
# NextAuth Configuration
NEXTAUTH_SECRET=your_nextauth_secret
NEXTAUTH_URL=http://localhost:3000
# Auth Provider (GitHub example)
GITHUB_ID=your_github_client_id
GITHUB_SECRET=your_github_client_secret
- Run the development server:
npm run dev
# or
yarn dev- Open http://localhost:3000 in your browser to see the application.
cloudinary-nextjs/
├── app/
│ ├── (auth)/
│ │ ├── login/
│ │ └── register/
│ ├── (dashboard)/
│ │ ├── dashboard/
│ │ ├── gallery/
│ │ └── settings/
│ ├── api/
│ │ ├── auth/
│ │ └── private/
│ │ └── assets/
│ │ └── [actionName]/
│ ├── layout.tsx
│ └── page.tsx
├── components/
│ ├── cloudinary/
│ │ ├── AssetGallery.tsx
│ │ ├── ImageUploader.tsx
│ │ └── ...
│ ├── layout/
│ ├── ui/
│ └── animations/
├── lib/
│ ├── cloudinary/
│ ├── auth/
│ └── utils/
├── public/
├── styles/
├── types/
├── .env.local
├── .gitignore
├── next.config.js
├── package.json
├── README.md
└── tsconfig.json
import { ImageUploader } from "@/components/cloudinary/ImageUploader";
export default function UploadPage() {
return (
<div className="container mx-auto py-10">
<h1 className="text-2xl font-bold mb-6">Upload Images</h1>
<ImageUploader folder="my-uploads" />
</div>
);
}import { AssetGallery } from "@/components/cloudinary/AssetGallery";
export default function GalleryPage() {
return (
<div className="container mx-auto py-10">
<h1 className="text-2xl font-bold mb-6">Image Gallery</h1>
<AssetGallery folder="my-uploads" />
</div>
);
}The project implements a comprehensive API for interacting with Cloudinary:
POST /api/private/assets/upload- Upload images to CloudinaryPOST /api/private/assets/delete- Delete images from CloudinaryGET /api/private/assets/list- List images from a folderGET /api/private/assets/details- Get details of a specific imagePOST /api/private/assets/rename- Rename an imagePOST /api/private/assets/transform- Apply transformations to an imagePOST /api/private/assets/tag- Tag imagesPOST /api/private/assets/generateArchive- Generate a ZIP archive of images
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Built with ❤️ by Coderooz