DevConnect-AI

🧠 DevConnect AI

Build. Collaborate. Grow. Powered by AI.

A next-generation developer community platform where engineers share knowledge, collaborate on code, and get AI-assisted help — all in one place.

📌 Table of Contents

🚀 Overview

DevConnect AI is a full-stack developer community platform that unifies fragmented developer workflows — discussions, Q&A, collaboration, and AI-powered drafting help — into a single ecosystem.

🎯 Problem Statement

Developers today are scattered across:

There’s no single platform that combines all of this with built-in AI assistance. DevConnect AI solves that.

🧰 Tech Stack

Layer Technology
Framework Next.js 16 (App Router)
UI Library React 19
Styling Tailwind CSS v4 / CSS variables
Authentication Firebase Auth (Google + GitHub OAuth)
Database Firestore (Firebase)
Icons lucide-react
Markdown Rendering react-markdown + remark-gfm
AI Sarvam AI (Chat Completions API)

✨ Features

🔐 Authentication

🧑‍💻 Community

🤖 AI Features

🚪 Collaboration Rooms

📁 Project Structure

DevConnect-AI/
├── app/
│   ├── layout.js               # Root layout with AuthProvider
│   ├── page.js                 # Landing page (features tour)
│   ├── globals.css             # Global styles + markdown styles
│   ├── api/
│   │   ├── ai-draft/
│   │   │   └── route.js        # Sarvam AI-powered "Draft with AI" endpoint
│   │   ├── code-review/
│   │   │   └── route.js        # Code review endpoint (in progress)
│   │   └── rooms/
│   │       └── [roomId]/
│   │           └── summary/
│   │               └── route.js  # AI room summary endpoint
│   ├── dashboard/
│   │   └── page.js             # Main community feed (protected)
│   ├── login/
│   │   └── page.js             # Login with Google / GitHub
│   ├── rooms/
│   │   ├── page.js             # Rooms hub — list/create rooms (protected)
│   │   └── [roomId]/
│   │       └── page.js         # Room workspace — chat, notes, editor, call
│   ├── signup/
│   │   └── page.js             # Signup with Google / GitHub
│   ├── profile/
│   │   └── page.js             # User profile page
│   └── settings/
│       └── page.js             # Settings page
├── components/
│   ├── rooms/
│   │   ├── RoomCallControls.js # Voice/video/screen-share controls + camera preview
│   │   ├── RoomChat.js         # Real-time chat panel
│   │   ├── RoomCursorLayer.js  # Remote cursor/presence overlay
│   │   ├── RoomEditor.js       # Collaborative code editor
│   │   ├── RoomMembers.js      # Online member list
│   │   ├── RoomNotes.js        # Shared markdown notes
│   │   ├── RoomSummaryButton.js  # Generate/view summary button
│   │   └── RoomSummaryModal.js   # Markdown summary modal with backdrop blur
│   ├── dashboard/
│   │   ├── LeftSidebar.js      # Feed tabs + rooms nav
│   │   └── RightSidebar.js     # AI copilot + rooms promo widgets
│   ├── AIDraftAssistant.js     # "Draft with AI" prompt box + Sarvam AI call
│   ├── CodeEditorModal.js      # Modal for inserting formatted code blocks
│   ├── CodeReview.js           # Code review UI component
│   ├── Navbar.js
│   ├── ProtectedRoute.js       # Auth guard — redirects to /login if not authenticated
│   ├── ScrollToTop.js
│   └── ThemeToggle.js
├── context/
│   └── AuthContext.js          # Firebase auth state (Google + GitHub login/logout)
├── lib/
│   ├── firebase.js             # Firebase client initialization
│   ├── firebase-admin.js       # Firebase server-side initialization (for API routes)
│   ├── rooms.js                # Room CRUD + presence + summary helpers
│   └── webrtc.js               # WebRTC signaling + media stream management
├── .env.local                  # Environment variables (not committed)
├── .gitignore
├── package.json
└── README.md

✅ Prerequisites

Make sure you have the following installed before setting up:

Check your versions:

node -v
npm -v

⚙️ Local Setup

1. Fork the repository

Click the Fork button at the top right of this page to fork it to your GitHub account.

2. Clone your fork

git clone https://github.com/<your-username>/DevConnect-AI.git
cd DevConnect-AI

3. Install dependencies

npm install

This installs all dependencies, including react-markdown and remark-gfm used for rendering post content.

4. Set up Firebase (see section below)

5. Set up Sarvam AI (see section below)

6. Create your .env.local file

cp .env.example .env.local

Or create it manually and fill in your Firebase and Sarvam AI credentials (see Environment Variables).

7. Run the development server

npm run dev

Open http://localhost:3000 in your browser.

🔥 Firebase Setup

Step 1 — Create a Firebase project

  1. Go to Firebase Console
  2. Click Add project → give it a name → click through setup
  3. Once created, go to Project Settings (gear icon) → Your Apps
  4. Click Web (</>) → register the app → copy the config object

Step 2 — Enable Firestore

  1. In the left sidebar, go to Build → Firestore Database
  2. Click Create database → choose Start in test mode (for development)
  3. Select a region → click Done

Step 3 — Enable Authentication providers

  1. Go to Build → Authentication → Sign-in method
  2. Enable Google — click the toggle → save
  3. Enable GitHub:
    • Go to github.com/settings/developers
    • Click New OAuth App
    • Set Homepage URL to http://localhost:3000
    • Set Authorization callback URL to the one shown in Firebase (e.g. https://<your-project>.firebaseapp.com/__/auth/handler)
    • Copy the Client ID and Client Secret back into Firebase → save

Step 4 — Copy your Firebase config

From Project Settings → Your Apps → SDK setup and configuration, copy all the config values into your .env.local.

🤖 Sarvam AI Setup

The Draft with AI Assistant feature uses the Sarvam AI chat completions API.

  1. Sign up at sarvam.ai and generate an API key from your dashboard.
  2. Add the key to .env.local as SARVAM_API_KEY (see below).
  3. The API key is used server-side only, via app/api/ai-draft/route.js — it is never exposed to the browser.
  4. If you see a model deprecated error, check Sarvam’s docs for the current supported model names (e.g. sarvam-30b, sarvam-105b) and update the model field in route.js accordingly.

⚠️ Never commit your Sarvam API key. If a key is ever accidentally committed or shared, rotate it immediately from the Sarvam dashboard.

🔑 Environment Variables

Create a .env.local file in the root of the project with the following keys:

# Firebase
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project_id.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_project_id.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=abcname
NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET=deafult

# Sarvam AI (server-side only — do NOT prefix with NEXT_PUBLIC_)
SARVAM_API_KEY=your_sarvam_api_key

⚠️ Never commit .env.local to Git. It is already added to .gitignore.

Restart your dev server (npm run dev) after adding or changing any environment variable — Next.js only loads .env.local on startup.

All Firebase values are available in Firebase Console → Project Settings → Your Apps → SDK config.

🔥 Required Firestore Collections

The rooms feature uses these Firestore collections (created automatically on first use):

Collection Purpose
rooms/{roomId} Room metadata — title, description, language, members, createdBy, createdAt
rooms/{roomId}/messages/{messageId} Real-time chat messages
rooms/{roomId}/notes/{noteId} Shared markdown notes (one active note per room)
rooms/{roomId}/presence/{uid} Live presence — last heartbeat, cursor position, media state

No manual collection setup is required — Firestore creates these on first write.

▶️ Running the App

Command Description
npm run dev Start development server at localhost:3000
npm run build Build for production
npm run start Start production server
npm run lint Run ESLint

🗺️ App Routes

Route Description Protected
/ Landing page with features tour No
/login Login with Google or GitHub No
/signup Signup with Google or GitHub No
/dashboard Main community feed ✅ Yes
/rooms Collaboration rooms hub — list/create rooms ✅ Yes
/rooms/[roomId] Room workspace — chat, notes, editor, voice/video ✅ Yes
/profile User profile page ✅ Yes
/settings Settings page ✅ Yes
/api/ai-draft Server-side Sarvam AI draft endpoint N/A (API route)
/api/rooms/[roomId]/summary AI room summary generation endpoint N/A (API route)

Protected routes automatically redirect unauthenticated users to /login.

🚧 Current Status

This project is under active development. Here’s what’s done and what’s still in progress:

Feature Status
Landing page UI ✅ Done
Google OAuth login/signup ✅ Done
GitHub OAuth login/signup ✅ Done
User saved to Firestore on first login ✅ Done
Protected routes ✅ Done
Dashboard UI (feed, sidebar, layout) ✅ Done
Firestore CRUD for posts ✅ Done
Like system ✅ Done
Comment system (add/edit/delete) ✅ Done
Real-time updates ✅ Done
Markdown rendering for posts (headings, lists, code blocks) ✅ Done
In-post code editor / inserter ✅ Done
Draft with AI Assistant (Sarvam AI, question-only mode) ✅ Done
Collaboration Rooms — hub + workspace shell ✅ Done
Room chat (real-time, Firestore onSnapshot) ✅ Done
Room shared notes (markdown, auto-save) ✅ Done
Room collaborative code editor ✅ Done
Room voice/video/screen-share (WebRTC) ✅ Done
Room presence (members, cursors, heartbeat) ✅ Done
AI Room Summaries (Sarvam AI + markdown modal) ✅ Done
AI Code Review (Copilot) 🔄 In Progress

🤝 Contributing

Contributions are welcome! Here’s how to get started:

1. Fork and clone (as above)

2. Create a feature branch

git checkout -b feat/your-feature-name
# or for fixes:
git checkout -b fix/issue-description
# or for docs:
git checkout -b docs/what-you-updated

3. Make your changes and commit

git add .
git commit -m "feat: add post creation to dashboard"

Follow this commit convention:

4. Push and open a PR

git push origin feat/your-feature-name

Then open a Pull Request against the main branch of the original repo. In your PR description, reference the issue it closes:

Closes #<issue-number>

📄 License

ISC License — see LICENSE for details.

Made with ❤️ for the developer community