https://github.com/heyitsadityaa/photo-gallery

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.
https://github.com/heyitsadityaa/photo-gallery

convex drag-and-drop file-storage fullstack image-upload nextjs pagination photo-gallery portfolio-project real-time tailwindcss toast-notifications typescript

Last synced: about 1 month ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/heyitsadityaa/photo-gallery
• Owner: heyitsadityaa
• License: mit
• Created: 2025-07-10T15:55:27.000Z (3 months ago)
• Default Branch: master
• Last Pushed: 2025-08-25T09:52:35.000Z (about 1 month ago)
• Last Synced: 2025-08-25T10:57:35.460Z (about 1 month ago)
• Topics: convex, drag-and-drop, file-storage, fullstack, image-upload, nextjs, pagination, photo-gallery, portfolio-project, real-time, tailwindcss, toast-notifications, typescript
• Language: TypeScript
• Homepage: https://photo-gallery-ebon-chi.vercel.app
• Size: 1.38 MB
• Stars: 2
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# 📸 Photo Gallery



[![Next.js](https://img.shields.io/badge/Next.js-14-black?logo=next.js)](https://nextjs.org/)

[![Convex](https://img.shields.io/badge/Convex-Backend-orange)](https://convex.dev/)

[![TypeScript](https://img.shields.io/badge/TypeScript-5-blue?logo=typescript)](https://www.typescriptlang.org/)

[![shadcn/ui](https://img.shields.io/badge/shadcn/ui-UI-000000?logo=shadcnui)](https://ui.shadcn.com/)

[![Vercel](https://img.shields.io/badge/Vercel-Deployment-000000?logo=vercel)](https://vercel.com/)

[![React Hook Form](https://img.shields.io/badge/React_Hook_Form-Forms-EC5990?logo=reacthookform)](https://react-hook-form.com/)

[![React Dropzone](https://img.shields.io/badge/React_Dropzone-Upload-61DAFB?logo=react)](https://react-dropzone.js.org/)



## Demo

[Photo Gallery Demo](https://github.com/user-attachments/assets/30ff4d26-48ea-4616-927e-c1751f919f53)

## 📋 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