A modern web application for managing and displaying a beautiful photo gallery with tagging and categorization features.
- Photo management with title, description, and image upload
- Tag and category organization
- Responsive gallery view
- Presentation mode for slideshows
- Admin dashboard for content management
- Secure authentication system
- Cloudinary integration for image hosting
- You're a pimp to your partner
- You're bored || you're being caught cheating
- You're a programmer
- Node.js (v16 or higher)
- npm or yarn
- Supabase account for database and authentication
- Cloudinary account for image hosting
- Clone the repository:
git clone [repository-url]
cd gallery-love-story- Install dependencies:
npm install- Create a
.envfile in the root directory with the following variables:
VITE_SUPABASE_ANON_KEY=
VITE_SUPABASE_URL=
VITE_CLOUDINARY_CLOUD_NAME=
VITE_CLOUDINARY_API_KEY=
VITE_CLOUDINARY_API_SECRET=
VITE_CLOUDINARY_RESSOURCE_NAME=or just cp the .env.❤️ file
-
Set up the database:
- Create a new Supabase project
- Run the migration script in
supabase/migrations
-
Configure Cloudinary:
- Create a Cloudinary account
- Set up an upload preset named 'love-story'
- Configure the folder path as needed
Start the development server:
npm run devThe application will be available at http://localhost:5173
Build the application:
npm run buildPreview the production build:
npm run preview- Navigate to
/admin/login - Log in with your Supabase user credentials
- Use the admin dashboard to:
- Upload and manage photos
- Create and edit categories
- Manage tags
- Browse photos on the main page
- Filter by tags and categories
- View photo details
- Start presentation mode
- React with TypeScript
- Vite for build tooling
- Tailwind CSS for styling
- Supabase for backend and authentication
- Cloudinary for image hosting
MIT