Pictura is a premium web image storage and personal gallery application built with Next.js 15, Tailwind CSS, and Supabase. Featuring a modern, shop-like interface with card-based design, smooth animations, and a dark theme with purple-cyan gradient accents.
- Card-based gallery with hover effects and scale animations
- Infinite scroll or pagination for large collections
- Smart filtering: All / Album / Favorites / Recent
- Search with debounce across titles, descriptions, and tags
- Sorting options: Newest, Oldest, A-Z, Size
- Drag & drop multiple image upload
- Progress bar with real-time feedback
- Form fields: Title, Description, Tags (multi-select), Album, Visibility
- Preview before upload
- Dark mode default with purple-blue gradient (#8B5CF6 → #22D3EE)
- Glassmorphism effects with subtle borders and soft shadows
- Responsive design (mobile-first, smooth on all devices)
- Loading skeletons with shimmer effects
- Empty state illustrations
- Typography: Inter + Space Grotesk
- Image detail modal with zoom, download, share, delete
- Albums/Collections like online shop folders
- Favorites system with dedicated page
- Profile & Settings (name, avatar, theme preferences)
- Toast notifications with Sonner
- Next.js 15 (App Router) + TypeScript
- Tailwind CSS + shadcn/ui + Tailwind Merge + clsx
- Zustand for state management
- Framer Motion for smooth animations
- Lucide React for icons
- Next-themes for dark/light mode
- Zod + React Hook Form for form validation
- Sonner for toast notifications
- Supabase (PostgreSQL database, authentication, storage)
- Supabase Storage for image hosting
- Row Level Security (RLS) for data protection
git clone https://github.com/setan21/pictura.git
cd pictura
npm installCreate .env.local file:
NEXT_PUBLIC_SUPABASE_URL=your-supabase-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
SUPABASE_SERVICE_KEY=your-supabase-service-key- Create a Supabase project at supabase.com
- Run the SQL from
schema.sqlin the Supabase SQL Editor - Enable Storage and create a
imagesbucket
npm run dev- Connect GitHub to Vercel
- Import repository
setan21/pictura - Add environment variables from
.env.example - Deploy with one click
NEXT_PUBLIC_SUPABASE_URLNEXT_PUBLIC_SUPABASE_ANON_KEYSUPABASE_SERVICE_KEY
pictura/
├── app/ # Next.js 15 App Router
│ ├── (auth)/ # Authentication pages
│ ├── (dashboard)/ # Main app pages
│ │ ├── gallery/ # Image gallery
│ │ ├── upload/ # Upload page
│ │ ├── albums/ # Album management
│ │ ├── favorites/ # Favorites page
│ │ └── settings/ # User settings
│ └── layout.tsx # Root layout
├── components/ # React components
│ ├── ui/ # shadcn/ui components
│ ├── gallery/ # Gallery components
│ ├── upload/ # Upload components
│ ├── modal/ # Modal components
│ └── layout/ # Layout components
├── lib/ # Utilities & stores
│ ├── supabase/ # Supabase client & types
│ └── store/ # Zustand stores
├── public/ # Static assets
└── styles/ # Global styles
- Primary:
#8B5CF6(Purple) - Secondary:
#22D3EE(Cyan) - Background: Dark gradient with glassmorphism
- Accent: Purple-cyan gradient
- Headings: Space Grotesk (--font-space-grotesk)
- Body: Inter (--font-inter)
- Card hover: Scale + shadow + gradient overlay
- Page transitions: Framer Motion
- Loading: Shimmer skeletons
MIT License - see LICENSE file for details.
Contributions are welcome! Please:
- Fork the repository
- Create a feature branch
- Submit a pull request with detailed description
For issues or questions:
- Open an Issue
- Check the Supabase documentation
Pictura - Your Personal Image Shop 🖼️✨