WorkspaceFlow is a full-stack real-time workspace for teams. It combines task planning, markdown docs, team chat, member management, analytics, and AI summaries in one product.
Live demo: https://workspace-flow.vercel.app
This is not a single-page demo. WorkspaceFlow covers the core parts of a production SaaS app:
- Authentication with email/password and OAuth providers
- Multi-tenant workspaces with roles
- Real-time collaboration with Socket.io
- Drag-and-drop task management
- Markdown documentation
- Team chat and presence
- Analytics dashboards
- AI-assisted summaries and task descriptions
- Database-backed APIs with Prisma and PostgreSQL
For a fresher portfolio, it shows frontend, backend, database design, real-time systems, authentication, AI integration, and deployment awareness in one project.
Create separate workspaces for teams or projects. Each workspace has its own tasks, members, docs, chat, activity, analytics, and integrations.
Manage tasks across To Do, In Progress, Review, and Done. Tasks support priority, labels, due dates, assignees, comments, and drag-and-drop ordering.
Socket.io powers live presence, chat messages, task movement, task updates, and comment activity. Users can see changes without refreshing the page.
Write workspace documents in markdown, preview them, and keep project knowledge next to tasks and team discussions.
Each workspace includes a team chat with saved message history, online presence, and typing indicators.
Invite members by email and manage access with three roles:
OWNER: full workspace controlMEMBER: can collaborate and update workGUEST: limited access
Track task totals, completion rate, recent activity, priority breakdown, and status distribution with Recharts.
Google Gemini powers:
- Workspace summaries
- Standup summaries
- Backlog prioritization
- Task description generation
AI features are optional and only require GEMINI_API_KEY when enabled.
| Area | Technology |
|---|---|
| Framework | Next.js 16 App Router |
| UI | React 19, Tailwind CSS v4, Framer Motion |
| Language | TypeScript |
| Database | PostgreSQL |
| ORM | Prisma 7 |
| Auth | NextAuth v5 / Auth.js |
| Real-time | Socket.io |
| Forms | React Hook Form, Zod |
| Charts | Recharts |
| AI | Google Gemini |
| Resend | |
| Runtime | Custom Node server with tsx |
workspace-flow/
├── prisma/
│ └── schema.prisma Database models and relations
├── server.ts Custom Next.js + Socket.io server
├── src/
│ ├── app/
│ │ ├── (auth)/ Login and register pages
│ │ ├── (app)/ Authenticated app routes
│ │ └── api/ REST API routes
│ ├── components/ Reusable UI and product components
│ ├── hooks/ Client hooks for socket/workspace state
│ ├── lib/ Auth, Prisma, Gemini, email, utilities
│ ├── store/ Zustand state
│ └── types/ Shared TypeScript types
├── MEMORY.md Project decisions and session notes
└── ERRORS.md Repeated failure notes and fixes
The main database entities are:
UserWorkspaceWorkspaceMemberWorkspaceInviteTaskTaskCommentDocMessageActivityIntegrationSubscriptionAiSummary
Every workspace-owned resource is scoped by workspaceId, which keeps data separated between teams.
- Node.js 20 or later
- npm
- PostgreSQL database
git clone https://github.com/thribhuvan003/workspace-flow-.git
cd workspace-flow-
npm installCreate a .env file in the project root:
# Database
DATABASE_URL="postgresql://user:password@localhost:5432/workspaceflow"
# Auth
NEXTAUTH_URL="http://localhost:3000"
AUTH_SECRET=""
# Public app URL
NEXT_PUBLIC_APP_URL="http://localhost:3000"
# OAuth providers, optional
GOOGLE_CLIENT_ID=""
GOOGLE_CLIENT_SECRET=""
GITHUB_CLIENT_ID=""
GITHUB_CLIENT_SECRET=""
# AI, optional
GEMINI_API_KEY=""
# Email invites, optional
RESEND_API_KEY=""Generate AUTH_SECRET with:
openssl rand -base64 32On Windows without OpenSSL, use:
[Convert]::ToBase64String((1..32 | ForEach-Object { Get-Random -Maximum 256 }))npm run db:pushnpm run devOpen http://localhost:3000.
| Command | Purpose |
|---|---|
npm run dev |
Start the custom Next.js + Socket.io dev server |
npm run dev:next |
Start plain Next.js dev server without Socket.io |
npm run build |
Generate Prisma client and build the app |
npm run start |
Start the production custom server |
npm run lint |
Run ESLint |
npm run db:generate |
Generate Prisma client |
npm run db:push |
Push Prisma schema to the database |
npm run db:studio |
Open Prisma Studio |
WorkspaceFlow uses a custom Node server for Socket.io. For full real-time behavior, deploy it on a platform that supports long-running Node processes, such as Railway, Render, Fly.io, or a VPS.
Build and start commands:
npm run build
npm run startProduction environment variables should include:
DATABASE_URL=""
AUTH_SECRET=""
NEXTAUTH_URL="https://your-domain.com"
NEXT_PUBLIC_APP_URL="https://your-domain.com"Optional production variables:
GOOGLE_CLIENT_ID=""
GOOGLE_CLIENT_SECRET=""
GITHUB_CLIENT_ID=""
GITHUB_CLIENT_SECRET=""
GEMINI_API_KEY=""
RESEND_API_KEY=""Before pushing changes:
npm run lint
npm run buildThe current production foundation pass has been verified with both commands.
Good resume bullets for this project:
- Built a full-stack real-time workspace app using Next.js, React, TypeScript, Prisma, PostgreSQL, NextAuth, Socket.io, and Tailwind CSS.
- Implemented kanban task management, team chat, markdown docs, workspace roles, analytics dashboards, and AI-generated summaries.
- Improved production readiness by fixing strict lint issues, aligning real-time event payloads, stabilizing auth configuration, and validating production builds.
Built and maintained by:
- GitHub: thribhuvan003
- Email:
thribhuvan003@gmail.com
MIT