MA Vault
A personal image gallery app with authentication, social features, and optimized media performance.
Project Overview
MA Vault is a full-featured image gallery platform built with a focus on performance and accessibility. It includes secure Supabase authentication with email confirmation, optimized image handling with WebP and HEIC format conversion, and a responsive interface enhanced by Framer Motion animations. This is a personal project where I showcase my own images and allow users to upload theirs. Built to merge my photography and web development passions.
Tech Stack
- React
- TypeScript
- Tailwind CSS
- React Router
- React Query
- React Hot Toast
- Lucide Icons
- Supabase
- Day.js
- React Dropzone
- Framer Motion
- React Virtual
- heic2any
- React Error Boundary
Key Features
- Authentication & authorization with Supabase
- Supabase email authentication with confirmation flow
- Image upload, like, and comment system for authenticated users
- Views tracking system for all images
- Smart upload system supporting HEIC, PNG, JPEG, and JPG formats
- Client-side image optimization and WebP conversion for uploads
- Drag-and-drop image uploads with form validation
- Advanced data Caching with React Query
- Infinite scrolling using React Virtual with pagination for large galleries
- Image search, filtering, and sorting for fast content discovery
- User profile customization including personal info and profile picture
- Command palette with search and full-page navigation
- Responsive UI with smooth animations powered by Framer Motion
- Comprehensive error handling with toast notifications
- Dark mode support
- Accessibility-focused code
Challenges
Building a platform that handles many large images efficiently required implementing compression, optimized formats, and careful caching with React Query (especially for infinite scroll) as well as a good data base design. Integrating Supabase authentication with a smooth UX and ensuring fast performance across devices also presented unique challenges.
Outcome
Delivered a polished and responsive image gallery app that feels both personal and social with a seamless user experience across devices. Achieved up to 40% reduction in storage size by using webp image conversion and greatly improved load times through advanced media handling with React query + React Virtual.