dostum bana post tekrarlamayan veya benzer postları tek tek göstermeyen ve kullanıcı etkileşimine bağlı olarak dinamik akış değiştiren kişiye özel akışı olan instagram benzeri bir sosyal medya uygulaması kodlar mısın?

README.md

@@ -1,10 +1,13 @@
 ---
-title: Flowflex Personalized Social Stream
-emoji: 🏢
-colorFrom: green
-colorTo: gray
+title: FlowFlex - Personalized Social Stream 🌊
+colorFrom: yellow
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,98 @@
+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                    margin-top: auto;
+                }
+                footer {
+                    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+                    border-top: 1px solid #e2e8f0;
+                }
+                .footer-link {
+                    transition: color 0.2s ease;
+                }
+                .footer-link:hover {
+                    color: #0ea5e9;
+                }
+            </style>
+            <footer class="bg-gray-50 border-t border-gray-200 mt-12">
+                <div class="container mx-auto px-4 py-8">
+                    <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                        <!-- Company Info -->
+                        <div class="col-span-1">
+                            <div class="flex items-center space-x-2 mb-4">
+                                <div class="w-6 h-6 bg-gradient-to-r from-primary-500 to-secondary-500 rounded flex items-center justify-center">
+                                <i data-feather="zap" class="w-3 h-3 text-white"></i>
+                            </div>
+                            <span class="text-lg font-bold text-gray-900">FlowFlex</span>
+                            <p class="text-gray-600 text-sm mt-2">Your personalized social stream without the repetition.</p>
+                        </div>
+
+                        <!-- Quick Links -->
+                        <div>
+                            <h4 class="font-semibold text-gray-900 mb-4">Quick Links</h4>
+                            <ul class="space-y-2">
+                                <li><a href="/about" class="footer-link text-gray-600 text-sm hover:text-primary-500">About</a></li>
+                                <li><a href="/careers" class="footer-link text-gray-600 text-sm hover:text-primary-500">Careers</a></li>
+                                <li><a href="/press" class="footer-link text-gray-600 text-sm hover:text-primary-500">Press</a></li>
+                                <li><a href="/blog" class="footer-link text-gray-600 text-sm hover:text-primary-500">Blog</a></li>
+                                <li><a href="/help" class="footer-link text-gray-600 text-sm hover:text-primary-500">Help</a></li>
+                            </ul>
+                        </div>
+
+                        <!-- Legal -->
+                        <div>
+                            <h4 class="font-semibold text-gray-900 mb-4">Legal</h4>
+                            <ul class="space-y-2">
+                                <li><a href="/privacy" class="footer-link text-gray-600 text-sm hover:text-primary-500">Privacy</a></li>
+                                <li><a href="/terms" class="footer-link text-gray-600 text-sm hover:text-primary-500">Terms</a></li>
+                                <li><a href="/cookies" class="footer-link text-gray-600 text-sm hover:text-primary-500">Cookies</a></li>
+                                <li><a href="/safety" class="footer-link text-gray-600 text-sm hover:text-primary-500">Safety</a></li>
+                                <li><a href="/guidelines" class="footer-link text-gray-600 text-sm hover:text-primary-500">Guidelines</a></li>
+                            </ul>
+                        </div>
+
+                        <!-- Social -->
+                        <div>
+                            <h4 class="font-semibold text-gray-900 mb-4">Connect</h4>
+                            <div class="flex space-x-4">
+                                <a href="#" class="footer-link text-gray-600 hover:text-primary-500">
+                                    <i data-feather="twitter" class="w-5 h-5"></i>
+                                </a>
+                                <a href="#" class="footer-link text-gray-600 hover:text-primary-500">
+                                    <i data-feather="instagram" class="w-5 h-5"></i>
+                                </a>
+                                <a href="#" class="footer-link text-gray-600 hover:text-primary-500">
+                                    <i data-feather="facebook" class="w-5 h-5"></i>
+                                </a>
+                                <a href="#" class="footer-link text-gray-600 hover:text-primary-500">
+                                    <i data-feather="github" class="w-5 h-5"></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Bottom Section -->
+                    <div class="border-t border-gray-200 mt-8 pt-6">
+                        <div class="flex flex-col md:flex-row justify-between items-center">
+                            <p class="text-gray-500 text-sm">&copy; 2024 FlowFlex. All rights reserved.</p>
+                        </div>
+                    </div>
+                </div>
+            </footer>
+        `;
+        
+        // Initialize Feather Icons for shadow DOM
+        setTimeout(() => {
+            if (this.shadowRoot.querySelector('[data-feather]')) {
+                feather.replace({}, this.shadowRoot);
+            }
+        }, 100);
+    }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,96 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                    position: sticky;
+                    top: 0;
+                    z-index: 40;
+                }
+                nav {
+                    background: rgba(255, 255, 255, 0.95);
+                    backdrop-filter: blur(8px);
+                    border-bottom: 1px solid #e5e7eb;
+                }
+                .nav-link {
+                    transition: all 0.2s ease;
+                }
+                .nav-link:hover {
+                    color: #0ea5e9;
+                }
+                .search-input:focus {
+                    outline: none;
+                    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2);
+                }
+                @media (max-width: 768px) {
+                    .nav-items {
+                        display: none;
+                    }
+                    .mobile-menu {
+                        display: block;
+                    }
+                }
+            </style>
+            <nav class="bg-white/95 backdrop-blur-sm border-b border-gray-200">
+                <div class="container mx-auto px-4 py-3">
+                    <div class="flex items-center justify-between">
+                        <!-- Logo -->
+                        <a href="/" class="flex items-center space-x-2">
+                            <div class="w-8 h-8 bg-gradient-to-r from-primary-500 to-secondary-500 rounded-lg flex items-center justify-center">
+                            <i data-feather="zap" class="w-4 h-4 text-white"></i>
+                        </div>
+                        <span class="text-xl font-bold text-gray-900">FlowFlex</span>
+                        </a>
+
+                        <!-- Search Bar -->
+                        <div class="flex-1 max-w-md mx-8">
+                            <div class="relative">
+                                <input type="text" 
+                                    placeholder="Search posts, people, tags..." 
+                                    class="search-input w-full px-4 py-2 bg-gray-100 rounded-full text-sm focus:bg-white focus:ring-2 focus:ring-primary-200 transition-all duration-200">
+                                <i data-feather="search" class="absolute right-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400">
+                            </div>
+                        </div>
+
+                        <!-- Navigation Items -->
+                        <div class="nav-items flex items-center space-x-6">
+                            <a href="/" class="nav-link flex flex-col items-center text-primary-500">
+                                <i data-feather="home" class="w-5 h-5"></i>
+                            </a>
+                            <a href="/discover" class="nav-link flex flex-col items-center text-gray-600 hover:text-primary-500">
+                                <i data-feather="compass" class="w-5 h-5"></i>
+                        </a>
+                        <a href="/messages" class="nav-link flex flex-col items-center text-gray-600 hover:text-primary-500">
+                                <i data-feather="message-square" class="w-5 h-5"></i>
+                            </a>
+                            <a href="/notifications" class="nav-link flex flex-col items-center text-gray-600 hover:text-primary-500">
+                                <i data-feather="bell" class="w-5 h-5"></i>
+                            </a>
+                            <a href="/profile" class="flex items-center space-x-2">
+                                <img src="http://static.photos/people/32x32/1" alt="Profile" class="w-8 h-8 rounded-full border-2 border-primary-500">
+                            </a>
+                        </div>
+
+                        <!-- Mobile Menu Button -->
+                        <button class="mobile-menu hidden md:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors duration-200">
+                                <i data-feather="menu" class="w-5 h-5 text-gray-600"></i>
+                            </button>
+                        </div>
+                    </div>
+                </nav>
+            `;
+            
+            // Initialize Feather Icons for shadow DOM
+            setTimeout(() => {
+                if (this.shadowRoot.querySelector('[data-feather]')) {
+                    feather.replace({}, this.shadowRoot);
+                }
+            }, 100);
+        }
+    }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,116 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FlowFlex - Your Personalized Social Stream</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        },
+                        secondary: {
+                            50: '#fdf4ff',
+                            100: '#fae8ff',
+                            200: '#f5d0fe',
+                            300: '#f0abfc',
+                            400: '#e879f9',
+                            500: '#d946ef',
+                            600: '#c026d3',
+                            700: '#a21caf',
+                            800: '#86198f',
+                            900: '#701a75',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-6 max-w-6xl">
+        <!-- Feed Filter Controls -->
+        <div class="mb-6 bg-white rounded-xl shadow-sm p-4">
+            <div class="flex flex-wrap gap-4 items-center justify-between">
+                <h2 class="text-xl font-semibold text-gray-800">Your Personalized Feed</h2>
+                <div class="flex flex-wrap gap-2">
+                    <button class="feed-filter-btn active px-4 py-2 rounded-full bg-primary-500 text-white text-sm font-medium transition-all duration-200 hover:bg-primary-600" data-filter="trending">
+                        <i data-feather="trending-up" class="w-4 h-4 mr-2"></i>
+                        Trending
+                    </button>
+                    <button class="feed-filter-btn px-4 py-2 rounded-full bg-gray-200 text-gray-700 text-sm font-medium transition-all duration-200 hover:bg-gray-300" data-filter="following">
+                        <i data-feather="users" class="w-4 h-4 mr-2"></i>
+                        Following
+                    </button>
+                    <button class="feed-filter-btn px-4 py-2 rounded-full bg-gray-200 text-gray-700 text-sm font-medium transition-all duration-200 hover:bg-gray-300" data-filter="discover">
+                        <i data-feather="compass" class="w-4 h-4 mr-2"></i>
+                        Discover
+                    </button>
+                    <button class="feed-filter-btn px-4 py-2 rounded-full bg-gray-200 text-gray-700 text-sm font-medium transition-all duration-200 hover:bg-gray-300" data-filter="personalized">
+                        <i data-feather="sparkles" class="w-4 h-4 mr-2"></i>
+                        For You
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Feed Content -->
+        <div id="feed-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <!-- Posts will be dynamically loaded here -->
+        </div>
+
+        <!-- Loading State -->
+        <div id="loading" class="text-center py-8">
+            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-500 mx-auto"></div>
+            <p class="text-gray-600 mt-2">Loading your personalized feed...</p>
+        </div>
+
+        <!-- Empty State -->
+        <div id="empty-state" class="hidden text-center py-12">
+            <div class="max-w-md mx-auto">
+                <i data-feather="inbox" class="w-16 h-16 text-gray-400 mx-auto mb-4"></i>
+                <h3 class="text-lg font-medium text-gray-900 mb-2">No posts yet</h3>
+                <p class="text-gray-600 mb-6">Start following people or explore trending content to see posts here.</p>
+                <a href="/discover" class="inline-flex items-center px-6 py-3 bg-primary-500 text-white rounded-lg hover:bg-primary-600 transition-colors duration-200">
+                    <i data-feather="compass" class="w-4 h-4 mr-2"></i>
+                    Explore Content
+                </a>
+            </div>
+        </div>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <!-- Web Components -->
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    
+    <!-- Main Script -->
+    <script src="script.js"></script>
+    
+    <!-- Initialize Feather Icons -->
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,366 @@
+// FlowFlex - Main JavaScript
+class FlowFlexApp {
+    constructor() {
+        this.currentFeed = 'trending';
+        this.posts = [];
+        this.seenPosts = new Set();
+        this.userPreferences = this.getUserPreferences();
+        this.isLoading = false;
+        this.page = 1;
+        
+        this.init();
+    }
+
+    init() {
+        this.bindEvents();
+        this.loadInitialFeed();
+        this.setupIntersectionObserver();
+    }
+
+    bindEvents() {
+        // Feed filter buttons
+        document.querySelectorAll('.feed-filter-btn').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                this.switchFeed(e.target.closest('.feed-filter-btn').dataset.filter);
+            });
+        });
+
+        // Like button functionality
+        document.addEventListener('click', (e) => {
+            if (e.target.closest('.like-btn')) {
+                this.handleLike(e.target.closest('.like-btn'));
+            }
+        });
+
+        // Save post functionality
+        document.addEventListener('click', (e) => {
+            if (e.target.closest('.save-btn')) {
+                this.handleSave(e.target.closest('.save-btn'));
+            }
+        });
+
+        // Post interaction tracking
+        document.addEventListener('click', (e) => {
+            const postCard = e.target.closest('.post-card');
+            if (postCard) {
+                this.trackPostInteraction(postCard.dataset.postId);
+            }
+        });
+    }
+
+    switchFeed(feedType) {
+        // Update active button
+        document.querySelectorAll('.feed-filter-btn').forEach(btn => {
+            btn.classList.remove('active', 'bg-primary-500', 'text-white');
+            btn.classList.add('bg-gray-200', 'text-gray-700');
+        });
+
+        const activeBtn = document.querySelector(`[data-filter="${feedType}"]`);
+        activeBtn.classList.remove('bg-gray-200', 'text-gray-700');
+        activeBtn.classList.add('active', 'bg-primary-500', 'text-white');
+
+        this.currentFeed = feedType;
+        this.page = 1;
+        this.posts = [];
+        this.loadFeed();
+    }
+
+    async loadInitialFeed() {
+        await this.loadFeed();
+    }
+
+    async loadFeed() {
+        if (this.isLoading) return;
+
+        this.isLoading = true;
+        this.showLoading();
+
+        try {
+            // Simulate API call with timeout
+            await new Promise(resolve => setTimeout(resolve, 1000));
+            
+            const newPosts = await this.fetchPosts(this.currentFeed, this.page);
+            const filteredPosts = this.filterDuplicatePosts(newPosts);
+            
+            if (filteredPosts.length > 0) {
+                this.posts = [...this.posts, ...filteredPosts];
+                this.renderPosts(filteredPosts);
+                this.page++;
+            } else {
+                this.showEmptyState();
+            }
+        } catch (error) {
+            console.error('Error loading feed:', error);
+            this.showError('Failed to load posts. Please try again.');
+        } finally {
+            this.isLoading = false;
+            this.hideLoading();
+        }
+    }
+
+    async fetchPosts(feedType, page = 1) {
+        // Using Unsplash API for demo posts (real implementation would use your backend)
+        const accessKey = 'YOUR_UNSPLASH_ACCESS_KEY'; // Replace with actual key
+        const endpoints = {
+            trending: `https://api.unsplash.com/photos?page=${page}&per_page=9&order_by=popular`,
+            following: `https://api.unsplash.com/photos?page=${page}&per_page=9&order_by=latest`,
+            discover: `https://api.unsplash.com/photos/random?count=9`,
+            personalized: `https://api.unsplash.com/photos?page=${page}&per_page=9`
+        };
+
+        // For demo purposes, we'll use mock data
+        return this.generateMockPosts(9);
+    }
+
+    generateMockPosts(count) {
+        const categories = ['nature', 'technology', 'travel', 'food', 'architecture', 'people'];
+        const users = [
+            { name: 'Alex Johnson', username: 'alexj', followers: 1243 },
+            { name: 'Sarah Miller', username: 'sarahm', followers: 856 },
+            { name: 'Mike Chen', username: 'mikec', followers: 2107 },
+            { name: 'Emma Davis', username: 'emmad', followers: 932 },
+            { name: 'James Wilson', username: 'jamesw', followers: 1541 }
+        ];
+
+        return Array.from({ length: count }, (_, i) => {
+            const user = users[Math.floor(Math.random() * users.length)];
+            const category = categories[Math.floor(Math.random() * categories.length)];
+            const postId = `post_${Date.now()}_${i}`;
+            
+            return {
+                id: postId,
+                user: user,
+                image: `http://static.photos/${category}/640x360/${i + 1}`,
+                caption: this.generateMockCaption(category),
+                likes: Math.floor(Math.random() * 1000),
+                comments: Math.floor(Math.random() * 50),
+                shares: Math.floor(Math.random() * 20),
+                timestamp: new Date(Date.now() - Math.random() * 7 * 24 * 60 * 60 * 1000), // Within last 7 days
+                category: category,
+                engagement: Math.random() * 100
+            };
+        });
+    }
+
+    generateMockCaption(category) {
+        const captions = {
+            nature: ['Beautiful sunset at the beach! 🌅', 'Morning hike in the mountains 🏔️', 'Peaceful forest walk 🌲'],
+            technology: ['Working on some exciting new projects! 💻', 'Tech conference was amazing! 🚀', 'Latest gadget unboxing 📱'],
+            travel: ['Exploring new places! ✈️', 'Cultural experience of a lifetime 🌍', 'Travel dreams coming true 🗺️'],
+            food: ['Delicious homemade meal! 🍽️', 'Food photography session 📸', 'Trying out new recipes 👨‍🍳'],
+            architecture: ['Modern architecture never fails to impress! 🏛️', 'Historical building tour 🏰', 'Architectural marvels 🏗️'],
+            people: ['Great time with friends! 👥', 'Community event was fantastic! 🎉', 'Networking and making connections 🤝']
+        };
+
+        const categoryCaptions = captions[category] || ['Great day! 😊'];
+        return categoryCaptions[Math.floor(Math.random() * categoryCaptions.length)];
+    }
+
+    filterDuplicatePosts(newPosts) {
+        return newPosts.filter(post => !this.seenPosts.has(post.id));
+    }
+
+    renderPosts(posts) {
+        const feedContainer = document.getElementById('feed-container');
+        const emptyState = document.getElementById('empty-state');
+        
+        if (posts.length === 0 && this.posts.length === 0) {
+            this.showEmptyState();
+            return;
+        }
+
+        emptyState.classList.add('hidden');
+        
+        posts.forEach(post => {
+            this.seenPosts.add(post.id);
+            const postElement = this.createPostElement(post);
+            feedContainer.appendChild(postElement);
+        });
+    }
+
+    createPostElement(post) {
+        const postDiv = document.createElement('div');
+        postDiv.className = 'post-card bg-white rounded-xl shadow-sm overflow-hidden fade-in';
+        postDiv.dataset.postId = post.id;
+        
+        const timeAgo = this.getTimeAgo(post.timestamp);
+        
+        postDiv.innerHTML = `
+            <div class="relative">
+                <img src="${post.image}" alt="Post image" class="w-full h-48 object-cover">
+                <button class="save-btn absolute top-3 right-3 p-2 bg-white/80 backdrop-blur-sm rounded-full hover:bg-white transition-colors duration-200">
+                    <i data-feather="bookmark" class="w-4 h-4 text-gray-600"></i>
+                </button>
+            </div>
+            <div class="p-4">
+                <div class="flex items-center justify-between mb-3">
+                    <div class="flex items-center space-x-3">
+                        <img src="http://static.photos/people/40x40/${Math.floor(Math.random() * 100)}" alt="${post.user.name}" class="w-8 h-8 rounded-full">
+                        <div>
+                            <h4 class="font-semibold text-gray-900 text-sm">${post.user.name}</h4>
+                            <p class="text-gray-500 text-xs">@${post.user.username}</p>
+                        </div>
+                    </div>
+                    <span class="text-xs text-gray-400">${timeAgo}</span>
+                </div>
+                
+                <p class="text-gray-700 mb-4 text-sm">${post.caption}</p>
+                
+                <div class="flex items-center justify-between text-gray-500">
+                    <div class="flex items-center space-x-4">
+                        <button class="like-btn flex items-center space-x-1 text-sm hover:text-red-500 transition-colors duration-200">
+                        <i data-feather="heart" class="w-4 h-4"></i>
+                        <span>${post.likes}</span>
+                    </button>
+                    <button class="flex items-center space-x-1 text-sm hover:text-blue-500 transition-colors duration-200">
+                        <i data-feather="message-circle" class="w-4 h-4"></i>
+                        <span>${post.comments}</span>
+                    </button>
+                    <button class="flex items-center space-x-1 text-sm hover:text-green-500 transition-colors duration-200">
+                        <i data-feather="share-2" class="w-4 h-4"></i>
+                        <span>${post.shares}</span>
+                    </button>
+                </div>
+            </div>
+        `;
+        
+        return postDiv;
+    }
+
+    handleLike(likeBtn) {
+        const heartIcon = likeBtn.querySelector('i');
+        const likesCount = likeBtn.querySelector('span');
+        
+        likeBtn.classList.add('like-animation');
+        setTimeout(() => likeBtn.classList.remove('like-animation'), 600);
+        
+        const isLiked = heartIcon.style.fill === 'currentColor';
+        const currentLikes = parseInt(likesCount.textContent);
+        
+        if (isLiked) {
+            heartIcon.style.fill = 'none';
+            likesCount.textContent = currentLikes - 1;
+            likesCount.style.color = '';
+        } else {
+            heartIcon.style.fill = 'currentColor';
+            likesCount.textContent = currentLikes + 1;
+            likesCount.style.color = '#ef4444';
+        }
+    }
+
+    handleSave(saveBtn) {
+        const bookmarkIcon = saveBtn.querySelector('i');
+        const isSaved = bookmarkIcon.style.fill === 'currentColor';
+        
+        if (isSaved) {
+            bookmarkIcon.style.fill = 'none';
+        } else {
+            bookmarkIcon.style.fill = 'currentColor';
+        }
+    }
+
+    trackPostInteraction(postId) {
+        // Track user engagement for personalization
+        const post = this.posts.find(p => p.id === postId);
+        if (post) {
+            this.updateUserPreferences(post);
+        }
+    }
+
+    updateUserPreferences(post) {
+        if (!this.userPreferences.engagedCategories) {
+            this.userPreferences.engagedCategories = {};
+        }
+        
+        this.userPreferences.engagedCategories[post.category] = 
+            (this.userPreferences.engagedCategories[post.category] || 0) + 1;
+        
+        localStorage.setItem('flowflex_preferences', JSON.stringify(this.userPreferences));
+    }
+
+    getUserPreferences() {
+        const stored = localStorage.getItem('flowflex_preferences');
+        return stored ? JSON.parse(stored) : {
+            engagedCategories: {},
+            preferredFeed: 'trending',
+            blockedUsers: []
+        };
+    }
+
+    getTimeAgo(timestamp) {
+        const now = new Date();
+        const diff = now - new Date(timestamp);
+        const minutes = Math.floor(diff / 60000);
+        const hours = Math.floor(diff / 3600000);
+        const days = Math.floor(diff / 86400000);
+        
+        if (days > 0) return `${days}d ago`;
+        if (hours > 0) return `${hours}h ago`;
+        return `${minutes}m ago`;
+    }
+
+    showLoading() {
+        document.getElementById('loading').classList.remove('hidden');
+    }
+
+    hideLoading() {
+        document.getElementById('loading').classList.add('hidden');
+    }
+
+    showEmptyState() {
+        document.getElementById('feed-container').innerHTML = '';
+        document.getElementById('empty-state').classList.remove('hidden');
+    }
+
+    showError(message) {
+        // Simple error notification
+        const errorDiv = document.createElement('div');
+        errorDiv.className = 'fixed top-4 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
+        errorDiv.textContent = message;
+        document.body.appendChild(errorDiv);
+        
+        setTimeout(() => {
+            errorDiv.remove();
+        }, 3000);
+    }
+
+    setupIntersectionObserver() {
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting && !this.isLoading) {
+                    this.loadFeed();
+            }
+        }, {
+            rootMargin: '100px'
+        });
+
+        observer.observe(document.getElementById('loading'));
+    }
+}
+
+// Initialize the app when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    new FlowFlexApp();
+});
+
+// Utility function for API calls
+async function apiCall(url, options = {}) {
+    try {
+        const response = await fetch(url, {
+            headers: {
+                'Authorization': 'Client-ID YOUR_UNSPLASH_ACCESS_KEY',
+                'Accept-Version': 'v1'
+            },
+            ...options
+        });
+        
+        if (!response.ok) {
+            throw new Error(`API call failed: ${response.status}`);
+        }
+        
+        return await response.json();
+    } catch (error) {
+        console.error('API call error:', error);
+        throw error;
+    }
+}

style.css

@@ -1,28 +1,117 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* Custom CSS for FlowFlex */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+* {
+    font-family: 'Inter', sans-serif;
+}
+
+/* Smooth scrolling */
+html {
+    scroll-behavior: smooth;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
+}
+
+/* Post card animations */
+.post-card {
+    transition: all 0.3s ease;
+    transform: translateY(0);
+}
+
+.post-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+/* Like animation */
+.like-animation {
+    animation: like-pulse 0.6s ease;
+}
+
+@keyframes like-pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.2); }
+    100% { transform: scale(1); }
+}
+
+/* Feed filter active state */
+.feed-filter-btn.active {
+    box-shadow: 0 4px 6px -1px rgba(14, 165, 233, 0.3);
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* Loading skeleton animation */
+.skeleton {
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: loading 1.5s infinite;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+@keyframes loading {
+    0% {
+        background-position: 200% 0;
+    }
+    100% {
+        background-position: -200% 0;
+    }
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Fade in animation for new content */
+.fade-in {
+    animation: fadeIn 0.5s ease-in;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
+
+/* Mobile responsive adjustments */
+@media (max-width: 768px) {
+    .post-card {
+        margin-bottom: 1rem;
+    }
+    
+    .feed-filter-btn {
+        font-size: 0.75rem;
+        padding: 0.5rem 1rem;
+    }
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+    .dark-mode-auto {
+        background-color: #1a202c;
+        color: #e2e8f0;
+    }
+}
+
+/* Custom gradient backgrounds */
+.gradient-bg-primary {
+    background: linear-gradient(135deg, #0ea5e9 0%, #d946ef 100%);
+}
+
+.gradient-bg-secondary {
+    background: linear-gradient(135deg, #d946ef 0%, #0ea5e9 100%);
+}