Full-Stack Twitter Clone

This project is a comprehensive, feature-rich social media platform inspired by X (formerly Twitter). It demonstrates a modern full-stack architecture designed for performance, scalability, and seamless user experience.

🚀 Key Features

• Real-time Interactions: Leveraging Pusher Channels for instantaneous updates on likes, replies, and reposts without page refreshes.
• Secure Authentication: Integrated NextAuth.js supporting multi-provider OAuth (Google & GitHub) and robust session management.
• Dynamic Content Feed: A responsive timeline with support for hashtags, user mentions, and interactive media.
• Scalable Media Handling: Optimized image and video uploads using Vercel Blob Storage for lightning-fast content delivery.
• Real-time Notifications: Immediate feedback for user engagements to keep the community active.
• Advanced Social Graph: Comprehensive follow/unfollow system and personalized user profiles.

🛠️ Technical Implementation

Core Stack

• Framework: Next.js (App Router) with TypeScript for a type-safe, performant frontend and serverless backend.
• Styling: Tailwind CSS for a sleek, responsive UI following modern design principles.
• Database: PostgreSQL (Production) / SQLite (Development) managed via Prisma ORM.
• Real-time Engine: Pusher for WebSocket-based live updates.
• Storage: Vercel Blob for efficient CDN-backed media management.

Architecture Highlights

The application follows a clean local-first architecture where UI updates are optimistically reflected while the backend processes requests. The database schema is meticulously designed to handle complex relationships between users, posts, and engagements efficiently.

📂 Project Structure

• src/app/: Modern Next.js App Router for hierarchical routing and server components.
• src/components/: Modular, reusable React components maintaining UI consistency.
• src/lib/: Unified service layer for authentication, database access, and third-party integrations.
• prisma/: Data models defining the core entities and their relationships.

This project was developed as part of the Web Services course (HW5) at National Taiwan University.