Remix

Make your own version of INKLY Article Feed

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

Original by Sher Ali

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.

Build viral social article app named INKLY - Like TikTok but for Articles. Only Text Articles, No Audio/Video. Tagline: Write. Scroll. Viral.

FINAL REQUIREMENTS - MUST INCLUDE ALL:

1. APP CONCEPT:
TikTok style vertical scroll feed for articles. Each article is a beautiful designed page template, not plain text. Users write/paste, select category + template, add optional one image, customize colors. Name INKLY everywhere.

2. CATEGORIES (11 Total):
story, news, poetry, poem, novel, education, support, sad, funny, happy, ISLAMIC
- User MUST select category BEFORE writing
- Islamic category respectful designs
- Each category has icon and color

3. THEME SYSTEM - NEW:
- Full Dark Theme and Light Theme support with toggle in Settings/Profile
- Dark Theme: Background Black #0A0A0A or #000000, Text White #FFFFFF, Cards #1A1A1A
- Light Theme: Background White #FFFFFF, Text Black #000000, Cards #F5F5F5
- Main UI Accent Color: Orange Heart Color 🧡 #FF6B35 / #FF8C42 - Use this for ALL buttons, hearts, likes, + button, highlights, links, active states
- User can switch Dark/Light anytime from Settings - Save preference in localStorage + Firestore user doc
- App interface same orange heart UI everywhere

4. ARTICLE CREATION FLOW (Compulsory):
Step 1: Select Category (11 options including Islamic)
Step 2: Enter Title + Short Description
Step 3: Select Page Template (10 templates per category = 110 total)
Step 4: Write Article (Type inside app OR Paste)
Step 5: Optional ONE Image Upload (max 1 image, optional)
Step 6: Customize - Page Color picker, Text Color picker, Font Size (Small/Medium/Large), Font Style (3 options: Elegant Serif, Minimal Sans, Bold)
Step 7: Privacy Setting: Public or Private (NEW - Private means only followers can see article)
Step 8: Preview and Submit

5. TEMPLATES SYSTEM - 110 Total:
Story (10): Colorful Kids, Horror Dark, Minimal White, Fantasy, Adventure, Cute, Elegant, Mystery, Jungle, Space
News (10): Professional Newspaper, Breaking News Red, Modern News, Old Newspaper, Magazine, Minimal News, etc.
Poetry/Poem (10): Calligraphy, Minimal, Sad Love, Romantic, etc.
Novel (10): Book Page, Old Paper, Typewriter, etc.
Education (10): Notebook Ruled, Blackboard, Clean Minimal, etc.
Support/Sad/Funny/Happy (10 each): Matching mood colors

ISLAMIC - 10 SPECIAL TEMPLATES - Respectful:
1. Noor: White + gold Islamic border, Bismillah top small
2. Masjid: Cream with Masjid silhouette bottom
3. Quran: Quran page style Arabic border, cream texture, Ayah styling
4. Ramadan: Dark blue with golden crescent moon stars
5. Hadith: Islamic geometric border, beige, Hadith reference style
6. Dua: Minimal white with dua hands icon bottom
7. Calligraphy: Arabic watermark SubhanAllah Alhamdulillah very light opacity
8. Madina: Green dome Masjid Nabawi subtle, light green theme
9. Minimal Islamic: Clean white with Bismillah Arabic top
10. Tasbih: Tasbih beads border side
Colors Green #0A5C36, Gold, White, Cream, Black only. Support RTL Arabic/Urdu. No music icons.

6. IMAGE LOGIC - ONE Image Optional:
- Only 1 image per article, optional, if no image show only text
- News: Right side small professional like newspaper, text wraps, also small bottom
- Story: Thumbnail at END of story
- Poetry/Poem: Bottom center small
- Novel/Education: Top header banner small
- Islamic: TOP respectful header OR bottom small - NEVER overlapping Quranic text, separate margin
- Gallery BG Option: User can select image from phone gallery as Page Background Theme - 15% opacity BG behind text, readable with overlay
- Placement always professional size at BOTTOM area

7. PAGE DESIGN LOGIC:
- Auto heading: Title always top center big bold 24px+
- Body: Full article below heading
- Color pickers, 3 fonts
- If article long: Show "Tap to read full" - On tap expands and scrolls smoothly inside same template
- Only Text No Audio Video
- Islamic: Bismillah toggle at top, reference (Quran Ayah/Hadith) small italic bottom

8. FEED - TIKTOK VIRAL:
- Vertical swipe feed like TikTok, each swipe next article page
- Each page: Template design, Title top, Body, Author name, Category tag, Right side: Like (orange heart 🧡), Comment, Share, Save like TikTok UI
- Like: Orange heart animation + count
- Comment: Bottom sheet with reply
- Share: Share with Unique Link - Generate unique link for EVERY article: inkly.app/article/{articleId} - Copy link, WhatsApp, Instagram, Direct share
- Save: Save to collection
- Top category filter chips: All, Story, News, Poetry, Islamic etc. Islamic prominent
- Trending: Most liked today, Most saved week

9. SOCIAL FEATURES:
- Like, Comment, Save, Share with unique link
- Follow/Unfollow users
- Notifications: likes, comments, follows, new article from followed
- Search by title, category, user, hashtag
- Hashtags in description

10. PROFILE & SETTINGS - NEW - EDIT ANYTIME:
- User Profile: Profile Pic (editable anytime), Name/Username (editable anytime), Bio (editable anytime)
- Edit Profile button - Can change pic, name, bio whenever user wants - Update in Firebase Auth + Firestore
- My Articles grid 4 columns, Liked, Saved
- Article Management: For each own article - Options: Edit, Delete (permanent delete), Make Private/Public (NEW)
- Private Logic: If article is Private, only followers of author can see it in feed, others get "This article is private" - Public means everyone
- Settings Page: Dark/Light Theme toggle switch (NEW), Language, Logout, Delete Account, Notifications toggle
- Theme toggle instantly changes whole app UI - dark black, light white, orange accents always

11. UI/UX - INKLY BRAND - ORANGE THEME:
- App Icon: Minimal ink drop with orange dot - Black bg white drop orange 🧡 dot
- Colors: Dark #000000 black, Light #FFFFFF white, Accent Orange Heart #FF6B35 #FF8C42 for ALL UI - buttons, hearts, + button, links, active tab
- Bottom Nav: Home, Search, + (Big orange 🧡 button for Write), Notifications, Profile - Orange active state
- Glassmorphism cards
- PWA Mobile first Responsive Fast
- Orange heart like button everywhere

12. DATABASE & TECH:
- Firebase Auth Google Email
- Firestore: users (id, username, displayName, bio, profilePicUrl, themePreference: dark/light, followers, following), articles (id, userId, title, description, category, templateId, pageColor, textColor, bodyText, imageUrl optional one, bgThemeUrl optional, privacy: public/private, likesCount, commentsCount, savesCount, uniqueLink: inkly.app/article/id, createdAt, isIslamic boolean), likes, comments, follows, saves
- Storage for images
- Dynamic Links for unique article links - Each article has separate shareable link

13. MODERATION:
- Report article/user
- Auto filter bad words
- Islamic respectful only

14. LINKS - NEW:
- Every article auto generates unique link: https://inkly.app/article/{articleId}
- When user clicks Share, copy this unique link
- Link opens article directly in beautiful template even if not logged in (public articles) - For private, show login to follow

Build full functional app with all 110 templates CSS. Make Islamic templates most beautiful respectful. Ensure single image optional, auto placement, scroll if long, no audio video, dark/light theme toggle black/white with orange heart UI, profile pic name editable anytime, article delete/private (followers only), each article unique link share. Name INKLY everywhere with orange theme.UPDATE TASK for existing app "Inkly":

My app Inkly is already built. The current home feed shows full articles in a vertical TikTok-style PageView scroll. I want to CHANGE ONLY the feed UI.

DO THIS:

1. In Firestore Article model, ensure there is a field `thumbnailUrl` (String). If not, add it.

2. On Create Article Screen: At the end of the form, after article content, add a REQUIRED step "Select Thumbnail Image". Use image_picker to pick from gallery, upload to Firebase Storage, and save its URL to `thumbnailUrl` when publishing.

3. On Home Feed Screen: REMOVE the current full-article PageView scroll. REPLACE it with a 2-column Staggered Grid (StaggeredGridView or GridView.builder with SliverGridDelegateWithFixedCrossAxisCount crossAxisCount: 2).

Each grid item must be a Card widget (rounded 15px) showing ONLY:
   - thumbnailUrl image (top, cover)
   - title (max 2 lines)
   - author name + like count (bottom row)
   Do NOT show full article text in feed.

4. On Card Tap: Keep existing navigation logic as it is. Open the existing Full Article Detail screen with Like, Comment, Save features. Don't change detail screen logic.

Keep all other logic (like, comment, profile, auth) exactly same. Only update feed from full-scroll to thumbnail cards.

Start fresh from this prompt

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