《What Happen》 is a comprehensive news aggregation platform that brings together information from multiple popular sources including social media, tech news, financial markets, and entertainment. Built with modern web technologies, it provides a clean, intuitive interface for staying updated with what's happening around the world.

• Multi-Platform Aggregation: Integrates news from 30+ platforms including Weibo, GitHub, Douban, Bilibili, and more
• Smart Categorization: Organized content across Technology, Finance, Social Media, Entertainment, and Sports
• Real-time Updates: Live data synchronization with automatic refresh capabilities
• Responsive Design: Optimized for desktop and mobile viewing experiences
• Dark/Light Theme: Seamless theme switching for comfortable reading
• Favorites System: Save and organize your preferred news sources and articles
• Interactive Components: Rich interactive elements including hover cards and detailed views
• Drag & Drop: Customizable layout with draggable news cards
• Search & Filter: Advanced filtering options for personalized content discovery

• Weibo Hot Search
• Baidu Hot Search
• Douyin Trending
• Zhihu Hot
• Kuaishou Hot

• GitHub Trending
• V2EX Latest
• IT Home News
• Solidot Updates
• 36Kr Tech News
• Juejin Articles

• Wall Street CN
• Hot Stock Updates
• JinShi Live
• Market Analysis

• Douban Movies/TV
• Bilibili Hot Videos
• Music Charts (KuGou, QQ Music)
• Gaming (LOL Esports)

• The Paper News
• Reference News
• People's Daily
• Sputnik News CN

• Frontend Framework: Nuxt 4 + TypeScript
• Build Tool: Vite 6.x
• Styling: TailwindCSS 4.x
• UI Components: Reka UI (shadcn/ui for Vue)
• State Management: Vue Composition API + Pinia-like composables
• Animations: GSAP + TailwindCSS animations
• Icons: Lucide Vue Next
• Date Handling: Day.js
• Drag & Drop: Vue Draggable Plus
• Notifications: Vue Sonner

• Node.js 18+
• Yarn 1.22+ (recommended) or npm

1. Clone the repository

   git clone https://github.com/LYX9527/what-happen.git
   cd what-happen

2. Install dependencies

   yarn install
   # or
   npm install

3. Environment setup

   # Copy environment template
   cp .env.example .env
   
   # Configure API endpoint (default: http://localhost:10010)
   VITE_API_BASE_URL=http://localhost:10010

4. Start development server

   yarn dev
   # or
   npm run dev

5. Open your browser Navigate to http://localhost:5173

If you prefer running with Docker:

git clone https://github.com/LYX9527/what-happen
cd what-happen/docker
# If you have docker-compose installed or the docker compose plugin installed
docker-compose up -d # or docker compose up -d
# If neither is installed
docker run -d --name what-happen-app --restart always -p 3001:3000 yltfspace/what-happen
# Access the app at http://localhost:3001

# Build for production
yarn build

# Preview production build
yarn preview

This frontend application requires a backend API service running on port 10010 (configurable). The API should provide:

• GET /platforms - Available news platforms configuration
• GET /news - News data with platform filtering support

interface NewsItem {
  id: string
  title: string
  url: string
  extra?: {
    info?: string
    time?: string
    rank?: number
    thumbnail?: { url: string }
    // ... additional metadata
  }
}

interface ApiResponse<T> {
  code: number
  msg: string
  data: T
}

# API Configuration
VITE_API_BASE_URL=http://localhost:10010  # Backend API URL

Edit app/pages/dashboard/index.vue to modify platform configurations:

const platformIcons = {
  weibo: WeiBo,
  github: Github,
  // Add your custom platforms
}

app/
├── api/           # API interfaces and configuration
├── components/    # Reusable Vue components
│   ├── ui/        # Base UI components
│   ├── NewsItems/ # News item components
│   └── icon/      # Platform icon components
├── composables/   # Vue composition functions
├── pages/         # Application pages
├── router/        # Vue Router configuration
└── lib/           # Utility functions

1. Create platform icon component in app/components/icon/
2. Add platform configuration in dashboard
3. Create custom news item component if needed in app/components/NewsItems/
4. Update API integration in app/api/news.ts

• Use TypeScript for type safety
• Follow Vue 3 Composition API patterns
• Implement responsive design with TailwindCSS
• Maintain consistent styling with existing components

We welcome contributions! Please see our Contributing Guidelines for details.

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

This project is licensed under the MIT License - see the LICENSE file for details.

• Issues: GitHub Issues
• Discussions: GitHub Discussions

• Thanks to all the news platforms for providing public APIs
• Built with love using Vue 3 and modern web technologies
• Inspired by the need for a unified news reading experience

• Support for 30+ news platforms
• Responsive design and dark mode
• Favorites and filtering system
• Real-time updates

For detailed changelog, see CHANGELOG.md