DevCollab Hub 🚀

A Developer Collaboration Platform for students to create/join projects, manage tasks, and collaborate through a unified interface.

Features

• Dashboard — Stats overview, activity feed, and personal task list
• Projects — Create and browse projects with status, progress, and team members
• Task Board — Kanban board (To Do / In Progress / Done) with add & move task functionality
• Team — Member directory with skills and online status
• Chat — Real-time-style group chat with multiple channels

Tech Stack

• React 18
• Vite
• CSS Modules (component-scoped CSS)

Getting Started

Prerequisites

• Node.js 18+ installed

Installation

# 1. Unzip the project
unzip devcollab-hub.zip
cd devcollab-hub

# 2. Install dependencies
npm install

# 3. Start development server
npm run dev

Then open http://localhost:5173 in your browser.

Build for Production

npm run build
npm run preview

Project Structure

src/
├── components/
│   ├── Sidebar.jsx / .css    → Navigation sidebar
│   ├── Topbar.jsx / .css     → Top header with search
│   ├── Dashboard.jsx / .css  → Home overview
│   ├── Projects.jsx / .css   → Project cards + create modal
│   ├── TaskBoard.jsx / .css  → Kanban task board
│   ├── Team.jsx / .css       → Team member directory
│   └── Chat.jsx / .css       → Group chat interface
├── data.js                   → Sample data (projects, tasks, team, messages)
├── App.jsx                   → Root component with tab routing
├── App.css                   → Layout styles
└── index.css                 → Global CSS variables & reset

Developed By

Ramesha G — New Horizon College of Engineering