Skip to content

heyitsadityaa/photo-gallery

Repository files navigation

📸 Photo Gallery

Next.js Convex TypeScript shadcn/ui Vercel React Hook Form React Dropzone

Demo

photo-gallery.mp4

📋 Description

A modern, full-stack photo gallery application built with Next.js and Convex. Features real-time image management, intuitive drag-and-drop uploads, and a responsive design optimized for both desktop and mobile experiences.

✨ Features

  • 🖼️ Smart Image Upload - Drag-and-drop interface with instant preview
  • 📱 Responsive Grid Layout - Optimized viewing experience across all devices
  • 🔍 Real-time Search - Find images instantly by filename
  • 📄 Intelligent Pagination - Smooth navigation through large image collections
  • 🗑️ Safe Delete Operations - Confirmation dialogs prevent accidental deletions
  • Loading States - Skeleton loaders and progress indicators for better UX
  • 🔔 Toast Notifications - Real-time feedback for all user actions
  • 🚀 Real-time Updates - Live synchronization across multiple clients

🛠️ Tech Stack

  • ⚛️ Next.js 14 – Full-stack React framework with App Router
  • 🔄 Convex – Real-time backend-as-a-service with file storage
  • 📤 React Dropzone – Modern drag-and-drop file upload component
  • 🎨 React Icons – Comprehensive icon library
  • 💨 Tailwind CSS – Utility-first CSS framework for rapid styling
  • 🍞 Sonner – Beautiful toast notification system
  • 📝 TypeScript – Type-safe development experience

About

A modern, full-stack photo gallery application built with Next.js and Convex. Features real-time image management, intuitive drag-and-drop uploads, and a responsive design optimized for both desktop and mobile experiences.

Topics

Resources

License

Stars

Watchers

Forks

Contributors