📋 Jira Clone - Project Management Platform

This is a Next.js 15 Jira clone featuring Appwrite SDK, Hono.js API, and Shadcn UI, with authentication, analytics, Kanban boards, and role-based access control.

✨ Features

🚀 Next.js 15 - Latest React framework with advanced features ⚡
📊 Kanban Boards - Drag-and-drop task management 🎯
📅 Calendar View - Visual timeline for project planning 📆
📈 Analytics Dashboard - Real-time project insights 📊
👥 Team Management - Role-based access control 🔐
🎨 Modern UI - Shadcn/UI components with Tailwind CSS ✨
🔒 Authentication - Secure Appwrite authentication 🛡️
📱 Responsive Design - Works on all devices 📺
🎭 Dark/Light Mode - Theme switching support 🌙
🔄 Real-time Updates - Live collaboration features ⚡

Live Site (Vercel)

📱 Screenshots

🏗️ Tech Stack

🖥️ Frontend

⚛️ Next.js 15.0.2 - React framework with App Router 🚀
📘 TypeScript 5.x - Type safety and enhanced DX 🛡️
🎨 Tailwind CSS 3.4.14 - Utility-first CSS framework 💅
🌟 Shadcn/UI - Modern React components ✨

🔄 Backend & API

🔥 Hono.js 4.6.9 - Lightweight web framework 🚀
🗄️ Appwrite 14.1.0 - Backend-as-a-Service platform 📊
🔐 Zod 3.23.8 - Schema validation 🛡️
🎯 Hono Zod Validator 0.4.1 - Request validation ✅

🎨 UI Components

🎭 Radix UI - Headless UI components 🧩
📋 React Hook Form 7.53.1 - Form management 📝
🎨 Lucide React 0.454.0 - Icon library 🌟
🔄 React Icons 5.3.0 - Additional icons 🎯

📊 Data Management

🔍 TanStack Query 5.59.19 - Data fetching and caching ⚡
📊 TanStack Table 8.20.5 - Table management 📋
🔄 Nuqs 1.19.1 - URL state management 🌐
📈 Recharts 2.13.3 - Chart library 📊

🎯 Advanced Features

🎨 Hello Pangea DnD 17.0.0 - Drag and drop 🎯
📅 React Big Calendar 1.16.3 - Calendar component 📆
🎭 Next Themes 0.3.0 - Theme switching 🌙
🔊 Sonner 1.5.0 - Toast notifications 🔔
🎨 Vaul 1.1.1 - Drawer component 📱

🚀 Getting Started

Prerequisites

Node.js 18+ 🟢
Appwrite account 🔐
TypeScript knowledge 📘

Installation

Clone repository 📥

git clone https://github.com/chayan-1906/Jira.git
cd Jira

Install dependencies 📦
```
npm install
```
Environment setup ⚙️
```
cp .env.example .env
```

Configure environment 🔧

NEXT_PUBLIC_APPWRITE_IMAGES_BUCKET_ID=your_appwrite_images_bucket_id
NEXT_PUBLIC_APPWRITE_PROJECT=your_appwrite_project_id
NEXT_PUBLIC_APPWRITE_DATABASE_ID=your_appwrite_database_id
NEXT_PUBLIC_APPWRITE_WORKSPACES_ID=your_appwrite_workspaces_id
NEXT_PUBLIC_APPWRITE_MEMBERS_ID=your_appwrite_members_id
NEXT_PUBLIC_APPWRITE_PROJECTS_ID=your_appwrite_projects_collection_id
NEXT_PUBLIC_APPWRITE_TASKS_ID=your_appwrite_tasks_collection_id
NEXT_PUBLIC_APPWRITE_KEY=your_appwrite_key
NEXT_PUBLIC_APP_URL=your_deployed_website_url
NEXT_PUBLIC_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1

Start development server 🚀
```
npm run dev
```

🏗️ Project Structure

src/
├── app/
│   ├── (auth)/              # Authentication pages
│   ├── (dashboard)/         # Main dashboard
│   ├── (standalone)/        # Standalone pages
│   └── api/                 # API routes
├── components/
│   ├── ui/                  # Shadcn/UI components
│   └── *.tsx               # Feature components
├── features/
│   ├── auth/               # Authentication
│   ├── workspaces/         # Workspace management
│   ├── projects/           # Project management
│   ├── tasks/              # Task management
│   └── members/            # Team management
├── lib/                    # Utility libraries
├── hooks/                  # Custom React hooks
└── types/                  # TypeScript definitions

🔧 Core Features

📊 Project Management

Workspaces - Organize projects by teams 🏢
Projects - Create and manage projects 📁
Tasks - Detailed task management 📋
Analytics - Project performance insights 📈

🎯 Task Management

Kanban Boards - Visual task organization 📋
Calendar View - Timeline-based planning 📅
Table View - Detailed task listing 📊
Drag & Drop - Intuitive task movement 🎯

👥 Team Features

Member Management - Add/remove team members 👥
Role-Based Access - Permission control 🔐
Invite System - Team invitation workflow 📧
Activity Tracking - Monitor team progress 📊

🔐 Authentication

Appwrite Auth - Secure authentication 🛡️
Session Management - Persistent login 🔒
OAuth Support - Social login options 🌐
Protected Routes - Route guards 🛡️

🔗 API Routes

Method	Endpoint	Description	Auth
`GET`	`/api/auth/current`	Get current user	✅
`POST`	`/api/auth/login`	User login	❌
`POST`	`/api/auth/register`	User registration	❌
`GET`	`/api/workspaces`	Get workspaces	✅
`POST`	`/api/workspaces`	Create workspace	✅
`GET`	`/api/projects`	Get projects	✅
`POST`	`/api/projects`	Create project	✅
`GET`	`/api/tasks`	Get tasks	✅
`POST`	`/api/tasks`	Create task	✅
`GET`	`/api/members`	Get members	✅

📊 Features Breakdown

🏢 Workspace Management

📁 Create workspaces
⚙️ Workspace settings
👥 Member invitations
📊 Analytics dashboard

📋 Project Management

🎯 Project creation
📝 Project details
🔄 Status tracking
📈 Progress monitoring

📝 Task Management

✅ Task creation
🏷️ Status updates
👤 Assignment system
📅 Due date tracking

👥 Team Collaboration

💬 Real-time updates
🔄 Activity feeds
📧 Notifications
👥 Team insights

🎨 UI Components

🎯 Shadcn/UI Components

Button - Interactive buttons 🔘
Sheet - Side panels 📄
Dialog - Modal dialogs 💬
Form - Form components 📝
Table - Data tables 📊
Select - Dropdown selects 📋
Checkbox - Checkbox inputs ✅
Textarea - Text areas 📝

🎨 Custom Components

Analytics Card - Metric displays 📊
Date Picker - Date selection 📅
Dotted Separator - Visual dividers ➖
Mobile Sidebar - Mobile navigation 📱
Responsive Modal - Adaptive modals 📱

📱 Responsive Design

📲 Mobile Features

Touch-friendly interface 👆
Drawer navigation 📱
Optimized layouts 📐
Gesture support 🤏

🖥️ Desktop Features

Sidebar navigation 📋
Keyboard shortcuts ⌨️
Multi-panel views 📊
Advanced interactions 🖱️

🔒 Security Features

Authentication via Appwrite 🔐
Role-based access control 🛡️
Data validation with Zod ✅
Secure API endpoints 🔒
Environment variables protection 🔐

📈 Performance

Next.js 15 optimizations 🚀
TanStack Query caching ⚡
Server components 🖥️
Code splitting 📦
Image optimization 🖼️

🔧 Development Scripts

# Development server
npm run dev

# Build production
npm run build

# Start production
npm start

# Lint code
npm run lint

🚀 Deployment

Vercel Deployment

Connect GitHub repository 🔗
Configure environment variables ⚙️
Deploy automatically on push 🚀

Environment Variables

NEXT_PUBLIC_APPWRITE_IMAGES_BUCKET_ID
NEXT_PUBLIC_APPWRITE_PROJECT
NEXT_PUBLIC_APPWRITE_DATABASE_ID
NEXT_PUBLIC_APPWRITE_WORKSPACES_ID
NEXT_PUBLIC_APPWRITE_MEMBERS_ID
NEXT_PUBLIC_APPWRITE_PROJECTS_ID
NEXT_PUBLIC_APPWRITE_TASKS_ID
NEXT_PUBLIC_APPWRITE_KEY
NEXT_PUBLIC_APP_URL
NEXT_PUBLIC_APPWRITE_ENDPOINT

📋 Requirements

Node.js: ≥18.0.0 🟢
Appwrite: Latest version 📊
Memory: 1GB RAM minimum 💾
Storage: 2GB disk space 💿

🤝 Contributing

Fork repository 🍴
Create feature branch (git checkout -b feature/amazing-feature) 🌟
Commit changes (git commit -m 'Add amazing feature') 💾
Push branch (git push origin feature/amazing-feature) 🚀
Open Pull Request 📝

🐛 Known Issues

None currently reported ✅

👨‍💻 Author

Padmanabha Das

GitHub: @chayan-1906 🐙
LinkedIn: Padmanabha Das 💼
Email: padmanabhadas9647@gmail.com 📧

🌟 Show Your Support

Give a ⭐️ if this project helped you! 🙏

Made with ❤️ by Padmanabha Das

⭐ Star this repo if you found it helpful!

Name		Name	Last commit message	Last commit date
.idea		.idea
public		public
src		src
.env.example		.env.example
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
README.md		README.md
components.json		components.json
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

Latest commit

History

Folders and files

Repository files navigation

📋 Jira Clone - Project Management Platform

✨ Features

Live Site (Vercel)

📱 Screenshots

🏗️ Tech Stack

🖥️ Frontend

🔄 Backend & API

🎨 UI Components

📊 Data Management

🎯 Advanced Features

🚀 Getting Started

Prerequisites

Installation

🏗️ Project Structure

🔧 Core Features

📊 Project Management

🎯 Task Management

👥 Team Features

🔐 Authentication

🔗 API Routes

📊 Features Breakdown

🏢 Workspace Management

📋 Project Management

📝 Task Management

👥 Team Collaboration

🎨 UI Components

🎯 Shadcn/UI Components

🎨 Custom Components

📱 Responsive Design

📲 Mobile Features

🖥️ Desktop Features

🔒 Security Features

📈 Performance

🔧 Development Scripts

🚀 Deployment

Vercel Deployment

Environment Variables

📋 Requirements

🤝 Contributing

🐛 Known Issues

👨‍💻 Author

🌟 Show Your Support

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Used by

Contributors

Languages