Remix

Make your own version of Nisimg Image Hosting

Get an exact, working copy in your account, then change anything with chat.

Original by Nisu Damor

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.

Create a complete, professional, fully functional image hosting website named "Nisimg".

MAIN PURPOSE:
Users can upload images and instantly get a direct public image URL that displays the exact same original image without changing its appearance, dimensions, colors, or quality.

DESIGN:

- Modern, clean, professional interface.
- Mobile-first responsive design.
- White background with blue and purple accent colors.
- Simple dashboard with smooth animations.
- Large drag-and-drop image upload area.
- Beautiful image preview cards.
- Support mobile, tablet, and desktop screens.

CORE FEATURES:

1. IMAGE UPLOAD

- Allow users to upload JPG, JPEG, PNG, WEBP, GIF, and SVG files.
- Support drag-and-drop and file selection.
- Allow multiple image uploads.
- Show upload progress and error messages.
- Validate file types and file sizes.
- Preserve original image files without compression or conversion.
- Preserve animated GIF files and transparent PNG files.
- Never replace an uploaded image with a generated or modified version.

2. DIRECT IMAGE URL

- Generate a publicly accessible direct URL for each uploaded image.
- The URL must open the actual image file directly in a browser.
- Provide a one-click Copy URL button.
- Provide an Open Image button.
- Provide a Download Original button.
- Verify that the uploaded image URL works before displaying upload success.
- Do not generate fake URLs or temporary blob URLs as permanent links.

3. CLOUD STORAGE BACKEND

- Integrate Supabase Storage or another suitable image storage service.
- Configure a public image bucket for public image URLs.
- Upload original binary files without modifying their contents.
- Generate direct public URLs using the storage provider's official API.
- Handle upload errors and network failures gracefully.
- Use environment variables for sensitive configuration.
- Never expose secret API keys or service-role keys in frontend code.
- Provide setup instructions for creating the storage bucket and configuring credentials.

4. IMAGE DASHBOARD

- Display uploaded images in a responsive gallery.
- Show image previews, filenames, file sizes, and upload dates.
- Allow users to copy URLs, open images, download files, and delete images.
- Add search and sorting functionality.
- Store image metadata in a database.
- Provide pagination for large image collections.

5. USER ACCOUNTS

- Add optional user registration and login.
- Ensure each user can manage their own uploaded images.
- Apply appropriate database and storage security policies.
- Prevent users from deleting other users' private files.
- Make the public/private image access behavior clear.

6. ADMIN PANEL

- Provide an admin dashboard showing upload statistics and storage usage.
- Add image management tools.
- Restrict administrative actions to authorized administrators.
- Never grant admin privileges based only on frontend settings.

7. PERFORMANCE AND SECURITY

- Use a secure backend and proper access controls.
- Prevent unauthorized file uploads.
- Validate file types and sizes on the server.
- Handle SVG files safely to prevent script execution.
- Use rate limiting and abuse protection where appropriate.
- Make the interface accessible and easy to use.

8. HONEST FREE-TIER HANDLING

- Use the available free storage tier where possible.
- Show storage usage and any applicable upload limits.
- Do not advertise unlimited storage unless the backend genuinely supports it.
- Display a clear message when the storage quota is reached.
- Design the system so additional storage can be configured later.

IMPORTANT REQUIREMENTS:

- Build a working full-stack application, not just a static UI.
- Connect the frontend to real cloud storage.
- Make every upload, copy, preview, and delete button functional.
- Preserve the exact original uploaded file.
- Ensure direct image links remain valid while the stored file exists and is accessible.
- Do not use local browser storage as the permanent image hosting backend.
- Include all necessary source files, backend integration, environment variable examples, database schema, security policies, and deployment instructions.
- Fix build errors and verify the complete upload-to-direct-URL workflow.

Deliver a polished, production-oriented image hosting website with a simple user experience.

Start free with 40 credits. No card needed.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.