F3: Home Feed Flow - Feature Analysis

Overview

The Home Feed page serves as the primary interface for logged-in users of the Futr Connect platform. It presents a personalized, dynamic content feed tailored to each user’s interests and followed companies. The feed integrates multiple content types (news articles, podcasts, company information) into a unified, scrollable stream with interactive elements and real-time updates. The page also includes a sidebar showing the user’s followed AI companies and a notification system for platform updates. This central hub is designed to encourage content discovery and engagement while providing quick access to other key platform features.

API Endpoints

2. Fetch Followed Companies

GET /api/company-follow/

Response:

{
  "count": 24,
  "next": "https://api.futrconnect.com/api/company-follow/",
  "previous": null,
  "results": [
    {
      "id": "uuid-string",
      "company": {
        "id": "uuid-string",
        "name": "AI Solutions Co",
        "logo": "https://storage.futrconnect.com/logos/ai-solutions.png",
        "category": ["uuid-string"]
      }
    }
    // Additional followed companies...
  ]
}

3. Follow/Unfollow Company

POST /api/company-follow/

Request Body:

{
  "company": "company-uuid"
}

Response (Follow - 201 Created):

{
  "id": "uuid-string",
  "company": "company-uuid"
}

4. Favorite/Unfavorite News Article

POST /api/newsfeed-favorite/

Request Body:

{
  "news_feed": "news-feed-uuid"
}

Response (Favorite - 201 Created):

{
  "id": "uuid-string",
  "news_feed": "news-feed-uuid"
}

5. Like/Unlike Podcast

POST /api/podcast-like/

Request Body:

{
  "podcast": "podcast-uuid"
}

Response (Like - 201 Created):

{
  "id": "uuid-string",
  "podcast": "podcast-uuid"
}

6. Fetch User Notifications

GET /api/notification/

Request Parameters:

  • limit (integer, optional): Number of notifications to return.
  • offset (integer, optional): Pagination offset.

Response:

{
  "count": 35,
  "next": "https://api.futrconnect.com/api/notification/?limit=20&offset=20",
  "previous": null,
  "results": [
    {
      "id": "uuid-string",
      "title": "New Content Published",
      "message": "AI Solutions Co published new content: 'The Future of Computer Vision'",
      "created_on": "2025-05-14T10:15:00Z",
      "is_read": false,
      "actions": {}
    }
    // Additional notifications...
  ]
}

7. Mark Notification as Read

PATCH /api/notification/{notification_id}/

Request Body:

{
  "is_read": true
}

Response (200 OK):

{
  "id": "uuid-string",
  "is_read": true
}

8. Mark All Notifications as Read

POST /api/read_all_notification/

State Management

react-query

interface HomeFeedList {
podcastsPrevious: string | null;
podcastsNext: string | null;
newsFeedPrevious: string | null;
newsFeedNext: string | null;
aiCompanyNext: string | null;
aiCompanyPrevious: string | null;
aiCompanyWithoutFeaturedNext:string | null,
aiCompanyWithoutFeaturedPrevious:string | null,
results: TransformResultTypes[]
}

interface TransformResultTypes {
newsFeed: NewsFeedData[];
podcasts: Podcasts;
aiCompanies: AiCompany;
aiCompanyWithoutFeatured: AiCompany

}
interface NewsFeedData {
id: string;
created_on: string;
edited_on: string;
headline: string;
url: string;
published_date: string;
description: string;
image_url: string;
minute_read: number;
views_count: number;
is_active: boolean;
is_favourite: boolean;
is_viewed: boolean;
thumbnail_image: null | string;
}
interface Podcasts {
id: string;
created_on: string;
edited_on: string;
title: string;
description: string;
thumbnail: string;
media_embed_url: string;
total_views: number;
total_likes: number;
user: string;
category: string;
is_liked: boolean;
is_viewed: boolean;
}

interface AiCompany {
id: string;
category: Category[];
company_addresses: CompanyAddress[];
company_social_links: CompanySocialLinks | null;
is_followed: boolean;
created_on: string;
edited_on: string;
name: string;
email: string;
company_founded: string;
phone_number: string;
logo: string;
meeting_url: string | null;
short_video: string | null;
first_call: string | null;
demo_video: string;
overview: string;
about: string;
best_suited_for: string[];
where_to_use: string;
standout_function: string;
status: string;
publish_date: null;
is_claimed: boolean;
is_featured_by_admin: boolean;
total_followers_count: number;
user: string;
claimed_by: null;
page:”HomeFeedMain” | “AiCompanyListMain” | “AiCompanyDetails”;
}

Notification

type NotificationType = {
id: string;
created_on: string;
edited_on: string;
content_type: string | null;
message: string | null;
title: string | null;
image: string | null;
actions: NotificationActionType;
is_read: boolean | null;
object_model_id: string | null;
notification_type: string | null;
target_user: string | null;
};

FollowedCompany

interface FollowCompany {
id: string;
follower: string;
created_on: string;
edited_on: string;
company: string;
logo: string;
company_name: string;
}[]

Database Models

PostgreSQL Models

NewsFeed

  • id (UUID, primary key)
  • headline (varchar, required)
  • url (URLField, unique, required)
  • description (text, nullable)
  • published_date (datetime, nullable)

Podcast

  • id (UUID, primary key)
  • title (varchar, required)
  • description (text, nullable)
  • media_embed_url (URLField, nullable)
  • thumbnail (ImageField, nullable)

Company

  • id (UUID, primary key)
  • name (varchar, required)
  • logo (ImageField, nullable)
  • overview (text, nullable)
  • is_featured_by_admin (boolean, default: false)

CompanyFollow

  • id (UUID, primary key)
  • follower (ForeignKey to User)
  • company (ForeignKey to Company)

FavoriteNewsFeed

  • id (UUID, primary key)
  • news_feed (ForeignKey to NewsFeed)
  • user (ForeignKey to User)

PodcastLike

  • id (UUID, primary key)
  • podcast (ForeignKey to Podcast)
  • user (ForeignKey to User)

Notification

  • id (UUID, primary key)
  • title (varchar, nullable)
  • image (ImageField, nullable)
  • message (text, nullable)
  • target_user (ForeignKey to User)
  • actions (jsonb, nullable)
  • is_read (boolean, default: false)
  • content_type (ForeignKey to ContentType)
  • object_model_id (UUID)
  • notification_type (varchar, choices: NOTIFICATION, INFORMATION, ACTIVITY, default: NOTIFICATION)

Backend Logic

Home Feed Generation

The home feed is generated by the HomeFeedView, which combines data from the NewsFeed, Podcast, and Company models. The feed is not personalized; it is a simple aggregation of the latest content from these sources.

Notification System

The backend has a basic notification system that allows for the creation and retrieval of notifications. The Notification model stores notification data, and the NotificationViewSet provides API endpoints for managing notifications. The system does not currently include advanced features like real-time updates via WebSockets or push notifications through FCM.

Search Functionality

Search functionality is provided by the Django REST Framework’s SearchFilter. This allows for basic keyword-based searching across the NewsFeed, Podcast, and Company models. The more advanced PostgreSQL full-text search features are not used.

Performance and Optimization

Feed Loading Optimization

  1. Database Query Optimization:
  • Use select_related and prefetch_related for foreign key relationships
  • Use database indexes on frequently queried fields
  • Implement composite indexes for multi-field queries
  • Use database functions for complex calculations
  1. Caching Strategy:
  • Implement Redis cache for frequently accessed data with a multi-level approach:
    • User feed first page (5-minute TTL)
    • User-agnostic “latest” feed (10-minute TTL, shared across users)
    • Followed companies list (1-hour TTL)
    • Notification counts (1-minute TTL)
  • Implement stale-while-revalidate pattern:
    • Serve stale cache data immediately while refreshing in background
    • Update cache asynchronously using Celery workers
  • Use cache invalidation on relevant updates with targeted key patterns
  • Implement sliding cache expiration for frequently accessed items
  • Libraries: django-redis for Django-integrated caching, Celery for async tasks
  1. Pagination:
  • Use infinite scroll for better ux
  1. Image Optimization:
    - Use Next.js Image component with automatic optimization
    - Implement responsive images with correct sizes and srcset
    - Use modern formats (WebP, AVIF) with appropriate fallbacks
    - Pre-generate image thumbnails on upload with multiple resolutions
    - Implement blur-up technique for progressive loading
    - Libraries: next/image, sharp for server-side image processing, placeholder for blur placeholders

Real-time Updates

  1. Optimistic UI Updates:
  • Implement immediate UI feedback for user actions
  • Update local state before API call completes
  • Revert changes on API failure with error message
  • Use proper loading states for all async operations
  • Libraries: react-query optimistic update patterns
  1. Background Processing:
    - Implement proper error handling and retries
    - Monitor task queue health

Mobile Optimization

  1. Responsive Design Implementation:
  • Implement mobile-first approach with Tailwind CSS
  • Use responsive breakpoints for layout changes
  • Optimize touch targets for mobile interaction
  • Implement swipe gestures for common actions
  • Libraries: framer-motion for gesture support
  1. Bandwidth Considerations:
    - Reduce initial payload size
    - Implement progressive loading of content
    - Reduce API response size with field filtering
    - Use compression for all API responses
    - Conditionally load lower-resolution images on mobile
    - Libraries: compression middleware for Django

Technical Considerations

Cross-Device Synchronization

  • Maintain consistent state across multiple devices for the same user
  • Store user preferences and state in the database, not just client-side
  • Implement last-read tracking for notifications
  • Use server timestamps for all time-sensitive operations

Authentication and Authorization

  • Every API request requires a valid JWT token
  • Implement role-based access control for company-related actions
  • Use Django permissions to protect API endpoints
  • Implement token refresh without disrupting user experience
  • Handle expired sessions gracefully

Potential Bottlenecks

  1. Unified Feed API Performance:
  • Challenge: Aggregating different content types can be computationally expensive
  • Solution: Implement efficient database indexing for join operations
  • Solution: Use materialized views that are refreshed periodically
  • Solution: Implement multi-level caching strategy with appropriate invalidation
  • Solution: Consider partial response caching by content segments
  1. Database Load:
  • Challenge: High read/write volume for user interactions (follows, likes)
  • Solution: Implement read replicas for PostgreSQL
  • Solution: Consider separating high-volume tables to dedicated database instances
  1. Notification Scaling:
  • Challenge: Push notifications can become a bottleneck with many users
  • Solution: Batch FCM notifications using topic messaging
  • Solution: Implement a dedicated notification microservice if needed
  1. Search Performance:
  • Challenge: Full-text search on large datasets can be slow
  • Solution: Consider dedicated search service (Elasticsearch) for large scale
  • Solution: Implement caching for popular search queries
  1. API Request Volume:
    - Challenge: High volume of API requests during peak usage
    - Solution: Implement API gateway with rate limiting and caching
    - Solution: Use GraphQL for more efficient data fetching when appropriate
    - Solution: Consider implementing a Backend-for-Frontend (BFF) pattern
    - Solution: Set up CDN caching for public feed endpoints
    - Monitoring: Track API usage patterns to identify optimization opportunities

Implementation Considerations

Frontend Architecture

  • Use Next.js Pages Router for basic routing
  • Implement layout components for consistent UI structure
  • Create reusable components for feed items, notifications, etc.
  • Use React Context for theme and global state
  • Use MobX-State-Tree for model-based state management

API Integration Architecture

  • Implement a centralized API service layer
  • Create service modules for different resource types
  • Use consistent error handling and response parsing
  • Implement request/response interceptors for common tasks
  • Implement strategic data fetching patterns:
  • Parallel loading of main feed and sidebar content
  • Background refreshing for non-critical components
  • Request cancellation for superseded requests
  • Use React Query for data fetching and caching
  • Implement stale-while-revalidate pattern for UI responsiveness
  • Configure appropriate revalidation intervals
  • Set up automatic error retry with exponential backoff
  • Libraries: axios, @tanstack/react-query

Error Handling

  • Implement comprehensive client-side error handling
  • Show user-friendly error messages
  • Log detailed errors to monitoring service
  • Implement automatic retry for transient failures
  • Handle offline/online transitions gracefully

Creative Suggestions

Enhanced User Experience

  1. Smooth Transitions and Animations:
  • Implement subtle animations for feed item loading and interaction
  • Use fade-in effects for newly loaded content
  • Libraries: framer-motion

Visual Enhancements

  1. Dynamic Color Schemes:
  • Implement company brand color integration for company content
  • Use subtle color-coding for different content types
  • Libraries: tailwindcss
  1. Advanced Content Preview:
  • Show mini-graphs for companies with performance metrics
  • Implement progressive image loading with blur placeholders
  1. Visualization Components:
    - Add trending topics visualization using tag clouds
    - Implement activity graphs showing user engagement over time

Feature Suggestions

Enhanced Engagement Features

  1. Content Collections:
  • Allow users to create and curate personal collections of content
  • Enable sharing collections with other users
  • Support collaborative collections for teams
  1. Smart Content Digest:
  • Implement a daily/weekly email digest of personalized content
  • Allow users to set frequency and content preferences
  • Include “What You Missed” section for frequently engaged users
  1. Unified Content API Strategy:
  • Create a consistent Developer API for third-party integrations
  • Allow companies to submit content programmatically via API
  • Implement webhooks for real-time content updates
  • Support OAuth2 for secure API access
  1. API Analytics Dashboard:
    - Provide usage metrics for API consumers
    - Track popular content and engagement patterns
    - Offer insights on content performance and user engagement
    - Set up rate limiting and quota monitoring

Additional Considerations

Accessibility Improvements

  • Implement proper ARIA attributes for all interactive elements
  • Ensure keyboard navigability throughout the feed
  • Add screen reader-friendly descriptions for images
  • Support reduced motion preferences
  • Test with screen readers and accessibility tools
  • Libraries: @axe-core/react for testing

Privacy Considerations

  • Be transparent about personalization algorithms
  • Allow users to delete their activity history
  • Implement content controls (mute topics, companies)
  • Comply with GDPR and other privacy regulations
  • Provide data export functionality

Content Moderation

  • Implement automatic content filtering for inappropriate material
  • Create flag/report mechanism for problematic content
  • Define clear content guidelines for company content
  • Implement admin review workflow for flagged content

Network Resilience

  • Implement offline support for basic browsing
  • Cache critical content for offline access
  • Handle intermittent connectivity gracefully
  • Provide clear offline indicators and retry options
  • Libraries: workbox for offline capabilities

Further Reading & Best Practices

  1. Feed Design Patterns:
  1. Real-time Updates:
  1. Content Personalization:
  1. Performance Optimization:
  1. Mobile UX Design:
  1. API Design Best Practices:
  1. Efficient Data Loading Strategies:
    - SWR Documentation
    - React Query Documentation
    - Stale-While-Revalidate Pattern
    - Cache-Control Best Practices