ConvoHub GenZ Chat Application

A real-time chat application targeted for Gen Z, enabling users to discuss trending topics and hot news. Built with modern technologies to provide a seamless chatting experience.

Features

• 🗨️ Real-time Chat: Messages update instantly without refreshing the page.
• 📈 Trending Topics: Displays the most trending topics to spark conversations.
• 👥 Active Users: Shows the count of users currently online.
• 🔒 Secure Authentication: Powered by NextAuth.js for user authentication.
• 🔔 Real-time Updates: Integrated with Supabase for real-time message syncing.

Tech Stack

• Frontend: Next.js 13, Tailwind CSS
• Backend: Supabase (Database + Realtime)
• Authentication: NextAuth.js
• WebSocket: Socket.io for active user tracking
• Database: PostgreSQL (via Supabase)

Screenshots

Front

Google Login

User Dashboard

PostgreSQL (via Supabase)

Server

Prerequisites

• Node.js and npm installed

• Supabase account

• A PostgreSQL table named messages

  Steps

1. Clone the repository: ```bash git clone https://github.com/Shreyansh301/convohub-web-front.git
2. Install dependencies: ```bash npm install
3. Set up Supabase:

• Create a Supabase project.
• Enable Realtime for the messages table.
• Add a table named messages with the following schema: ```bash create table public.messages ( id bigint generated always as identity primary key, name text not null, message text not null, created_at timestamp default now() );

4. Create a .env.local file in the root of the project and add the following environment variables: ```bash NEXTAUTH_SECRET=your-nextauth-secret NEXTAUTH_URL=http://localhost:3000 SUPABASE_URL=your-supabase-url SUPABASE_KEY=your-supabase-
5. Start the development server: ```bash npm run dev
6. Access the web app at http://localhost:3000.

Usage

• Sign in to access the dashboard.
• Chat in real-time with other active users.
• View trending topics and user counts.

Contributions are welcome! Please fork the repo and submit a pull request.