Full-stack Jira Clone using Next.js 14 and Appwrite

:bangbang: Folder Structure

Here is the folder structure of this app.

jira-clone/
  |- public/
    |-- github.svg
    |-- icon.svg
  |- src/
    |-- app/
        |--- (auth)/
        |--- (dashboard)/
        |--- (standalone)/
        |--- api/[[...route]]/
        |--- apple-icon.png
        |--- error.tsx
        |--- favicon.ico
        |--- globals.css
        |--- icon1.png
        |--- icon2.png
        |--- layout.tsx
        |--- not-found.tsx
    |-- components/
        |--- ui/
        |--- analytics-card.tsx
        |--- analytics.tsx
        |--- date-picker.tsx
        |--- dotted-separator.tsx
        |--- logo.tsx
        |--- mobile-sidebar.tsx
        |--- modal-provider.tsx
        |--- navbar.tsx
        |--- navigation.tsx
        |--- page-error.tsx
        |--- page-loader.tsx
        |--- projects.tsx
        |--- query-provider.tsx
        |--- responsive-modal.tsx
        |--- sidebar.tsx
        |--- source-code.tsx
        |--- workspace-switcher.tsx
    |-- config/
        |--- db.ts
        |--- index.ts
    |-- features/
        |--- auth/
        |--- members/
        |--- projects/
        |--- tasks/
        |--- workspaces/
    |-- hooks/
        |--- use-confirm.tsx
        |--- use-debounce.ts
    |-- lib/
        |--- appwrite.ts
        |--- hono.ts
        |--- oauth.ts
        |--- session-middleware.ts
        |--- utils.ts
  |- .env.example
  |- .env.local
  |- .eslintrc.json
  |- .gitignore
  |- .prettierrc.json
  |- .prettierrc.mjs
  |- bun.lockb
  |- components.json
  |- environment.d.ts
  |- next.config.mjs
  |- package.json
  |- postcss.config.js
  |- README.md
  |- tailwind.config.ts
  |- tsconfig.json

:toolbox: Getting Started

1. Make sure Git and NodeJS is installed.
2. Clone this repository to your local computer.
3. Create .env.local file in root directory.
4. Contents of .env.local:

# .env.local

# disable next.js telemetry
NEXT_TELEMETRY_DISABLED=1

# app base url
NEXT_PUBLIC_APP_BASE_URL=http://localhost:3000

# appwrite project and key
NEXT_PUBLIC_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
NEXT_PUBLIC_APPWRITE_PROJECT=XXXXXXXXXXXXXXXXXXXX
NEXT_PUBLIC_APPWRITE_IMAGES_BUCKET_ID=XXXXXXXXXXXXXXXXXXX
NEXT_APPWRITE_KEY=standard_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# appwrite database ids
NEXT_PUBLIC_APPWRITE_DATABASE_ID=XXXXXXXXXXXXXXXXXXX
NEXT_PUBLIC_APPWRITE_MEMBERS_ID=XXXXXXXXXXXXXXXXXXX
NEXT_PUBLIC_APPWRITE_PROJECTS_ID=XXXXXXXXXXXXXXXXXXX
NEXT_PUBLIC_APPWRITE_TASKS_ID=XXXXXXXXXXXXXXXXXXX
NEXT_PUBLIC_APPWRITE_WORKSPACES_ID=XXXXXXXXXXXXXXXXXXX

5. Disable Next.js Telemetry

Set NEXT_TELEMETRY_DISABLED to 1. This disables Next.js telemetry (optional).

6. App Base URL

Set the NEXT_PUBLIC_APP_BASE_URL to http://localhost:3000 where your app will be running locally or in production.

7. Get Appwrite Endpoint and Project ID

1. Create an account on Appwrite.
2. Create a new project:
   • Go to Dashboard > Create Project.
3. Retrieve your Appwrite Endpoint and Project ID:
   • Navigate to Settings > Overview > API Credentials.
   • Copy the Endpoint and Project ID, and save them in .env.local as NEXT_PUBLIC_APPWRITE_ENDPOINT and NEXT_PUBLIC_APPWRITE_PROJECT.

8. Generate Appwrite API Key

1. Go to the Overview tab.
2. Navigate to Integrations > API Keys > Create API Key:
   • Name: jira-clone-web (or any preferred name).
   • Expiration Time: Never.
   • Scopes:
     • auth
     • session.write
     • users.read.
3. Copy the generated API key and save it in .env.local as NEXT_APPWRITE_KEY.

9. Create Database and Collections

Create the Database

1. Go to the Databases tab.
2. Create a new database named jira-clone.
3. Copy the Database ID (displayed near the database name) and save it in .env.local as NEXT_PUBLIC_APPWRITE_DATABASE_ID.

Create Collections and Define Attributes

1. Tasks Collection:

• Attributes:
  • workspaceId (String, Required, Size: 50)
  • name (String, Required, Size: 256)
  • projectId (String, Required, Size: 50)
  • assigneeId (String, Required, Size: 50)
  • description (String, Optional, Size: 2048)
  • dueDate (DateTime, Required)
  • status (Enum, Required)
    • Elements: BACKLOG, TODO, IN_PROGRESS, IN_REVIEW, DONE
  • position (Integer, Required, Min: 1000, Max: 1000000)

2. Projects Collection:

• Attributes:
  • workspaceId (String, Required, Size: 50)
  • imageId (String, Optional, Size: 50)
  • name (String, Required, Size: 256)

3. Members Collection:

• Attributes:
  • userId (String, Required, Size: 50)
  • workspaceId (String, Required, Size: 50)
  • role (Enum, Required)
    • Elements: ADMIN, MEMBER

4. Workspaces Collection:

• Attributes:
  • name (String, Required, Size: 256)
  • userId (String, Required, Size: 50)
  • imageId (String, Optional, Size: 50)
  • inviteCode (String, Required, Size: 10)

Set Permissions for Collections

For each collection:

1. Navigate to Settings > Permissions.

2. Add the role All Users with Create, Read, Update, and Delete permissions and click Update.

3. Copy the Collection IDs (displayed near collection names) for each collection and save them in .env.local as NEXT_PUBLIC_APPWRITE_MEMBERS_ID, NEXT_PUBLIC_APPWRITE_PROJECTS_ID, NEXT_PUBLIC_APPWRITE_TASKS_ID, and NEXT_PUBLIC_APPWRITE_WORKSPACES_ID.

10. Add Index to the Tasks Collection

1. Go to the Tasks collection.
2. Navigate to the Indexes tab.
3. Create a new index:
   • Name: task_name.
   • Type: Full Text.
   • Attribute: name.
   • Order: DESC.

11. Create a Bucket for Images

1. Go to the Storage tab.
2. Create a new bucket named images (or any preferred name).
3. Configure bucket settings:
   • Permissions: Add the role All Users with Create, Read, Update, and Delete permissions.
   • Maximum File Size: Set to 1 MB.
   • Allowed File Extensions: Add jpg, png, and jpeg.
   • Save the settings.
4. Copy the Bucket ID (displayed near the bucket name) and save it in .env.local as NEXT_PUBLIC_APPWRITE_IMAGES_BUCKET_ID.

12. Configure OAuth with Google

1. Go to the Auth tab in Appwrite > Settings.
2. Enable Google and copy the provided Redirect URI.
3. Visit the Google Cloud Console:
   • Create a new project and configure the OAuth consent screen with default settings.
4. Create OAuth 2.0 credentials:
   • Add the copied Redirect URI from Appwrite as the Authorized Redirect URI.
5. After creation, copy the generated Client ID and Client Secret.
6. Return to Appwrite and paste the Client ID and Client Secret into the corresponding fields for App ID and App Secret, then click Update.

13. Configure OAuth with GitHub

1. Go to the Auth tab in Appwrite > Settings.
2. Enable GitHub and copy the provided Redirect URI.
3. Visit the GitHub Developer Settings:
   • Under OAuth Apps, click New OAuth App.
4. Fill out the required fields:
   • Application Name: Jira Clone (or any preferred name).
   • Homepage URL: http://localhost:3000 (or your app's base URL).
   • Authorization Callback URL: Paste the Redirect URI copied from Appwrite.
5. Click Register Application.
6. After registration, you'll receive a Client ID and Client Secret.
7. Return to Appwrite and paste the Client ID and Client Secret into the corresponding fields for App ID and App Secret, then click Update.

14. Install Project Dependencies using npm install --legacy-peer-deps or yarn install --legacy-peer-deps or bun install --legacy-peer-deps.

15. Now app is fully configured 👍 and you can start using this app using either one of npm run dev or yarn dev or bun dev.

NOTE: Please make sure to keep your API keys and configuration values secure and do not expose them publicly.

:camera: Screenshots

:gear: Tech Stack

:wrench: Stats

:raised_hands: Contribute

You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.

:gem: Acknowledgements

Useful resources and dependencies that are used in Jira Clone.

• Thanks to CodeWithAntonio: https://codewithantonio.com/
• @hello-pangea/dnd: ^17.0.0
• @hono/zod-validator: ^0.4.1
• @hookform/resolvers: ^3.9.0
• @radix-ui/react-avatar: ^1.1.1
• @radix-ui/react-dialog: ^1.1.2
• @radix-ui/react-dropdown-menu: ^2.1.2
• @radix-ui/react-icons: ^1.3.0
• @radix-ui/react-label: ^2.1.0
• @radix-ui/react-popover: ^1.1.2
• @radix-ui/react-scroll-area: ^1.2.0
• @radix-ui/react-select: ^2.1.2
• @radix-ui/react-separator: ^1.1.0
• @radix-ui/react-slot: ^1.1.0
• @radix-ui/react-tabs: ^1.1.1
• @radix-ui/react-visually-hidden: ^1.1.0
• @tanstack/react-query: ^5.59.16
• @tanstack/react-table: ^8.20.5
• class-variance-authority: ^0.7.0
• clsx: ^2.1.1
• date-fns: ^4.1.0
• hono: ^4.6.7
• lucide-react: ^0.453.0
• next: 14.2.15
• next-themes: ^0.3.0
• node-appwrite: ^14.1.0
• nuqs: 1.19.1
• react: ^18
• react-big-calendar: ^1.15.0
• react-day-picker: 8.10.1
• react-dom: ^18
• react-hook-form: ^7.53.1
• react-icons: ^5.3.0
• react-use: ^17.5.1
• server-only: ^0.0.1
• sonner: ^1.5.0
• tailwind-merge: ^2.5.4
• tailwindcss-animate: ^1.0.7
• vaul: ^1.1.0
• zod: ^3.23.8
• @babel/eslint-parser: ^7.25.9
• @trivago/prettier-plugin-sort-imports: ^4.3.0
• @types/node: ^20
• @types/react: ^18
• @types/react-big-calendar: ^1.15.0
• @types/react-dom: ^18
• eslint: ^8
• eslint-config-next: 14.2.15
• eslint-config-prettier: ^9.1.0
• eslint-plugin-prettier: ^5.2.1
• postcss: ^8
• prettier: ^3.3.3
• prettier-plugin-tailwindcss: ^0.6.8
• tailwindcss: ^3.4.1
• tidy-imports: npm:@trivago/prettier-plugin-sort-imports
• sort-classes: npm:prettier-plugin-tailwindcss
• typescript: ^5

:coffee: Buy Me a Coffee

:rocket: Follow Me

:books: Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

:page_with_curl: Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out Next.js deployment documentation for more details.

:star: Give A Star

You can also give this repository a star to show more people and they can use this repository.

:star2: Star History

(back to top)