Today I Learned

Project Overview

"Today I Learned" is a collaborative knowledge-sharing platform where users can post, discover, and validate interesting facts across various categories. This project showcases my ability to build interactive, community-driven applications with real-time data capabilities.

The application serves as a collective learning tool where users can share bite-sized knowledge nuggets they've discovered, categorize them by topic, and vote on submissions from other users. Facts are verified through a community voting system, creating a self-moderating ecosystem of valuable information.

Technical Implementation

This project demonstrates modern front-end development with a lightweight, efficient tech stack and serverless backend integration:

// Example of Supabase real-time subscription implementation
async function initializeSupabase() {
  const { createClient } = supabase;
  const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY);
  
  // Set up real-time listener for new facts
  supabaseClient
    .channel('facts')
    .on('postgres_changes', 
      { 
        event: 'INSERT', 
        schema: 'public', 
        table: 'facts' 
      }, 
      (payload) => {
        // Add new fact to UI without page refresh
        const newFact = payload.new;
        renderFactToList(newFact);
        updateFactsCount();
      }
    )
    .subscribe();
    
  return supabaseClient;
}

// Voting functionality with optimistic UI updates
async function handleVote(factId, voteType) {
  // Update UI immediately (optimistic update)
  const factElement = document.querySelector(`[data-fact-id="${factId}"]`);
  const voteCountElement = factElement.querySelector(`.vote-${voteType}`);
  const currentCount = parseInt(voteCountElement.textContent);
  voteCountElement.textContent = currentCount + 1;
  
  // Actually perform the database update
  const { error } = await supabase
    .from('votes')
    .insert([
      { 
        fact_id: factId, 
        user_id: currentUser.id, 
        vote_type: voteType 
      }
    ]);
    
  // Revert UI if error occurred
  if (error) {
    voteCountElement.textContent = currentCount;
    showToast('Voting failed. Please try again.');
  }
}

Key Features

Challenges & Solutions

Building this knowledge-sharing platform presented several interesting technical challenges:

• Optimistic UI updates - Implemented a sophisticated update pattern that updates the UI immediately upon user action while asynchronously confirming with the database, falling back gracefully if server validation fails.
• Real-time synchronization - Engineered a reliable real-time system using Supabase's Postgres changes API to ensure all users see new facts and votes without requiring page refreshes.
• Preventing duplicate votes - Designed a database constraint system with composite unique indexes to prevent users from voting multiple times on the same fact while maintaining high performance.
• Responsive design challenges - Crafted a UI that maintains usability and aesthetic appeal across devices, with special attention to interactive elements that work equally well with touch and mouse inputs.

Future Enhancements

While the current implementation delivers a polished user experience, I've identified several opportunities for future enhancement:

• Fact verification system with external API integrations to automatically check submitted information
• User profiles and achievement system to gamify knowledge sharing
• Advanced search functionality with natural language processing
• Browser extension for quick fact submission while browsing the web

Takeaways

This project provided valuable experience in several key areas:

• Building highly interactive UIs with vanilla JavaScript for optimal performance
• Implementing real-time data synchronization in web applications
• Designing self-moderating content systems through user engagement
• Leveraging serverless architecture for scalable web applications

The "Today I Learned" platform demonstrates how a relatively simple concept can be transformed into an engaging, dynamic application through thoughtful architecture decisions and focus on user experience. This project showcases my ability to build interactive, community-driven platforms with modern web technologies.