Pixel Vault

A modern web application for uploading, managing, and sharing digital images. Built with React, TypeScript, and Tailwind CSS, featuring dark/light theme support, adaptive image modals, private share groups, and download analytics. Powered by a REST API backend with Cloudinary storage.

Live Demo

🔗 https://ui-pixel-vault.vercel.app

Features

🔐 Authentication

JWT-based registration and login
Password visibility toggle
Password strength meter on registration
Protected routes with automatic redirect

Login Page

Register Page

🖼️ Image Upload (Batch)

Drag-and-drop or file picker — upload up to 30 images at once (5MB max per file)
Client-side validation (MIME type, file size, count)
Thumbnail grid with auto-extracted dimensions and per-file size
Per-file status badges: queued / uploading / success / failed
Per-file upload progress plus an overall progress bar
Partial-failure handling: successful uploads are preserved even if some files fail
Retry controls — retry a single failed upload or all failed uploads at once
Bounded concurrency (3 parallel uploads) for responsive UX on slow networks
Grid selection & reordering: include/exclude individual uploaded images and reorder them with ← / → controls before saving — ordered numbering badges show the final save order
Shared metadata (title, description, keywords, privacy) applied to every saved image
Cloud storage via Cloudinary

🎨 Gallery

Two grid modes: masonry and uniform grid
Full-text search by title or keywords
Pagination with page navigation — pagination only affects the returned data, not the counts
My Library tab shows accurate All / Public / Private counts driven by the API's totalCount, publicCount, and privateCount for the current search and scope
Privacy badges (🔒 Private / 🌐 Public) on library cards

Public Gallery — browse all public images shared by users

My Library — view only your own uploads with privacy filters (All / Public / Private)

🔍 Image Detail Modal (`src/components/ImageDetailModal.tsx`)

A single adaptive modal used everywhere an image is opened — My Library, Public Gallery, and Group Detail.

Adaptive layout — side-by-side info panel for portrait images on desktop, stacked layout (title → image → details) for landscape/mobile
Fullscreen view — click the image or the maximize icon to enter cursor-zoom fullscreen; press Esc or click anywhere to exit
Body-scroll lock — opening the modal locks the underlying page; only the modal content scrolls
Single scroll container — image and metadata scroll together so long info panels never desync from the picture
Metadata — dimensions, file size, upload date, keyword chips, full image URL with copy-to-clipboard
Quick actions — Copy URL, Open in new tab, Download
Owner controls — inline edit (title / description / keywords / privacy toggle) and delete-with-confirmation, hidden when viewing outside your own library
Group context — when opened from a Share Group, the Download button routes through the audited group-download endpoint instead of a direct link, and owner-only edit/delete are suppressed

✏️ Image Management (Owner Only)

Edit title, description, and keywords inline
Toggle privacy between public and private
Delete images with confirmation dialog
Bulk actions in My Library: select multiple images, then make Public/Private, add to a Share Group, or Delete in one click

👥 Share Groups (`src/pages/Groups.tsx`)

The Share Groups hub lets you privately share selected images with specific people.

Three tabs — Owned (groups you created), Joined (groups you've accepted into), Invites (pending / accepted / rejected)
Create group — name max 10 chars, unique per owner, enforced both client-side and server-side
Group cards — show role (Owner / Member), member count, image count, and a quick Open action
Owner-only controls — inline Rename and Delete on each owned group card
Invite management — pending invites display Accept / Reject buttons, accepted invites jump straight into the group
Pending-invite badge on the Groups nav link keeps unread invites visible across the app

🗂️ Group Detail (`src/pages/GroupDetail.tsx`)

The dedicated workspace for a single share group, with three tabs whose visibility depends on your role.

Images tab (owner + members)

Searchable, paginated grid of shared images (counts reflect the full matched set, not just the current page)
Click any image to open it in the shared ImageDetailModal (in group-download mode)
Per-image Download button records the download in the backend audit log and streams the file as a blob
Owner-only multi-select with a sticky action bar to bulk-remove images from the group
Owner-only “Add Images” dialog — searches your library, supports multi-select with pagination, and adds picks to the group in one call

Members tab (owner + members)

List of members with avatar initials, name, email, and a colored status pill (Pending / Accepted / Rejected)
Owner-only remove button per row (works for both members and pending invites)
Owner-only Invite dialog with debounced /user/search autocomplete — pick from suggestions or type a raw email; multiple invites at once via chip input

Analytics tab (owner only)

Stat cards: Total Downloads, Unique Users, Top Image
Top Images grid with thumbnails and per-image download counts
Paginated Download History table — who downloaded what, when

👤 Profile Page

Hero banner with avatar displaying user initials
View account info and upload statistics
Edit profile (first name, last name, gender)
Change password with real-time strength indicator
Quick-action grid: Edit Profile, Change Password, Upload, My Library, Share Groups

🌗 Dark / Light Mode

Toggle between dark and light themes from the navbar
Preference persisted in localStorage
Full design-token support for both modes

📱 Responsive Design

Mobile-friendly layout across all pages
Accessible UI components via shadcn/ui

Tech Stack

Layer	Technology
Framework	React 18 + TypeScript
Build Tool	Vite
Styling	Tailwind CSS
UI Components	shadcn/ui
Routing	React Router v6
HTTP Client	Axios
State	TanStack React Query
Notifications	Sonner
Icons	Lucide React
Backend	REST API on Render
Storage	Cloudinary

Getting Started

Prerequisites

Node.js v18+
npm or bun

Installation

git clone https://github.com/Ajay-Maury/Pixel-Vault.git
cd Pixel-Vault
npm install

Environment Variables

Create a .env file:

VITE_BASE_URL= <Backend Service URL>

Backend Service

The backend service for this application is available here: 👉 https://github.com/Ajay-Maury/Pixel-Vault-Backend

Refer to the backend repository's README for the full list of REST endpoints, request/response shapes, and authentication details. The frontend wraps every backend endpoint in src/lib/api.ts.

Running Locally

npm run dev

Open http://localhost:5173.

Project Structure

src/
├── components/
│   ├── ui/                  # shadcn/ui components
│   ├── ImageDetailModal.tsx # Adaptive image modal (fullscreen, edit, group-download mode)
│   ├── Navbar.tsx           # Global nav with Groups link + pending-invite badge
│   ├── NavLink.tsx
│   └── ThemeProvider.tsx    # Dark/light mode context
├── hooks/
│   ├── use-mobile.tsx
│   └── use-toast.ts
├── lib/
│   ├── api.ts               # Axios client + typed wrappers for every backend endpoint
│   ├── auth.ts              # Token + userId helpers
│   └── utils.ts
├── pages/
│   ├── Index.tsx            # Landing / home page
│   ├── Gallery.tsx          # Public gallery + My Library (with bulk actions)
│   ├── Groups.tsx           # Share Groups: Owned / Joined / Invites tabs
│   ├── GroupDetail.tsx      # Per-group Images / Members / Analytics tabs
│   ├── Login.tsx
│   ├── Register.tsx
│   ├── Upload.tsx           # Batch upload with progress, retry, reordering
│   ├── Profile.tsx          # Account hub w/ quick-action grid incl. Share Groups
│   └── NotFound.tsx
├── App.tsx                  # Routes (incl. /groups and /groups/:id under RequireAuth)
├── main.tsx
└── index.css                # Design tokens (light + dark)

Contributing

Contributions welcome! Open issues or pull requests for improvements. For major changes, discuss in an issue first.

License

MIT — see LICENSE for details.

Name		Name	Last commit message	Last commit date
.lovable		.lovable
public		public
src		src
supabase		supabase
.env.example		.env.example
.gitignore		.gitignore
README.md		README.md
bun.lock		bun.lock
bun.lockb		bun.lockb
components.json		components.json
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vercel.json		vercel.json
vite.config.ts		vite.config.ts
vitest.config.ts		vitest.config.ts

Navigation Menu

Repository files navigation

Pixel Vault

Live Demo

Features

🔐 Authentication

Login Page

Register Page

🖼️ Image Upload (Batch)

🎨 Gallery

🔍 Image Detail Modal (`src/components/ImageDetailModal.tsx`)

✏️ Image Management (Owner Only)

👥 Share Groups (`src/pages/Groups.tsx`)

🗂️ Group Detail (`src/pages/GroupDetail.tsx`)

👤 Profile Page

🌗 Dark / Light Mode

📱 Responsive Design

Tech Stack

Getting Started

Prerequisites

Installation

Environment Variables

Backend Service

Running Locally

Project Structure

Contributing

License

About

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

Pixel Vault

Live Demo

Features

🔐 Authentication

Login Page

Register Page

🖼️ Image Upload (Batch)

🎨 Gallery

🔍 Image Detail Modal (src/components/ImageDetailModal.tsx)

✏️ Image Management (Owner Only)

👥 Share Groups (src/pages/Groups.tsx)

🗂️ Group Detail (src/pages/GroupDetail.tsx)

👤 Profile Page

🌗 Dark / Light Mode

📱 Responsive Design

Tech Stack

Getting Started

Prerequisites

Installation

Environment Variables

Backend Service

Running Locally

Project Structure

Contributing

License

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

🔍 Image Detail Modal (`src/components/ImageDetailModal.tsx`)

👥 Share Groups (`src/pages/Groups.tsx`)

🗂️ Group Detail (`src/pages/GroupDetail.tsx`)