Remix

Make your own version of Loop Social Network

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

Original by Davor Jovanović

What would you change?

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.

LOOP V3 — COMPLETE SOCIAL NETWORK FROM SCRATCH

1. PROJECT OVERVIEW

Build Loop V3, a complete, modern, production-oriented social networking application from scratch. This is a brand-new project. There is no existing application, codebase, database, or configuration that needs to be preserved.

Do not build only a landing page, static prototype, or visual mockup. Build the complete application with a working frontend, backend, database, authentication, media storage, navigation, permissions, and real interactions.

Loop should combine the best general ideas from modern social networks: photo sharing, stories, short videos, messaging, profiles, discovery, live streaming, and personalized recommendations. Create an original design and identity instead of copying another platform's interface exactly.

The application must be optimized for Android phones, mobile browsers, tablets, and desktop computers.

Primary goals:

- A beautiful, recognizable social networking brand called Loop.
- A fully functional social experience.
- Reliable video uploads and automatic video playback.
- Stories, Shorts, regular posts, messaging, and notifications.
- An AI-assisted content discovery and publishing system.
- A secure owner-only Control Center.
- Fast loading, stable database operations, and properly handled errors.
- Serbian and English language support.

Do not claim a feature is functional until its underlying operations have been implemented and tested.

2. TECHNOLOGY AND PROJECT ARCHITECTURE

Choose a stable, maintainable technology stack supported by the development environment.

Use:

- A modern responsive frontend framework.
- A secure backend with server-side authorization.
- A relational database or another suitable persistent database.
- Secure authentication and session management.
- Object storage for images, videos, avatars, and story media.
- A reliable video playback and upload system.
- Background jobs or a scheduled task system for AI discovery and publishing.
- A push notification service where supported.
- Appropriate APIs for real-time messaging and calls.

Create a clear separation between the frontend, backend, database, storage, and background workers.

Use environment variables or a secrets manager for API keys. Never expose secret credentials in frontend code.

If the selected platform already provides authentication, database, and storage services, use those services instead of introducing unnecessary dependencies.

Do not invent integrations, credentials, successful API responses, or working external services that have not actually been configured.

3. BRAND IDENTITY AND VISUAL DESIGN

Create a distinctive visual identity for Loop.

Design requirements:

- Premium, modern, dark-first interface.
- Comfortable contrast and readable typography.
- Large, easy-to-tap buttons and navigation icons.
- Smooth transitions and lightweight animations.
- Rounded cards and polished media previews.
- A recognizable Loop logo and consistent branding.
- A clean interface that feels like a real social network rather than an AI dashboard.
- No unnecessary visual clutter or excessive bright colors.
- Responsive layouts that work on small Android screens.
- Consistent spacing, icon sizes, typography, and component behavior.

Create an original Loop logo that communicates connection, sharing, video, and community. Do not copy Instagram's logo or another company's branding.

Add light and dark themes if supported. Dark mode should be the default.

Create a short, polished startup animation with a logo reveal. Avoid long loading animations and never replay an unnecessary introduction on every navigation event.

4. NAVIGATION

Create a functional mobile navigation bar containing:

1. Home
2. Search / Discover
3. Create (+)
4. Shorts
5. Messages
6. Profile

Use a suitable responsive navigation layout on desktop.

The plus button must be visually prominent and immediately accessible.

All navigation items must open their correct screens. Prevent dead links, blank pages, incorrect routes, and menus that render outside the visible screen.

Preserve sensible scroll positions when navigating between sections.

5. REGISTRATION AND AUTHENTICATION

Implement complete authentication.

Features:

- Account registration.
- Login and logout.
- Password recovery.
- Username selection.
- Display name and profile setup.
- Profile-picture selection.
- Persistent sessions.
- Secure session expiration and logout.
- Duplicate username validation.
- Input validation and useful error messages.
- Appropriate redirects after successful authentication.

Protect private pages on the backend, not only through frontend navigation.

Ensure that refreshing a page does not unnecessarily log users out or produce a 404 error.

Users must not be able to gain administrator privileges by modifying their profile, local storage, URL, or browser requests.

6. USER PROFILES

Every user must have a real, persistent profile.

Profile features:

- Profile picture.
- Optional cover image.
- Username.
- Display name.
- Biography.
- Posts count.
- Followers count.
- Following count.
- Likes count.
- Posts grid.
- Video posts.
- Saved posts.
- Liked posts.
- Edit profile.
- Follow and unfollow.
- Public and private account settings.
- Verification badge when legitimately assigned.
- Profile sharing.

The saved and liked sections should be private to their owner by default.

Profile edits must be saved to the database and displayed consistently across the application.

Support image previews, cropping, upload progress, and recovery from failed uploads. If an avatar replacement fails, retain the previous image.

Private profiles must restrict content to approved followers, according to the configured privacy rules.

7. HOME FEED

Build a real feed containing posts from followed accounts and suitable recommended content.

Each post may include:

- Images.
- Videos.
- Caption.
- Creator profile.
- Timestamp.
- Likes.
- Comments.
- Sharing.
- Saving.
- Reposting.
- Follow button.
- Content reporting.

Implement pagination or cursor-based loading. Never fetch every post from the database in a single request.

Use loading indicators, empty states, and retry buttons where appropriate.

Avoid duplicate posts and duplicate database operations.

Provide a simple personalized recommendation system based on legitimate signals such as followed accounts, selected interests, and interactions. Do not claim advanced AI recommendations exist unless they are implemented.

8. SHORTS — FULLSCREEN SHORT-VIDEO FEED

Create a dedicated vertical short-video experience.

Requirements:

- Fullscreen or near-fullscreen video.
- Vertical scrolling between videos.
- Automatic playback when a video becomes visible.
- Automatic pausing when it leaves the viewport.
- Like, comment, share, save, and follow controls.
- Creator information and captions.
- Video progress indicator.
- Mute and unmute controls.
- Video loading indicators.
- Error recovery when playback fails.

Videos should start automatically when visible, using muted autoplay where browser policies require it. Users must be able to enable sound with a single tap.

Remember sound preferences where supported.

Avoid restarting playback unnecessarily or downloading multiple large videos simultaneously.

Optimize loading and caching so scrolling remains smooth on mobile devices.

9. PLUS BUTTON AND CREATION CAMERA

When the user taps the central plus button, immediately open the creation camera.

Do not show an unnecessary intermediate screen.

Provide a bottom mode selector with:

- Story
- Shorts
- Post

Include a gallery shortcut in the bottom-left corner.

Features:

- Take photos.
- Record videos.
- Select photos from the gallery.
- Select videos from the gallery.
- Preview media before publishing.
- Crop images.
- Trim videos where supported.
- Add captions.
- Add text and stickers.
- Apply available filters.
- Preview the final result.
- Upload progress.
- Cancel and retry failed uploads.

Request camera, microphone, and gallery permissions only when required. Handle denied permissions gracefully.

If the browser cannot provide a feature, offer an appropriate alternative.

Prevent the camera from closing unexpectedly during gallery selection or media uploads.

The publish button must save the actual media and post record. Show success only after the backend confirms the operation.

10. STORIES

Create a working Stories system.

Features:

- Stories from followed accounts.
- Story viewer.
- Photo and video stories.
- Story progress indicators.
- Automatic progression through a user's stories.
- Pause and resume.
- Story replies where enabled.
- Story reactions.
- Story privacy settings.
- Story expiration after 24 hours by default.
- Story ownership and deletion.
- Story view records visible to the story owner.

When users open story creation, launch the camera immediately and provide the bottom-left gallery shortcut.

Use real stored media and database records. Enforce privacy and expiration on the backend.

11. POSTS, COMMENTS, LIKES, SAVES, AND REPOSTS

Implement all interactions using persistent backend data.

- Like and unlike.
- Add comments.
- Edit or delete one's own comments where permitted.
- Save and unsave posts.
- Repost with attribution to the original creator.
- Follow and unfollow accounts.
- Share posts using supported sharing mechanisms.
- Report inappropriate content.
- Update counters accurately.

Prevent duplicate likes, follows, saves, comments, and reposts caused by repeated requests.

Use appropriate database constraints and authorization checks.

12. SEARCH AND DISCOVER

Create a functional discovery page.

Include:

- Search for usernames and display names.
- Search for videos and posts.
- Recommended creators.
- Trending or popular content based on actual available data.
- Suggested accounts.
- Content categories or interests.
- Search history with a clear option.
- Filters for supported content types.

Debounce search requests and use pagination.

Do not fabricate trending statistics or pretend content is popular without actual supporting data.

13. SUGGESTIONS — SMART CONTENT DISCOVERY

Create a dedicated Suggestions section that works with Loop AI.

The owner must be able to inspect:

- Newly discovered content.
- Pending suggestions.
- Approved content.
- Scheduled content.
- Published content.
- Rejected content.
- Duplicate content.
- Failed processing jobs.

Every suggestion should display available information:

- Title or proposed caption.
- Source.
- Thumbnail or preview.
- Discovery timestamp.
- Publication status.
- Relevant error information.

Provide working actions to approve, reject, edit, schedule, publish, retry, and remove suggestions.

When automatic mode is disabled, content must wait for approval. When enabled, only eligible content that passes the configured rules may be published automatically.

14. LOOP AI — AUTOMATED VIDEO DISCOVERY AND PUBLISHING

Build a real AI-assisted discovery and publishing backend.

The owner should be able to enter a supported source URL, such as an authorized website, feed, content API, or direct media URL.

The system must:

1. Validate the source URL.
2. Confirm that the source is supported and accessible.
3. Discover eligible content through authorized methods.
4. Extract available metadata and media references.
5. Check whether content is suitable for Loop.
6. Detect duplicates.
7. Add eligible items to Suggestions.
8. Optionally prepare captions.
9. Schedule or publish items according to the owner's settings.
10. Record the actual outcome in the publishing history.

Provide:

- Enable and disable automatic publishing.
- Start, pause, resume, and stop controls.
- Configurable publishing intervals.
- Maximum daily publication limits.
- Retry settings.
- Duplicate prevention.
- Source management.
- Processing status.
- Publishing logs.
- Failure notifications.
- Clear integration status.

When the owner pauses or stops the service, queued tasks must respect that change.

Use background jobs or a scheduler so processing does not depend on an open browser tab.

Do not rely on a frontend loop running continuously to publish content.

Do not treat a Google search page as a direct video file. Use supported search or content APIs, authorized feeds, licensed media sources, creator-authorized submissions, or direct media URLs when permitted.

Do not bypass authentication, access restrictions, or platform protections. Do not automatically download and republish copyrighted videos without permission.

If a source cannot be accessed or reused legally, show a clear error and suggest a supported alternative.

The system must never fabricate videos, successful uploads, or publication history.

15. AUTOMATED PUBLISHING SAFETY AND RELIABILITY

Implement:

- Stable source identifiers where available.
- Content hashing where appropriate.
- Idempotency keys for publishing jobs.
- Queue locking to prevent duplicate workers.
- Configurable rate limits.
- Bounded retries with exponential backoff and jitter.
- Job timeouts.
- Failure logs.
- Safe cancellation.
- Secure credential storage.
- Source validation and protection against requests to private network addresses or internal services.

Never allow arbitrary user-submitted URLs to become unrestricted server-side fetch requests.

Before publication, validate content type, media size, permissions, and destination requirements.

Report whether the content was actually uploaded and published, failed, or is still processing.

16. DIRECT MESSAGING

Build a real direct messaging system.

Features:

- Conversation list.
- One-to-one conversations.
- Message history.
- Text messages.
- Supported image attachments.
- Message timestamps.
- Unread indicators.
- Read status where supported.
- Conversation search.
- Message notifications.
- Blocking and reporting.
- Appropriate conversation privacy.

Use real-time delivery where the chosen backend supports it.

Store messages securely and ensure only authorized conversation participants can read them.

Do not expose private messages in public feeds or logs.

17. VOICE AND VIDEO CALLS

Provide voice and video calls if the selected platform supports the necessary infrastructure.

Use an appropriate real-time communication technology, such as WebRTC, with the required signaling and connectivity services.

Features:

- Incoming call screen.
- Accept and reject.
- Mute microphone.
- Enable or disable camera.
- End call.
- Connection status.
- Permission handling.
- Call notifications where supported.

Do not create fake call buttons that do nothing. If infrastructure is not configured, clearly indicate which service or credentials are needed.

18. NOTIFICATIONS

Implement an in-app notification center.

Notify users about relevant events such as:

- New messages.
- New followers.
- Likes.
- Comments.
- Mentions.
- Story replies.
- Relevant moderation actions.

Include:

- Read and unread states.
- Mark as read.
- Clear notification history where permitted.
- Notification preferences.
- Optional notification sounds.

Support browser or installed-app push notifications where the platform allows them.

For notifications on the lock screen or while the app is in the background, configure the required service worker, push provider, platform permissions, and delivery backend.

Ask for notification permission at an appropriate time, not repeatedly.

Never promise background notifications if they have not been configured and tested.

19. LIVE STREAMING

Add live streaming if supported by the available infrastructure.

Features:

- Start and end a stream.
- Live viewer interface.
- Stream title.
- Live status.
- Chat where supported.
- Basic reporting and moderation.
- Viewer count based on actual connections.

Use a suitable streaming service or supported media infrastructure.

If live streaming requires an external provider or paid infrastructure, explain the dependency and do not simulate real viewers.

20. OWNER-ONLY CONTROL CENTER

Create a private Control Center accessible only to the verified application owner.

Owner account email:

davorj227@gmail.com

The owner should have access to:

- Dashboard.
- User management.
- Content moderation.
- Verification management.
- Loop AI controls.
- Suggestions management.
- Publishing queue.
- Source management.
- Scheduling.
- System status.
- Error logs.
- Integration status.
- Moderation history.
- Basic operational statistics.

The Control Center must be accessible through a clearly organized settings or profile menu.

Only the authorized owner should see the owner navigation item.

However, hiding the menu is not sufficient security. Every privileged backend endpoint must independently verify the user's trusted role or owner authorization.

Assign the owner role through a secure server-side setup process. Do not trust a role value supplied by the browser or editable user profile.

If owner verification cannot be completed, fail securely and explain what configuration is missing.

21. USER MODERATION

Provide secure moderation tools for the owner.

Actions:

- Search user accounts.
- Inspect permitted account information.
- Ban accounts.
- Suspend accounts.
- Restore accounts.
- Remove violating posts.
- Add internal moderation notes.
- Review previous moderation actions.
- Grant or revoke Loop verification.

Every moderation action must record the actor, target, timestamp, reason, and result where appropriate.

Enforce bans and suspensions on the backend. Restricted users must not regain access simply by changing the URL or refreshing the application.

Blocking between users must also be enforced in profiles, messaging, and relevant interactions.

22. LOOP VERIFICATION

Implement a real verification system.

- Store verification status in the database.
- Display the badge consistently across profiles, posts, comments, and other relevant locations.
- Allow only authorized administrators to grant or revoke verification.
- Prevent ordinary users from changing their own verification status.
- Keep an audit history of verification changes.

Do not use a decorative badge that is disconnected from actual account permissions.

23. SERBIAN AND ENGLISH

Support Serbian and English throughout the entire application.

Translate:

- Navigation.
- Buttons.
- Settings.
- Notifications.
- Error messages.
- Authentication screens.
- Camera controls.
- Messaging.
- AI controls.
- Suggestions.
- Admin panel.
- Empty states and loading messages.

Allow users to switch languages from settings and persist their choice.

Ensure that newly added features use the selected language consistently.

24. PRIVACY, SECURITY, AND CONTENT RULES

Implement secure permissions and responsible content handling.

- Protect private profiles.
- Restrict access to private messages.
- Validate user input on the backend.
- Enforce authorization for every protected operation.
- Protect secrets and tokens.
- Validate uploads.
- Add rate limits to sensitive endpoints.
- Protect against duplicate submissions and abusive requests.
- Provide reporting and blocking tools.
- Support deletion of user content where appropriate.
- Define a reasonable content moderation process.
- Avoid logging passwords, secret tokens, or private message contents.

The application must not expose private user data through public APIs, predictable IDs, or incorrectly configured database policies.

25. PERFORMANCE AND ERROR HANDLING

The application must remain responsive under normal use.

Use:

- Pagination and cursor-based queries.
- Database indexes.
- Request deduplication.
- Caching where appropriate.
- Debounced search.
- Optimized media loading.
- Appropriate image sizes.
- Lazy loading.
- Efficient video preloading.
- Controlled background jobs.
- Useful loading, empty, and error states.

Do not fetch entire tables on every render.

Avoid repeated polling, duplicate effects, and unlimited retries.

When a rate limit is reached:
Stop unnecessary requests.
Respect server retry instructions.
Apply exponential backoff with jitter.
Reuse valid cached data where appropriate.
Avoid triggering a request storm.
When a service returns HTTP 402 or another error, inspect the actual response and identify the likely cause, such as billing, exhausted credits, permissions, or unavailable services.
Never disguise failed requests as successful operations.
26. TESTING REQUIREMENTS
After implementing the application, test the actual workflows.
Test:
Registration, login, logout, and session persistence.
Profile setup and profile-picture uploads.
Home feed and profile navigation.
Camera opening from the plus button.
Gallery selection.
Story, Shorts, and Post mode switching.
Real image and video uploads.
Video playback, scrolling, and sound controls.
Likes, comments, follows, saves, and reposts.
Search and Suggestions.
Direct messaging and unread status.
Notification permissions and supported delivery.
Private profile restrictions.
Owner authorization and Control Center security.
Moderation and verification.
AI source validation and content discovery.
Automatic publishing, scheduling, pausing, and stopping.
Duplicate prevention and failed-job recovery.
Rate-limit handling.
Serbian and English switching.
Mobile layout and desktop responsiveness.
Page refreshes, navigation, and error recovery.
Fix any bugs discovered during testing before declaring the work complete.
Do not mark a test as passed unless it has actually been performed.
27. IMPLEMENTATION ORDER
Build the application in the following order:
Phase 1: Project setup, design system, routing, database, and authentication.
Phase 2: Profiles, feed, posts, media storage, likes, comments, follows, and privacy.
Phase 3: Camera, gallery, stories, Shorts, and video playback.
Phase 4: Search, Suggestions, direct messaging, and notifications.
Phase 5: Secure owner authorization, Control Center, moderation, and verification.
Phase 6: Loop AI discovery, background jobs, scheduling, and publishing integrations.
Phase 7: Performance optimization, error handling, accessibility, localization, and testing.
Implement these phases within the same project. Do not stop after producing a landing page or the first visual screen.
If the development environment has task or context limits, complete the architecture and core functionality first, then continue in clearly defined implementation stages without discarding working code.
28. FINAL ACCEPTANCE CRITERIA
Loop V3 is ready for further deployment only when:
The core application runs.
Users can register and log in.
Profiles and posts use persistent data.
Image and video uploads work.
The feed and Shorts function correctly.
Stories and the creation camera work on supported devices.
Messaging works with actual stored messages.
Private profiles and access permissions are enforced.
The owner-only Control Center is secured on the backend.
Suggestions and AI jobs have real, observable statuses.
Automatic publishing works through a configured and authorized integration.
Errors are handled without false success messages.
The interface works on mobile and desktop.
Serbian and English are available.
Critical tests have been performed.
At completion, provide a concise implementation report listing:
Features implemented.
Features tested and their actual results.
Remaining bugs.
Missing credentials or external integrations.
Hosting and deployment requirements.
Any services that may incur additional costs.
Final instruction: Build Loop V3 as a complete, original social network from scratch. Prioritize working functionality, secure backend operations, polished mobile design, and reliable video handling over decorative screens or claims that features work when they do not.

Start fresh from this prompt

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