F5: Top AI Companies Flow - Feature Analysis

Overview

The Top AI Companies feature showcases a curated selection of recommended AI companies that are featured or highly rated on the platform. This section serves as a highlight reel of notable companies, providing users with a starting point for exploring the AI ecosystem. Each company is presented with detailed information, media content, and interactive elements. The feature implements personalization elements for authenticated users while offering a streamlined, non-carouseled layout designed for optimal discoverability. This section differs from the general AI Companies Directory by focusing exclusively on featured companies selected through administrative curation rather than general listing or algorithmic ranking.

Company Information Display Strategy

In accordance with the platform-wide information display approach:

  • Card View (Top AI Companies Listing): Featured company cards display only essential information:

  • Company name

  • Location
  • Claimed
  • Logo
  • Category/tags
  • Short description
  • Follow button

  • Basic action buttons (Calendly, website links)

  • Detail View: Complete company information including all specialized content is only accessible when users click on a company card, navigating to the dedicated Company Detail Page

  • Benefits of this approach:

  • Creates a clean, focused presentation of featured companies
  • Maintains visual consistency with other platform sections
  • Improves page load performance
  • Establishes a clear information hierarchy
  • Encourages users to explore detailed company information

API Endpoints

1. Fetch Top AI Companies

GET /api/company/?is_featured_by_admin=true

Response:

{
  "count": 24,
  "next": "https://api.futrconnect.com/api/company/?is_featured_by_admin=true",
  "previous": null,
  "results": [
    {
      "id": "uuid-string",
      "name": "AI Innovations Co",
      "logo": "https://storage.futrconnect.com/logos/ai-innovations.png",
      "overview": "Pioneering AI solutions for healthcare diagnostics",
      "short_video": "https://storage.futrconnect.com/videos/ai-innovations-commercial.mp4",
      "category": ["uuid-string"],
      "is_featured_by_admin": true,
      "is_claimed": true,
      "is_followed": false,
      "meeting_url": "https://calendly.com/ai-innovations/meeting",
      "social_link": {
        "website": "https://ai-innovations.com/trial"
      }
    }
    // Additional companies...
  ]
}

2. Follow Top AI Company

POST /api/company-follow/

Request Body:

{
  "company": "company-uuid"
}

Response (201 Created):

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

3. Fetch User’s Followed Top AI Companies

GET /api/company-follow/?is_featured_by_admin=true

Response:

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

State Management

MobX-State-Tree Models

State Management

React-query

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”;
}[]

type CompanyAddress = {
address_1: string;
address_2: string;
address_type: string;
company: string;
created_on: string;
edited_on: string;
id: string;
postal_code: string;
state: string;
};

interface Category {
id: string;
title: string;
description: string;
}

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

MobX-State-Tree Models

const AiCompanyStore ={
fileForClaimProfile: types.array(AiCompanySchema.FileForClaim),
claimedId: types.maybeNull(types.string)
}

CompaniesDirectoryStore

Model AiCompanyStore {

  // Actions
  getFileLengthWhichAreNotUploaded()
  clearFileForClaimProfile()
  addFileForArray()
  removeFileFromList()
  checkFileFailed()
  updateClaimedId(id)
  followAiCompany({companyId})
  unFollowAiCompany({companyId})
  claimCompany()
  claimCompanyMedia({body,id})
}

Database Models

PostgreSQL Models

Company

  • id (UUID, primary key)
  • name (varchar, required)
  • logo (ImageField, nullable)
  • overview (text, nullable)
  • short_video (URLField, nullable)
  • category (ManyToManyField to CompanyCategory)
  • is_featured_by_admin (boolean, default: false)
  • is_claimed (boolean, default: false)
  • claimed_by (ForeignKey to User, nullable)
  • meeting_url (URLField, nullable)
  • social_link (OneToOneField to CompanySocialLink)

UserFollow

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

Backend Logic

Top Companies Selection

The backend identifies top companies by filtering the Company model for instances where the is_featured_by_admin boolean field is set to true. There is no complex ranking or personalization algorithm involved in the selection process.

Follow/Unfollow Mechanism

The follow/unfollow functionality is handled by the CompanyFollowViewSet:

  1. Follow: When a user follows a company, a POST request to the /api/company-follow/ endpoint creates a new CompanyFollow record, linking the user and the company.

  2. Unfollow: To unfollow, a DELETE request is made to the same endpoint with the company ID, which deletes the corresponding CompanyFollow record.

Performance and Optimization

Database Query Optimization

The backend relies on the following to ensure efficient database queries:

  1. Indexing: The Company model has a database index on the is_featured_by_admin field to speed up the filtering of top companies.

  2. Pagination: The API uses Django REST Framework’s standard PageNumberPagination to limit the number of results returned per request.

Frontend Optimization

  1. Lazy Loading and Virtualization:
  • Implement lazy loading for company logos and commercial videos
  • Use browser IntersectionObserver API for efficient loading

  • Implementation:

    ```jsx Refer F4.md line 362

    ```

  1. Efficient State Management:
  • Use selective component updates based on useState
  • Implement memoization for derived data
  • Store followed status efficient for quick UI updates
  1. Client-Side Caching:
  • Implement React Query for data fetching with automatic caching
  • Use stale-while-revalidate pattern for responsive UI
  • Implementation:
    // Using React Query for caching
const { data, isLoading, error } = useQuery(["topCompanies", filters, sort], () => fetchTopCompanies(filters, sort), {
  staleTime: 5 * 60 * 1000, // 5 minutes
  keepPreviousData: true,
});
  1. Content Delivery Network:
    - Use CDN for efficient delivery of company logos and videos
    - Implement responsive images based on viewport size
    - Implementation with CDN URL patterns and srcset attributes

Technical Considerations

Cross-Device Compatibility

  • Implement responsive card layouts using Tailwind CSS grid system
  • Adjust card layouts based on viewport size:
  • Desktop: Grid of 3-4 cards per row
  • Tablet: 2 cards per row
  • Mobile: Single column with larger cards
  • Ensure touch target sizes for mobile interactions

Language Support

  • Currently, the website is implemented in a single language (English)
  • No language-switching capability in the current implementation
  • All content, including company descriptions and tags, is in English
  • Data structures are designed to support future localization if needed

Company Scoring (Future Implementation)

  • Company scoring functionality will be added in a future release
  • The database schema and API endpoints have been designed to support this feature
  • User interface for rating companies will be implemented when this feature is released
  • Initial implementation will focus on core directory and following functionality without scoring

Authentication Integration

  • Follow/unfollow actions require authentication
  • Handle authentication states for CTA buttons:
  • Unauthenticated: Prompt login when attempting to follow
  • Authenticated: Allow immediate interaction
  • Maintain proper auth state during navigation:
  • Store auth tokens securely
  • Implement token refresh for extended sessions
  • Handle expired sessions gracefully

Potential Bottlenecks

  1. Featured Company Selection Scale:
  • Challenge: As more companies are marked as featured, the page may become unwieldy
  • Solution: Implement pagination with reasonable page sizes
  • Solution: Consider rotation system or tiered featuring (Gold, Silver, Bronze)
  • Solution: Add admin controls for featuring category quotas
  1. Video Loading Performance:
  • Challenge: Multiple embedded commercial videos can cause performance issues
  • Solution: Implement lazy loading with placeholder thumbnails
  • Solution: Auto-play only on user interaction
  • Solution: Optimize video encoding and delivery for web
  1. Follow/Unfollow Concurrency:
  • Challenge: Race conditions with multiple follow/unfollow operations
  • Solution: Use optimistic UI updates with error recovery
  • Solution: Implement proper concurrency control on the backend
  • Solution: Add rate limiting for frequent operations
  1. Filter Performance with Large Dataset:
    - Challenge: As featured companies grow, filter performance may degrade
    - Solution: Implement client-side filtering for already-loaded data
    - Solution: Use debouncing for search input
    - Solution: Consider backend pre-computation of common filter combinations

Implementation Considerations

Frontend Implementation

  1. Component Architecture:
  • Build reusable components:
    • TopCompanyCard: Featured card with enhanced styling
    • TopCompanyList: Container managing layout and pagination
    • TopCompanyFilter: Filter controls for search and category/tag selection
  • Ensure consistent styling with the main company directory
  1. User Interface Design:
  • Create distinctive visual treatment for featured companies:
    • Prominent “Featured” badge or highlight
    • Enhanced card styling with subtle elevation
    • Special visual cue for claimed profiles
  • Implement engagement indicators:
    • Follow count badges
    • Visual feedback for user’s follow status
    • Future: Score visualization
  1. Interaction Design:
    - Design responsive hover and click states
    - Implement micro-animations for follow/unfollow
    - Create intuitive loading states and transitions
    - Design video player interaction that doesn’t overwhelm the page

Backend Implementation

  1. API Design:
  • Leverage shared endpoints with the general directory when possible
  • Use query parameters to filter for featured status
  • Deduplicate code using common backend services

  • Implementation:

    # Reusing company serializer
class CompanyViewSet(viewsets.ModelViewSet):
    queryset = Company.objects.all()
    serializer_class = CompanySerializer

    def get_top(self, request):
        queryset = self.get_queryset().filter(is_featured=True)
        # Apply sorting, pagination, etc.
        serializer = self.get_serializer(queryset, many=True)
        return Response(serializer.data)
  1. Admin Interface:
  • Create dedicated admin panel for managing featured companies
  • Include batch operations for featuring multiple companies
  • Add analytics dashboard for tracking featured company performance
  • Implementation with Django Admin customization
  1. Data Synchronization:
    - Ensure real-time updates for follow/unfollow actions
    - Implement proper caching invalidation for featured status changes
    - Consider WebSocket for live follower count updates (if implemented)
    - Implementation:
    # Signal handler for cache invalidation
@receiver(post_save, sender=Company)
def invalidate_featured_cache(sender, instance, **kwargs):
    if instance.is_featured:
        cache.delete_pattern("top_companies:*")

Testing Strategy

  1. Component Testing:
  • Unit tests for individual components
  • Visual regression tests for card layouts
  • Interaction tests for follow/unfollow actions
  • Implementation with Playwright
  1. API Testing:
  • Test featured companies endpoint with various filters
  • Validate pagination functionality
  • Test authentication requirements for follow/unfollow
  • Implementation with Django TestCase and API Client
  1. Performance Testing:
    - Load testing for featured companies listing
    - Measure time-to-interactive with various network conditions
    - Test video loading performance
    - Implementation with Lighthouse and custom performance metrics

Creative Suggestions

Enhanced Visual Presentation

  1. Featured Company Spotlight:
  • Implement a rotating “Spotlight” section at the top
  • Show one featured company with expanded details
  • Include executive quote or company mission statement
  • Display key product screenshots or achievements
  1. Interactive Media Gallery:
  • Create a media-rich card expansion on click/hover
  • Show additional images, videos, or product demos
  • Display a mini case study or success metrics
  • Use smooth animations for expansion/collapse
  1. Visual Category Representation:
    - Implement color-coding for different AI categories
    - Add subtle background patterns representing tech domains
    - Use industry-specific iconography to enhance recognition
    - Create visual continuity between similar companies

Feature Suggestions

Enhanced Discovery Features

  1. AI Category Exploration:
  • Group featured companies by AI category with visual separation
  • Create an interactive category filter at the top
  • Show category-specific metrics and trends
  • Highlight emerging categories with special indicators
  1. Trending Feature:
  • Add a “Trending This Week” section based on engagement metrics
  • Show companies gaining significant follow growth
  • Highlight recent product launches or funding news
  • Rotate weekly to encourage return visits
  1. Company Roadmap Previews:
  • Allow featured companies to share upcoming product roadmaps
  • Display timeline of planned releases or features
  • Enable users to follow specific roadmap items
  • Send notifications when roadmap items launch
  1. Success Stories:
  • Integrate customer success stories with featured companies
  • Show real-world implementation examples
  • Include metrics and outcomes achieved
  • Add brief video testimonials from customers
  1. Featured Company Content:
    - Highlight thought leadership content from featured companies
    - Showcase recent blog posts, whitepapers, or research
    - Integrate with company’s content from other platform sections
    - Present industry perspectives on relevant topics

Additional Considerations

Accessibility Enhancements

  • Implement proper ARIA attributes for interactive elements
  • Ensure keyboard navigability between company cards
  • Provide text alternatives for visual indicators (badges, etc.)
  • Test with screen readers and assistive technologies
  • Implement focus management for interactive elements
  • Lighthouse for accessibility testing

Mobile Considerations

  • Optimize card layouts specifically for mobile:
  • Full-width cards with clear touch targets
  • Simplified content for smaller screens
  • Touch-friendly video controls
  • Pull-to-refresh for content updates
  • Implement bottom sheet patterns for filters on mobile
  • Test on various mobile devices and orientations

Further Reading & Best Practices

  1. Effective Curation Systems:
  1. User Engagement Patterns:
  1. Video Performance:
  1. Mobile Card Layouts:
  1. Featured Content Analytics:
    - Measuring Featured Content Performance
    - Data-Driven Content Curation