Likey - Social Media Platform

A modern, production-ready Instagram-like social media platform built with SvelteKit 5, Supabase, and modern web technologies.

View Demo · Report Bug · Request Feature

🚀 Live Demo

About The Project

Table of Contents

1. About The Project
   • Built With
   • Key Features
2. Installation
3. Usage
4. Architecture
5. Security Features
6. Performance
7. Deployment
8. Contributing
9. License
10. Contact
11. Acknowledgments

Likey is a production-ready, modern social media platform that recreates the Instagram experience with cutting-edge web technologies. Built with SvelteKit 5's latest features, real-time capabilities through Supabase, and optimized for performance and user experience.

🎯 Key Features

Core Social Features

• 📱 User Authentication: Secure email/password authentication with Supabase Auth
• 👤 Profile Management: Customizable profiles with usernames, display names, bios, and profile pictures
• 📸 Photo Sharing: Upload and share multiple photos per post with automatic compression
• 🏠 Feed System: Infinite scroll home feed with posts from followed users
• ❤️ Social Interactions: Like and comment on posts with real-time updates
• 👥 Following System: Follow/unfollow users with live follower counts
• 🔔 Real-time Notifications: Instant notifications for likes, comments, and new followers

Advanced Features

• 💬 Direct Messaging: Real-time 1:1 chat with message history and context menus
• 📈 Trending Algorithm: Score-based trending posts with time decay
• 🔍 Explore Page: Discover trending posts, popular users, and latest content
• 🎯 User Recommendations: Intelligent user suggestions based on mutual connections
• ⚡ Search System: Real-time user search with debounced queries
• 🎨 Modern UI/UX: Glassmorphism design with smooth animations and transitions
• 🌙 Theme Support: Light/dark mode with system preference detection
• 📱 Responsive Design: Mobile-first design with desktop enhancements
• 🔄 Real-time Updates: Live updates using Supabase Realtime subscriptions

Built With

• - SvelteKit 5 with modern runes syntax and server-side rendering
• - JSDoc type annotations for type safety without TypeScript overhead
• - PostgreSQL database with real-time subscriptions, auth, and storage
• - Tailwind CSS v4 with utility-first styling
• - Beautiful component library built on Tailwind CSS
• - High-performance virtualization for rendering large lists
• - Ultra-fast JavaScript runtime and package manager
• - Beautiful, customizable SVG icons
• - Modern JavaScript utility library for data manipulation
• - Production-ready motion library for React and Svelte
• - Lightning-fast build tool with hot module replacement
• - Seamless deployment and hosting platform

˄ back to top

Installation

Get a local copy up and running with these simple steps.

Prerequisites

• Bun (recommended) or Node.js 18+

  curl -fsSL https://bun.sh/install | bash

  or

  npm install -g npm@latest

• Supabase Account - Sign up at supabase.com

Installation Steps

1. Clone the repository

   git clone https://github.com/soumikdas/Likey.git

2. Navigate to project directory

   cd Likey

3. Install dependencies

   bun install
   # or
   npm install

4. Set up environment variables

   cp .env.example .env.local

   Fill in your Supabase credentials:

   PUBLIC_SUPABASE_URL=your_supabase_project_url
   PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

5. Set up database schema

   Option A: Using Supabase CLI (Recommended)

   # Install Supabase CLI
   bun install -g supabase
   
   # Link to your project
   supabase link --project-ref YOUR_PROJECT_REF
   
   # Deploy schema
   supabase db push

   Option B: Manual Setup

   • Copy contents of database-setup.sql
   • Run in Supabase SQL Editor

6. Start development server

   bun run dev
   # or
   npm run dev

7. Open your browser and navigate to http://localhost:5173

˄ back to top

Usage

🚀 Getting Started

1. Create Account: Sign up with email and password
2. Set Up Profile: Add display name, username, bio, and profile picture
3. Explore Content: Browse trending posts and discover new users
4. Start Posting: Share photos with captions and engage with the community
5. Build Network: Follow interesting users and get recommendations

📱 Core Workflows

Content Creation:

• Upload multiple images per post with automatic compression
• Add captions and share with your followers
• Real-time post visibility in followers' feeds

Social Interaction:

• Like and comment on posts with instant updates
• Follow/unfollow users with live count updates
• Receive real-time notifications for all interactions

Discovery:

• Explore trending posts based on engagement algorithms
• Find new users through intelligent recommendations
• Search users by username or display name

Messaging:

• Send direct messages with real-time delivery
• Edit messages within 5 minutes of sending
• Forward messages to other conversations
• Context menu for message actions

Profile Management:

• Customize profile with bio, profile picture, and theme preferences
• View followers, following, and post statistics
• Manage account settings and privacy

˄ back to top

🏗️ Architecture

Tech Stack Details

• Frontend: SvelteKit 5 with modern runes syntax ($state, $derived, $effect)
• Backend: Supabase PostgreSQL with Row Level Security (RLS)
• Real-time: Supabase Realtime for live updates
• Storage: Supabase Storage for image hosting
• Styling: Tailwind CSS v4 with DaisyUI components
• Icons: Lucide Svelte for consistent SVG icons
• Build: Vite with SWC compiler for optimal performance
• Runtime: Bun for development and package management
• Deployment: Vercel with automatic deployments

Project Structure

src/
├── lib/
│   ├── components/          # Reusable Svelte components
│   │   ├── Navigation.svelte     # Top navigation with auth state
│   │   ├── BottomNavigation.svelte # Mobile navigation
│   │   ├── Post.svelte           # Post component with interactions
│   │   ├── Feed.svelte           # Virtualized infinite scroll feed
│   │   ├── VirtualizedPostList.svelte # Common virtualized list component
│   │   ├── UserCard.svelte       # User profile cards
│   │   ├── explore/              # Explore page components
│   │   │   ├── TrendingSection.svelte
│   │   │   ├── PeopleSection.svelte
│   │   │   └── LatestSection.svelte
│   │   └── Modals/               # Authentication and post modals
│   ├── composables/        # Reusable business logic
│   │   └── useFollow.js          # Centralized follow/unfollow logic
│   ├── auth.js             # Authentication logic
│   ├── supabase.js         # Supabase client and utilities
│   ├── stores.js           # Centralized state management
│   ├── notifications.js    # Real-time notification system
│   ├── messages.js         # Direct messaging API
│   ├── search.js           # Search and trending algorithms
│   └── utils.js            # Utility functions
├── routes/                 # SvelteKit file-based routing
│   ├── +layout.svelte           # Main app layout
│   ├── +page.svelte             # Home feed
│   ├── profile/[username]/      # Dynamic user profiles
│   ├── post/[id]/               # Individual post pages
│   ├── messages/                # Messaging interface
│   ├── notifications/           # Notifications page
│   ├── explore/                 # Discovery and trending
│   └── settings/                # User settings
└── app.css                 # Global styles with Tailwind

Database Schema

Core Tables:

• profiles - User profile information
• posts - User posts with metadata
• post_images - Multiple images per post
• likes - Post likes with user tracking
• comments - Post comments with threading support
• follows - User follow relationships
• notifications - Real-time notification system
• conversations - Direct message conversations
• messages - Individual chat messages

Advanced Features:

• trending_posts - Algorithmic trending calculation
• user_recommendations - Intelligent user suggestions
• Row Level Security (RLS) on all tables
• Real-time subscriptions for live updates
• Automated triggers for notification generation

˄ back to top

🔒 Security Features

Authentication & Authorization

• Supabase Auth: Industry-standard authentication with JWT tokens
• Row Level Security: Database-level access control for all tables
• Profile Protection: Users can only modify their own data
• Secure Sessions: Automatic session management with refresh tokens

Data Security

• Input Validation: Comprehensive validation on all user inputs
• Image Security: File type validation and automatic compression
• SQL Injection Protection: Parameterized queries through Supabase
• CSRF Protection: Built-in protection through Supabase client

Privacy Features

• Conversation Privacy: Only participants can access message threads
• Profile Visibility: Configurable privacy settings
• Secure File Upload: Validated image uploads with size limits
• Real-time Security: RLS policies applied to real-time subscriptions

˄ back to top

⚡ Performance

Optimization Features

• Virtualized Lists: Smart virtualization using TanStack Virtual for high-performance rendering of large post feeds
  • Automatic threshold-based activation (50+ posts for feed, 20-30+ for other sections)
  • Seamless switching between regular and virtualized modes
  • Optimized memory usage and smooth scrolling for thousands of posts
• Infinite Scroll: Efficient pagination for large datasets with virtualized loading
• Image Compression: Automatic client-side image optimization
• Real-time Efficiency: Selective subscriptions for relevant data only
• Responsive Images: Multiple resolutions for different screen sizes
• Code Splitting: Route-based code splitting with SvelteKit

Modern Web Standards

• SvelteKit 5: Latest framework features with optimal bundle sizes
• Vite Build: Lightning-fast development and production builds
• Modern CSS: Tailwind CSS v4 with advanced features
• Progressive Enhancement: Works without JavaScript for core features

˄ back to top

🚀 Deployment

Vercel (Recommended)

1. Connect Repository

   • Push code to GitHub
   • Import project in Vercel dashboard

2. Environment Variables

   PUBLIC_SUPABASE_URL=your_project_url
   PUBLIC_SUPABASE_ANON_KEY=your_anon_key
   

3. Deploy

   • Automatic deployments on every push to main
   • Preview deployments for pull requests

Manual Deployment

1. Build the project

   bun run build

2. Preview locally

   bun run preview

3. Deploy to your platform using the generated build artifacts

˄ back to top

🌟 Key Innovations

• Modern Svelte 5: Utilizes latest Svelte features including runes and modern syntax
• Real-time Everything: Live updates for posts, messages, notifications, and user interactions
• Intelligent Algorithms: Score-based trending and recommendation systems
• Mobile-First Design: Optimized for mobile with progressive desktop enhancement and fixed navigation
• Type Safety: Comprehensive JSDoc annotations without TypeScript overhead
• Performance Optimized: Advanced virtualization, infinite scroll, image compression, and efficient real-time subscriptions
• Modern UI/UX: Glassmorphism design with smooth animations, branded color palette, and responsive navigation
• Composables Architecture: Reusable business logic with the useFollow composable eliminating code duplication across components
• Production Ready: Complete with security, error handling, and deployment configuration

˄ back to top

Contributing

Contributions make the open source community an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

Development Setup

1. Fork the Project
2. Create your Feature Branch

   git checkout -b feature/AmazingFeature

3. Install dependencies

   bun install

4. Set up your local environment following the installation guide
5. Make your changes and test thoroughly
6. Commit your Changes

   git commit -m 'Add some AmazingFeature'

7. Push to the Branch

   git push origin feature/AmazingFeature

8. Open a Pull Request

Development Guidelines

• Follow Svelte 5 modern syntax (use $state, $derived, $effect)
• Use JSDoc for type annotations
• Test your changes across different screen sizes
• Ensure real-time features work correctly
• Follow the existing code style and component patterns

˄ back to top

License

Distributed under the MIT License. See LICENSE.txt for more information.

˄ back to top

Contact

• LinkedIn Profile
• Portfolio Site
• Instagram Handle

Project Link: https://github.com/soumikdas/Likey

~ Check out my other projects: https://github.com/FalconEthics

˄ back to top

Acknowledgments

This project showcases modern full-stack development with cutting-edge technologies. It demonstrates expertise in:

• Modern Frontend Development: SvelteKit 5, Tailwind CSS, and responsive design
• Real-time Applications: Supabase Realtime for live user interactions
• Database Design: PostgreSQL with Row Level Security and complex relationships
• Performance Optimization: Infinite scroll, image compression, and efficient data loading
• User Experience: Mobile-first design with progressive enhancement
• Production Deployment: Vercel integration with CI/CD workflows

Perfect for learning modern web development patterns and building production-ready social applications.

˄ back to top