T_hub

T_hub is a modern, responsive social media feed web application built with React and Vite. It features a visually appealing UI inspired by popular social platforms, with support for stories, posts, likes, comments, user suggestions, and more. The project uses Tailwind CSS for styling and includes a mobile-friendly layout.

---

Features

• Stories Carousel: Horizontal scrollable stories with viewed/unviewed states.
• Posts Feed: Each post displays user info, image, likes, comments, and time.
• Like, Comment, and Bookmark: Interactive icons for user engagement.
• Create Post Modal: Floating action button and modal for creating new posts.
• Responsive Design: Optimized for both desktop and mobile devices.
• User Suggestions: Sidebar with suggested users to follow.
• Modern UI: Uses gradients, glassmorphism, and smooth transitions.
• ESLint Integration: Enforced code quality with recommended rules and React hooks linting.

---

Tech Stack

• React 19
• Vite (for fast development and build)
• Tailwind CSS (via CDN in index.html)
• Framer Motion (for animations)
• React Icons (for iconography)
• ESLint (with custom config)
• JavaScript (ES2020+)

---

Getting Started

Prerequisites

• Node.js (v18 or higher recommended)
• npm

Installation

1. Install dependencies:

   npm install

2. Start the development server:

   npm run dev

3. Open your browser and navigate to the local server URL (usually http://localhost:5173).

Build for Production

npm run build

Preview Production Build

npm run preview

---

Project Structure

T_hub/
│
├── public/                # Static assets (vite.svg)
├── src/
│   ├── App.jsx            # Main application component (UI logic)
│   ├── main.jsx           # Entry point
│   ├── App.css            # (empty, styles via Tailwind)
│   └── index.css          # (empty, styles via Tailwind)
├── index.html             # HTML template, includes Tailwind CDN
├── package.json           # Project metadata and scripts
├── vite.config.js         # Vite configuration
├── eslint.config.js       # ESLint configuration
└── README.md              # Project documentation

---

Customization

• Styling: Tailwind CSS is included via CDN. You can add custom styles in App.css or index.css if needed.
• Data: Stories and posts are currently hardcoded in App.jsx for demo purposes. Integrate with a backend or API for dynamic content.
• Icons: Uses react-icons for a wide variety of icon options.

---

Linting

Run ESLint to check for code issues:

npm run lint

---

Credits

• Vite
• React
• Tailwind CSS
• React Icons
• Framer Motion

---

License

This project is for educational and demonstration purposes.