https://github.com/arunava-12/zenspace
ZenSpace is a modern project management SaaS dashboard with AI-powered task assistance, real-time analytics, and a sleek glassmorphism UI for team collaboration.
https://github.com/arunava-12/zenspace
prisma production project-management react render saas supabase tailwindcss task-manager typescript vercel
Last synced: 3 months ago
JSON representation
ZenSpace is a modern project management SaaS dashboard with AI-powered task assistance, real-time analytics, and a sleek glassmorphism UI for team collaboration.
- Host: GitHub
- URL: https://github.com/arunava-12/zenspace
- Owner: arunava-12
- Created: 2026-02-12T04:59:02.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2026-04-16T10:51:30.000Z (3 months ago)
- Last Synced: 2026-04-16T19:59:43.217Z (3 months ago)
- Topics: prisma, production, project-management, react, render, saas, supabase, tailwindcss, task-manager, typescript, vercel
- Language: TypeScript
- Homepage: https://zenspace-navy.vercel.app/
- Size: 593 KB
- Stars: 0
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
ZenSpace
A premium, full-stack project management SaaS platform designed for high-performance teams.
Find your flow in the chaos.
Features •
Tech Stack •
Architecture •
Installation
---
## 🚀 Overview
ZenSpace combines a sleek, state-of-the-art **glassmorphic UI** with powerful **AI-assisted workflows**, **real-time collaboration**, and **robust data management**. Built to handle the demands of modern cross-functional teams, it enables you to manage your projects, tasks, and team interactions seamlessly.
---
## ✨ Key Features
### 🏢 Workspace & Project Architecture
* **Multi-Workspace Support**: Organize different business units or teams into isolated workspaces effortlessly.
* **Granular Project Control**: Comprehensive project tracking with diverse lifecycle statuses (`Active`, `Planning`, `Completed`, `On Hold`, `Cancelled`).
* **Visual Progress Tracking**: Real-time percentage-based progression and robust Priority Matrices (Low, Medium, High).
### ✅ Advanced Task Management
* **Kanban-Style Statuses**: Fluid workflows navigating through `To Do` → `In Progress` → `Done`.
* **Categorized Task Types**: Effectively manage distinct task entities like `Tasks`, `Bugs`, `Features`, and `Improvements`.
* **Smart Assignments**: Instantly assign tasks to specific team members, assign deadlines, and detail the scope.
### 🤖 ZenAI Assistant
* **AI Chatbot Context**: Context-aware assistant powered by **Groq** (using Llama 3.3).
* **Intelligent Suggestions**: Ask the AI to brainstorm or even generate actionable JSON-mapped tasks dynamically based on project descriptions.
### 👥 Collaboration & Security
* **Role-Based Access Control (RBAC)**: Enforced internal security differentiating `Admin`, `Owner`, and `Member` privileges.
* **Secure Invites**: Token-based architecture to seamlessly onboard new team members.
* **Persistent Discussions**: Dynamic, threaded comments tied to projects and specific tasks ensuring deep collaboration.
### 🎨 Premium Aesthetics (UX/UI)
* **Glassmorphism**: High-end frosted glass elements with ultra-modern UI design languages.
* **Complex UI Graphics**: GSAP and Framer Motion powered transitions across pages and interactions.
* **Visual Calendar**: A beautiful integrated calendar system mapping out schedules interactively.
---
## 🛠️ Technology Stack
| Domain | Technologies |
| :--- | :--- |
| **Frontend** | React 19, TypeScript, Vite, Tailwind CSS, Lucide React, GSAP, Framer Motion |
| **Backend** | Node.js (Node 20+), Express.js |
| **Database** | PostgreSQL, Prisma ORM |
| **Authentication** | JWT (Cookie-based), bcryptjs |
| **AI Integration** | Groq SDK (Llama 3.3-70b/8b) |
---
## 🧭 System Architecture
```mermaid
graph TD
%% Frontend Node
Client["🖥️ React 19 SPA
(Vite + Tailwind)"]
%% API Gateway Layer
Gateway["🌐 Express Server
(REST API)"]
%% Backend Services
Auth["🛡️ Auth Service
(JWT + bcrypt)"]
Projects["📁 Project & Task
Management"]
AI_Agent["🤖 ZenAI Agent"]
%% Database Connection Layer
ORM["🔷 Prisma ORM"]
%% Data Stores
DB[("🐘 PostgreSQL
Database")]
LLM["🧠 Groq API
(Llama 3.3)"]
%% Relationships
Client <-->|Axios / JSON| Gateway
Gateway --> Auth
Gateway --> Projects
Gateway --> AI_Agent
Auth --> ORM
Projects --> ORM
ORM <--> DB
AI_Agent <-->|Prompts / Streaming| LLM
```
### 🗄️ Database Entity-Relationship Diagram
```mermaid
erDiagram
USER ||--o{ WORKSPACE : "creates & owns"
USER ||--o{ PROJECT : "leads"
USER ||--o{ TASK : "is assigned"
USER ||--o{ COMMENT : "authors"
WORKSPACE ||--o{ PROJECT : "contains"
PROJECT ||--o{ TASK : "houses"
PROJECT ||--o{ PROJECT_INVITE : "issues"
PROJECT ||--o{ FILE_ASSET : "attaches"
TASK ||--o{ COMMENT : "contains"
PROJECT ||--o{ COMMENT : "contains"
```
---
## 🚀 Getting Started
### Prerequisites
* **Node.js 20+**
* **PostgreSQL** Database
* **Groq API Key** (or use Google Gemini fallback if configured)
### Installation
1. **Clone & Install**
```bash
git clone https://github.com/your-username/zenspace.git
cd zenspace
# Install Frontend Dependencies
npm install
# Install Backend Dependencies
cd server
npm install
cd ..
```
2. **Environment Setup**
Ensure `.env` files are correctly set up in the root and `/server` directory.
**Root `.env` (Frontend):**
```env
VITE_API_URL=http://localhost:4000
```
**Server `.env` (`/server/.env`):**
```env
DATABASE_URL="postgresql://user:password@localhost:5432/zenspace"
DIRECT_URL="postgresql://user:password@localhost:5432/zenspace"
JWT_SECRET="your_very_secure_secret"
GROQ_API_KEY="your_groq_api_key_here"
PORT=4000
```
3. **Database Initialization**
```bash
cd server
# Apply Prisma migrations
npx prisma migrate dev --name init
# Optional: Seed the database with sample data
npm run db:seed
cd ..
```
4. **Run Development Servers**
To experience the full capability, run both client and server instances concurrently.
```bash
# Terminal 1: Frontend Server
npm run dev
# Terminal 2: Backend API
cd server
npm run dev
```
---
## 📁 Project Structure
```text
zenspace/
├── components/ # Reusable UI (BlobCursor, VisualCalendar, ZenAIChat)
├── pages/ # Main Views (Dashboard, ProjectDetails, Tasks, etc.)
├── store/ # Frontend State Management hook architectures
├── public/ # Static Frontend Assets
├── server/ # Express Backend Ecosystem
│ ├── prisma/ # Prisma schema & seeding strategy
│ ├── routes/ # Isolated API endpoint configurations
│ ├── utils/ # Shared utility classes & helpers
│ └── index.ts # High-level server bootstrap
├── types.ts # Shared global TS interfaces
└── tailwind.config.cjs # Custom theme & animation constants
```
---
## 📈 Roadmap
- [x] Initial React 19 Migration & UI Rewrite.
- [x] AI agent integration via Groq for generative tasks.
- [x] Full DB relations with Tasks, Comments & Projects.
- [ ] Real-time WebSockets setup for live collaboration UI updates.
- [ ] Drag-and-drop Kanban interface components.
- [ ] Comprehensive File/Asset cloud storage (AWS S3) configuration.
- [ ] Cross-platform React Native companion app.
---
## 🤝 Contributing
We welcome community contributions to ZenSpace!
1. **Fork the Project**
2. **Create your Feature Branch** (`git checkout -b feature/AmazingFeature`)
3. **Commit your Changes** (`git commit -m 'Add some AmazingFeature'`)
4. **Push to the Branch** (`git push origin feature/AmazingFeature`)
5. **Open a Pull Request**
---
Built with pride for the modern workforce.
Copyright © 2026 ZenSpace Ecosystem