https://github.com/chayan-1906/jira
📋 Jira clone built with Next.js 15, featuring Appwrite SDK, Hono.js API, and Shadcn UI, with authentication, analytics, Kanban boards, and role-based access control. 🚀 Next.js 15 • 🔐 Appwrite • 🎨 Shadcn/UI • 📊 Analytics
https://github.com/chayan-1906/jira
analytics appwrite calendar-view drag-and-drop featured honojs jira-clone kanban-boards nextjs15 project-management react19 role-based-access shadcn-ui tailwindcss task-management team-collaboration typescript
Last synced: 26 days ago
JSON representation
📋 Jira clone built with Next.js 15, featuring Appwrite SDK, Hono.js API, and Shadcn UI, with authentication, analytics, Kanban boards, and role-based access control. 🚀 Next.js 15 • 🔐 Appwrite • 🎨 Shadcn/UI • 📊 Analytics
- Host: GitHub
- URL: https://github.com/chayan-1906/jira
- Owner: chayan-1906
- Created: 2024-11-02T19:10:37.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-07-18T19:34:06.000Z (11 months ago)
- Last Synced: 2025-07-18T23:57:33.812Z (11 months ago)
- Topics: analytics, appwrite, calendar-view, drag-and-drop, featured, honojs, jira-clone, kanban-boards, nextjs15, project-management, react19, role-based-access, shadcn-ui, tailwindcss, task-management, team-collaboration, typescript
- Language: TypeScript
- Homepage: https://jira-alpha.vercel.app
- Size: 320 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📋 Jira Clone - Project Management Platform
[](https://nextjs.org/)
[](https://www.typescriptlang.org/)
[](https://reactjs.org/)
[](https://hono.dev/)
[](https://appwrite.io/)
[](https://ui.shadcn.com/)
> 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)](https://jira-alpha.vercel.app/)
## 📱 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
1. **Clone repository** 📥
```bash
git clone https://github.com/chayan-1906/Jira.git
cd Jira
```
2. **Install dependencies** 📦
```bash
npm install
```
3. **Environment setup** ⚙️
```bash
cp .env.example .env
```
4. **Configure environment** 🔧
```env
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
```
5. **Start development server** 🚀
```bash
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
```bash
# Development server
npm run dev
# Build production
npm run build
# Start production
npm start
# Lint code
npm run lint
```
## 🚀 Deployment
### Vercel Deployment
1. **Connect** GitHub repository 🔗
2. **Configure** environment variables ⚙️
3. **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
1. Fork repository 🍴
2. Create feature branch (`git checkout -b feature/amazing-feature`) 🌟
3. Commit changes (`git commit -m 'Add amazing feature'`) 💾
4. Push branch (`git push origin feature/amazing-feature`) 🚀
5. Open Pull Request 📝
## 🐛 Known Issues
- None currently reported ✅
## 👨💻 Author
**Padmanabha Das**
- GitHub: [@chayan-1906](https://github.com/chayan-1906) 🐙
- LinkedIn: [Padmanabha Das](https://www.linkedin.com/in/padmanabha-das-59bb2019b/) 💼
- 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!