Skip to content
/ Better-Linkedin Public

A comprehensive React-powered redesign of LinkedIn that addresses core UX issues through functional minimalism, intelligent content organization, and thoughtful micro-interactions. Built with TypeScript, TailwindCSS, and Framer Motion.

better-linked-in.vercel.app/
1 star 0 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

Mrigank005/Better-Linkedin

BranchesTags

Repository files navigation

Better LinkedIn - Complete Modern Redesign

A comprehensive React-powered redesign of LinkedIn that addresses core UX issues through functional minimalism, intelligent content organization, and thoughtful micro-interactions. Built with TypeScript, TailwindCSS, and Framer Motion.

Live Demo

React TypeScript TailwindCSS License

🌐 Live Demo

View Live Project →

Experience the complete redesign in action at: https://better-linked-in.vercel.app/

📋 Table of Contents

🎯 Overview

Better LinkedIn reimagines the professional networking platform with a focus on reducing cognitive load, improving information hierarchy, and creating a more enjoyable user experience. This redesign addresses common pain points in the current LinkedIn interface while maintaining professional aesthetics and introducing modern interaction patterns.

Why This Redesign?

Current LinkedIn Problems:

  • ❌ Cluttered interface with competing visual elements
  • ❌ Hidden features requiring multiple clicks (modals, dropdowns)
  • ❌ Inconsistent navigation patterns across sections
  • ❌ Overwhelming notifications and feed items
  • ❌ Poor content categorization and filtering

Better LinkedIn Solutions:

  • ✅ Clean, card-based layouts with clear visual hierarchy
  • ✅ Direct actions (inline post creation, instant filters)
  • ✅ Tabbed navigation for logical content grouping
  • ✅ Persistent sidebars for quick access to key features
  • ✅ Smart filtering with visual feedback
  • ✅ Thoughtful micro-interactions and smooth transitions

🎨 Design Philosophy

Core Principles

1. Functional Minimalism

Every element has a clear purpose. No decorative clutter—only purposeful design that guides users naturally through their tasks.

2. Professional Aesthetics

Modern, clean interface that respects LinkedIn's professional context while introducing warmth through considered color choices and spacing.

3. Welcoming Engagement

Interactions feel responsive and delightful without being distracting. Subtle animations provide feedback without slowing users down.

4. Information Hierarchy

Content is organized using:

  • Cards for discrete units of information
  • Tabs for categorizing related content
  • Sticky sidebars for persistent access to key features
  • Visual badges for important metadata (counts, states)

🎭 Design Language

Color System

Primary Colors:

  • LinkedIn Blue (#0A66C2): Primary actions, links, brand elements
  • LinkedIn Blue Light (#378FE9): Hover states, gradients
  • LinkedIn Blue Dark (#004182): Dark mode accents

Semantic Colors:

  • Success Green (#057642): Confirmations, positive actions
  • Warning Yellow (#F5C75D): Alerts, important notices
  • Error Red (#CC1016): Errors, destructive actions

Neutral Palette:

  • Light mode: White backgrounds, gray borders (#E0E0E0)
  • Dark mode: Dark gray backgrounds (#1B1F23), lighter text

Typography

Font Family: System fonts for optimal performance

-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif

Hierarchy:

  • H1 (24px, bold): Page titles
  • H2 (20px, bold): Section headers
  • Body (14px): Main content
  • Small (12px): Metadata, labels

Spacing & Layout

Grid System:

  • Three-column layout on desktop (left sidebar, main content, right sidebar)
  • Two-column layout on tablet (main content, right sidebar)
  • Single-column layout on mobile (stacked)

Spacing Scale: 4px base unit (4, 8, 12, 16, 24, 32, 48, 64)

Interaction Patterns

Micro-interactions:

  • Hover effects: Subtle elevation (shadow), color shifts
  • Tab transitions: Smooth underline animation (300ms)
  • Card animations: Scale on hover (1.02x), fade-in on load
  • Loading states: Skeleton screens, progress indicators

Motion Design:

  • Easing: ease-out for entrances, ease-in-out for transitions
  • Duration: 200-300ms for most interactions
  • No motion longer than 500ms to maintain responsiveness

Components

Card Design:

  • White background (light) / Dark gray (#1B1F23) in dark mode
  • 8px border radius
  • Subtle shadow: 0 1px 3px rgba(0,0,0,0.1)
  • Hover shadow: 0 4px 12px rgba(0,0,0,0.15)

Buttons:

  • Primary: LinkedIn Blue background, white text
  • Secondary: White background, blue border, blue text
  • Ghost: Transparent background, gray text, gray border
  • All buttons: 6px border radius, 10px vertical padding

Badges:

  • Pill shape (full border radius)
  • Colored backgrounds with contrasting text
  • Used for counts, tags, statuses

📄 Pages & Features

1. Home Page (/)

Purpose: Main feed where users consume content and create posts

Key Features:

  • Direct Post Input: Inline text area with emoji/media buttons—no modal required
  • Feed Tabs: "For You" (algorithm) vs "Following" (chronological)
  • Reaction System: 6 inline reactions (Like, Celebrate, Support, Love, Insightful, Curious)
  • Left Sidebar: MeCard with profile stats, quick actions (Messages, Notifications)
  • Right Sidebar: Job recommendations, connection suggestions

UX Improvements:

  • Posts appear instantly after creation (optimistic updates)
  • Reactions show hover picker without modal
  • Infinite scroll with loading indicators

Access:

  • Direct: https://better-linked-in.vercel.app/
  • UI: Click LinkedIn logo or "Home" nav icon

2. Jobs Page (/jobs)

Purpose: Job search and application management

Key Features:

  • 4-Tab Navigation: Recommended | Saved | Applications | Alerts
  • Persistent Filter Panel: Right sidebar with date, experience, salary filters
  • Filter Count Badges: Visual indicator of active filters
  • EasyApply Labels: Quick identification of one-click applications
  • Job Cards: Company logo, title, location, salary, applicant count

UX Improvements:

  • Filters persist across tabs (no reset when switching)
  • Clear visual feedback for applied filters
  • Salary range shown upfront (transparency)

Access:

  • Direct: https://better-linked-in.vercel.app/jobs
  • UI: "Jobs" icon in top navigation

3. My Network Page (/mynetwork)

Purpose: Connection management and network growth

Key Features:

  • 3-Tab Organization: Invitations | Suggestions | Connections
  • Mutual Connection Indicators: Shows shared connections for context
  • Bulk Actions: Accept/Ignore invitations quickly
  • Search & Filter: Find connections by name, company, location

UX Improvements:

  • Invitations prominently displayed (no hunting)
  • Mutual connections build trust for new connections
  • One-click accept/ignore without confirmation modals

Access:

  • Direct: https://better-linked-in.vercel.app/mynetwork
  • UI: "Network" icon in top navigation, or "My Network Page" link in MeCard

4. Messaging Page (/messaging)

Purpose: Direct messaging and conversations

Key Features:

  • Two-Pane Layout: 360px conversation list + expandable chat
  • Focused/All Toggle: Filter unread/pinned messages
  • Online Indicators: Green dot for active users
  • Rich Input Area: Emoji picker, file attachments, calendar scheduling
  • Smart Timestamps: "Just now", "5m ago", "Yesterday", etc.

UX Improvements:

  • Focused mode reduces noise (only important conversations)
  • Messages load in reverse chronological order (latest at bottom)
  • Auto-expanding textarea (no overflow or scrolling)

Access:

  • Direct: https://better-linked-in.vercel.app/messaging
  • UI: "Messaging" icon in top navigation, or "Messages" button in MeCard

5. Notifications Page (/notifications)

Purpose: Activity feed for all account notifications

Key Features:

  • 4-Tab Categorization: All | Mentions & Reactions | Network | Job Updates
  • Mark All as Read: Clear unread states with one click
  • Unread Indicators: Blue dot + highlighted background
  • Type-Based Icons: 💬 comments, ❤️ likes, 🔔 mentions, etc.
  • Actor Previews: Shows who performed the action with avatar

UX Improvements:

  • Categorized tabs reduce overwhelm
  • Visual unread states are immediately clear
  • Actions previewed in-place (no need to click through)

Access:

  • Direct: https://better-linked-in.vercel.app/notifications
  • UI: "Notifications" bell icon in top navigation, or "Notifications" button in MeCard

6. Profile Page (/profile)

Purpose: User profile with experience, education, skills

Key Features:

  • Horizontal Tab Navigation: About | Experience | Education | Skills | Recommendations | Activity
  • Profile Strength Indicator: Progress bar with percentage
  • Banner + Avatar: Professional visual header
  • Edit Mode: Toggle to edit profile sections
  • Verification Badge: Blue checkmark for verified accounts

UX Improvements:

  • Tabs organize lengthy profiles (no endless scrolling)
  • Profile strength motivates completion
  • Edit mode clearly separated from view mode

Access:

  • Direct: https://better-linked-in.vercel.app/profile
  • UI: Click your name/avatar in MeCard or top navigation "Me" dropdown

7. Games Page (/games)

Purpose: Gamification hub for puzzles and challenges

Key Features:

  • Daily Puzzle Cards: Queens, Crossword, Tango
  • Streak Tracking: Visual calendar of completion
  • Leaderboards: Top performers, friend rankings
  • Achievement Badges: Unlock rewards for milestones

UX Improvements:

  • Gamification increases engagement without being intrusive
  • Streaks provide motivation (dopamine loop)
  • Social leaderboards add friendly competition

Access:

  • Direct: https://better-linked-in.vercel.app/games
  • UI: Top navigation "Me" dropdown

8. Search Results Page (/search?q={query})

Purpose: Universal search across jobs, people, companies, posts, groups

Key Features:

  • 5-Tab Navigation: Jobs | People | Companies | Posts | Groups
  • Overflow Handling: "See more" dropdown for additional tabs
  • Dynamic Filters: Panel changes based on active tab
    • Jobs: Date, experience, salary range slider
    • People: Connections, location, company/school autocomplete
    • Companies: Industry checkboxes
  • Filter Count Badge: Shows number of active filters
  • Result Cards: Type-specific layouts (job cards, people cards, etc.)

UX Improvements:

  • Filters adapt to content type (relevant options only)
  • Clear visual feedback for applied filters
  • Tab overflow prevents horizontal scrolling

Access:

  • Direct: https://better-linked-in.vercel.app/search?q=software engineer
  • UI: Enter query in top navigation search bar

9. Company/University Page (/company/:id)

Purpose: Organization profiles with jobs, employees, culture

Key Features:

  • Professional Header: Banner, logo, tagline, follower count
  • Follow Toggle: Track companies you're interested in
  • 5-Tab Content: Home (posts) | About | Jobs | People (employees) | Life (culture)
  • Similar Companies: Right sidebar suggestions
  • Company Insights: Employee count, hiring trends

UX Improvements:

  • All company info consolidated in one place
  • Life tab showcases culture (images/videos)
  • Employee directory helps networking

Access:

  • Direct: https://better-linked-in.vercel.app/company/123
  • UI: Click company name from job posting, search result, or post

10. Settings & Privacy Page (/settings)

Purpose: Account management and privacy controls

Key Features:

  • Main Page: Grid of 6 category cards
    • 👤 Account & Sign-in
    • 🔒 Profile Privacy
    • 💾 Data Privacy
    • ✉️ Communications
    • 📢 Advertising
    • ⭐ Premium Features
  • Sticky Search Bar: Find specific settings quickly
  • Sub-Pages: Detailed settings with breadcrumb navigation
  • Control Types:
    • Toggle switches for binary options
    • Dropdowns for multi-choice selections
    • Link buttons for edit pages
  • Plain-Language Explanations: No jargon, clear descriptions

UX Improvements:

  • Two-tier navigation (category → settings) reduces cognitive load
  • Search functionality for power users
  • Visual card grid makes options scannable
  • Privacy controls prominently displayed (trust building)

Access:

  • Direct: https://better-linked-in.vercel.app/settings
  • UI: Top navigation "Me" dropdown → "Settings"

🧭 Navigation Guide

Primary Navigation (Top Bar)

Icon Label Destination Keyboard Shortcut
🏠 Home / Alt+H
💼 Jobs /jobs Alt+J
👥 Network /mynetwork Alt+N
💬 Messaging /messaging Alt+M
🔔 Notifications /notifications Alt+B (Bell)
👤 Me Dropdown menu Alt+U (User)

Me Dropdown Menu

  • View Profile → /profile
  • Settings & Privacy → /settings
  • Help Center → External link
  • Sign Out → Authentication flow

MeCard Quick Actions

  • Messages → /messaging
  • Notifications → /notifications
  • My Network Page → /mynetwork
  • Copy Profile URL → Copies /profile to clipboard

Footer Links (Not Implemented)

  • About, Accessibility, Help Center, Privacy, Terms, Advertising, etc.

🛠 Tech Stack

Frontend Framework

  • React 18: Concurrent rendering, automatic batching
  • TypeScript 5: Full type safety, better DX
  • React Router v6: Client-side routing with data loaders

Styling & Animation

  • TailwindCSS 3: Utility-first CSS framework
  • Framer Motion 10: Smooth animations and gestures
  • PostCSS: CSS transformations and optimizations

State Management

  • Zustand: Lightweight state management (planned for complex state)
  • React Context: Theme management, auth state
  • React Query (planned): Server state caching and synchronization

Build Tools

  • Vite 5: Fast HMR, optimized production builds
  • ESBuild: Ultra-fast JavaScript bundling
  • TypeScript Compiler: Type checking and transpilation

Development Tools

  • ESLint: Code quality and consistency
  • Prettier: Code formatting (not configured yet)
  • Git: Version control

Performance Optimizations

  • Code splitting with React.lazy()
  • Image lazy loading with IntersectionObserver
  • Virtual scrolling for long lists (planned)
  • Memoization with React.memo() and useMemo()

🚀 Getting Started

Prerequisites

  • Node.js: v18 or higher
  • npm or yarn: Package manager

Installation

# Clone the repository
git clone https://github.com/Mrigank005/Better-Linkedin.git
cd better-linkedin

# Install dependencies
npm install

# Start development server
npm run dev

The app will open at http://localhost:3000

Live Demo: Visit https://better-linked-in.vercel.app/ to see the deployed version.

Development Commands

# Start dev server with HMR
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Type checking
npm run type-check

# Lint code
npm run lint

📁 Project Structure

better-linkedin/
├── public/                  # Static assets
├── src/
│   ├── components/
│   │   ├── layout/         # Layout components
│   │   │   ├── TopNavigation.tsx
│   │   │   ├── ThreeColumnLayout.tsx
│   │   │   ├── StickyLeftColumn.tsx
│   │   │   └── StickyRightColumn.tsx
│   │   └── shared/         # Reusable components
│   │       ├── MeCard.tsx
│   │       ├── TabNavigation.tsx
│   │       ├── PostCard.tsx
│   │       ├── JobCard.tsx
│   │       └── ConnectionCard.tsx
│   ├── pages/              # Page components
│   │   ├── HomePage.tsx
│   │   ├── JobsPage.tsx
│   │   ├── MyNetworkPage.tsx
│   │   ├── MessagingPage.tsx
│   │   ├── NotificationsPage.tsx
│   │   ├── ProfilePage.tsx
│   │   ├── GamesPage.tsx
│   │   ├── SearchResultsPage.tsx
│   │   ├── CompanyPage.tsx
│   │   └── SettingsPage.tsx
│   ├── context/            # React Context providers
│   │   └── ThemeContext.tsx
│   ├── hooks/              # Custom React hooks
│   │   ├── useStickySidebar.ts
│   │   ├── useTabs.ts
│   │   └── useInfiniteScroll.ts
│   ├── types/              # TypeScript definitions
│   │   └── index.ts
│   ├── utils/              # Utilities and constants
│   │   └── constants.ts
│   ├── App.tsx             # Root component with routing
│   ├── main.tsx            # Entry point
│   └── index.css           # Global styles
├── .gitignore
├── package.json
├── tsconfig.json           # TypeScript configuration
├── vite.config.ts          # Vite configuration
├── tailwind.config.js      # Tailwind configuration
├── postcss.config.js       # PostCSS configuration
└── README.md

🎨 Customization

Theme Colors

Edit tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        linkedin: {
          blue: '#0A66C2',          // Change primary brand color
          'blue-light': '#378FE9',
          'blue-dark': '#004182',
        },
        // Add custom colors
        brand: {
          primary: '#yourcolor',
        },
      },
    },
  },
};

Layout Constants

Edit src/utils/constants.ts:

export const NAV_HEIGHT = 52;        // Top navigation height
export const STICKY_OFFSET = 72;     // Sticky sidebar offset
export const SIDEBAR_WIDTH = 240;    // Left/right sidebar width

Typography

Edit tailwind.config.js:

fontSize: {
  'h1': '24px',
  'h2': '20px',
  'h3': '16px',
  'body': '14px',
  'small': '12px',
}

Animation Durations

Edit Framer Motion transitions:

transition={{ duration: 0.3, ease: 'easeOut' }}

♿ Accessibility

WCAG AA Compliance

  • Color Contrast: All text meets 4.5:1 minimum ratio
  • Keyboard Navigation: All interactive elements accessible via Tab/Enter
  • Focus Indicators: Visible focus outlines (blue ring)
  • Screen Readers: ARIA labels on icons and interactive elements
  • Semantic HTML: Proper heading hierarchy, landmarks

📱 Browser Support

  • Chrome: 90+ ✅
  • Firefox: 88+ ✅
  • Safari: 14+ ✅
  • Edge: 90+ ✅
  • Mobile: iOS 14+, Android 10+ ✅

📈 Performance

Lighthouse Scores (Target)

  • Performance: 95+
  • Accessibility: 100
  • Best Practices: 95+
  • SEO: 90+

Optimizations

  • Code Splitting: Route-based lazy loading
  • Image Optimization: WebP format, lazy loading, responsive srcset
  • CSS Purging: Unused Tailwind classes removed in production
  • Tree Shaking: Dead code elimination
  • Minification: JavaScript and CSS compressed
  • Caching: Service worker (planned)

🔮 Future Enhancements

  • Real-time messaging with WebSockets
  • Progressive Web App (PWA) support
  • Offline mode with service workers
  • Advanced search with Elasticsearch
  • Video posts and live streaming
  • AI-powered content recommendations
  • Analytics dashboard
  • Internationalization (i18n)
  • Unit and E2E tests (Jest, Playwright)

📄 License

MIT License - feel free to use this project for learning or as a foundation for your own redesigns.

👨‍💻 Author

Built as a demonstration of modern React best practices, UX design principles, and component-driven development.

Key Learnings:

  • Component architecture and reusability
  • TypeScript for type-safe development
  • CSS-in-JS vs utility-first CSS (Tailwind)
  • Animation performance optimization
  • Accessible web development
  • Design system creation

🙏 Acknowledgments

  • LinkedIn for the original platform inspiration
  • React team for excellent documentation
  • TailwindCSS community for utilities and plugins
  • Framer Motion for animation primitives

⭐ If you found this redesign helpful, please star the repository!

About

A comprehensive React-powered redesign of LinkedIn that addresses core UX issues through functional minimalism, intelligent content organization, and thoughtful micro-interactions. Built with TypeScript, TailwindCSS, and Framer Motion.

better-linked-in.vercel.app/

Resources

Readme
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages