🎨 Kanvas

The Modern Kanban Workspace for Teams & Individuals

A full-stack, production-ready productivity platform featuring real-time Kanban boards, workspace collaboration, and seamless task management — built with cutting-edge technologies.

🚀 Live Demo · 🛠 Installation · 🤝 Contributing

🚀 Demo / Live Link

🌐 Live Application: https://kanvasapp.vercel.app
📚 Documentation: https://kanvasapp.vercel.app/docs

👨‍💻 About the Developer

Hi, I'm Naman 👋

A passionate Full-Stack Developer with strong experience in modern web development and building production-ready applications.

Open to collaborations, freelance projects, and exciting opportunities!

🧠 Features

✨ Core Features

🎯 Intuitive Kanban Boards — Drag-and-drop task management with smooth animations
🏢 Multi-Workspace Support — Create and manage multiple workspaces for different projects
👥 Team Collaboration — Invite members with role-based permissions (Admin, Editor, Viewer)
🔐 Secure Authentication — Email/Password & OAuth (Google, GitHub) via Better Auth
⚡ Real-time Updates — Live synchronization powered by Redis caching
📱 Fully Responsive — Optimized for desktop, tablet, and mobile devices

🎨 User Experience

🌙 Dark/Light Theme — Beautiful theming with next-themes
🖱️ Smooth Drag & Drop — Powered by @dnd-kit for seamless interactions
🎬 Fluid Animations — Framer Motion for delightful micro-interactions
📊 State Management — Redux Toolkit for predictable state handling

🔧 Developer Experience

📝 Type Safety — Full TypeScript support across the stack
📚 Auto-generated Docs — Fumadocs-powered API documentation
🧹 Code Quality — ESLint, Prettier, and Husky pre-commit hooks
🗃️ Database Migrations — Prisma migrations for safe schema changes

📦 Tech Stack

Frontend

Backend & Database

UI Components

🛠 Installation & Setup

Prerequisites

Before you begin, ensure you have the following installed:

Node.js 18.x or higher (Download)
npm or pnpm package manager
Git for version control
A Supabase account (or PostgreSQL database)
An Upstash Redis account (free tier available)

Quick Start

1️⃣ Clone the Repository

git clone https://github.com/Namann-14/kanvas.git
cd kanvas

2️⃣ Install Dependencies

npm install

3️⃣ Set Up Environment Variables

Create a .env file in the root directory:

cp .env.example .env

Then configure your environment variables (see Environment Variables section).

4️⃣ Set Up the Database

# Generate Prisma client
npx prisma generate

# Run database migrations
npx prisma migrate dev

# (Optional) Seed the database with sample data
npm run db:seed

5️⃣ Start the Development Server

npm run dev

6️⃣ Open Your Browser

Navigate to http://localhost:3000 — you're all set! 🎉

⚙️ Environment Variables

Create a .env file with the following variables:

# Database (Supabase PostgreSQL)
DATABASE_URL="postgresql://user:password@host:5432/database?schema=public"
DIRECT_URL="postgresql://user:password@host:5432/database?schema=public"

# Redis (Upstash)
UPSTASH_REDIS_REST_URL="https://your-redis-url.upstash.io"
UPSTASH_REDIS_REST_TOKEN="your-redis-token"

# Authentication (Better Auth)
BETTER_AUTH_SECRET="your-super-secret-key"
BETTER_AUTH_URL="http://localhost:3000"

# OAuth Providers (Optional)
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"
GITHUB_CLIENT_ID="your-github-client-id"
GITHUB_CLIENT_SECRET="your-github-client-secret"

# Application
NEXT_PUBLIC_APP_URL="http://localhost:3000"

💡 Get your keys:

Supabase: supabase.com

Upstash Redis: upstash.com

Google OAuth: Google Cloud Console

GitHub OAuth: GitHub Developer Settings

🧪 Running Tests

# Run linting
npm run lint

# Run formatting check
npm run format

# Check database data
npm run db:check

🧗‍♂️ Folder Structure

kanvas/
├── 📁 docs/                    # Documentation (Fumadocs)
│   ├── api/                    # API documentation
│   └── *.md                    # Markdown docs
├── 📁 prisma/
│   ├── schema.prisma           # Database schema
│   ├── migrations/             # Database migrations
│   └── seed.ts                 # Seed script
├── 📁 public/                  # Static assets
├── 📁 src/
│   ├── 📁 app/                 # Next.js App Router
│   │   ├── (auth)/             # Authentication pages
│   │   ├── (dashboard)/        # Dashboard pages
│   │   ├── api/                # API routes
│   │   └── docs/               # Documentation pages
│   ├── 📁 components/
│   │   ├── dashboard/          # Dashboard components
│   │   ├── kibo-ui/            # Custom UI kit
│   │   └── ui/                 # shadcn/ui components
│   ├── 📁 contexts/            # React contexts
│   ├── 📁 generated/           # Generated Prisma types
│   ├── 📁 hooks/               # Custom React hooks
│   ├── 📁 lib/                 # Utilities & configs
│   │   ├── actions/            # Server actions
│   │   └── queries/            # Database queries
│   ├── 📁 providers/           # React providers
│   └── 📁 store/               # Redux store
├── .env.example                # Environment template
├── package.json                # Dependencies
├── tailwind.config.ts          # Tailwind configuration
└── tsconfig.json               # TypeScript configuration

🛣 Roadmap

✅ Completed

🚧 In Progress

Task comments and attachments
Due dates and reminders
Task priority levels
Search and filtering

🔮 Future Plans

🤝 Contributing

Contributions are what make the open-source community amazing! Any contributions you make are greatly appreciated.

How to Contribute

Fork the repository

Clone your fork

git clone https://github.com/your-username/kanvas.git

Create a feature branch
```
git checkout -b feature/amazing-feature
```

Commit your changes

git commit -m "feat: add amazing feature"

Push to your branch
```
git push origin feature/amazing-feature
```
Open a Pull Request

Contribution Guidelines

Follow the existing code style
Write meaningful commit messages (we use Conventional Commits)
Add tests for new features when applicable
Update documentation as needed

⭐ Support This Project

If you found this project helpful or learned something from it, please consider:

🌟 Give it a Star!

Your star helps others discover this project and motivates me to keep improving it!

🍴 Fork & Build

Fork the repo and build something amazing on top of it!

📣 Share

Share this project with your network if you think it could help others!

📝 License

This project is licensed under the MIT License — see the LICENSE file for details.

MIT License

Copyright (c) 2025 Naman Nayak

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

Made with ❤️ by Naman Nayak

If you're a recruiter or collaborator, feel free to reach out!

Star ⭐ this repo if you found it useful!

Name		Name	Last commit message	Last commit date
Latest commit History 22 Commits
.husky		.husky
.source		.source
.vscode		.vscode
docs		docs
prisma		prisma
public		public
src		src
.gitignore		.gitignore
.prettierrc		.prettierrc
LICENSE		LICENSE
README.md		README.md
components.json		components.json
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
openapi.json		openapi.json
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
source.config.ts		source.config.ts
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation