Build a Jira Clone With Nextjs, React, Tailwind, Hono.js | Part 1/2 (2024)

Hi all 👋 In this 16-hour tutorial split in two parts (my longest ever btw!) you will learn how to create an end-to-end fullstack Jira clone, all with workspaces, project / epics, tasks, kanban boards, calendars, editing and deleting tasks, invite system, role-based access control system, image uploads, analytics, authentication and more!

Key Features:
🏢 Workspaces
📊 Projects / Epics
✅ Tasks
📋 Kanban Board View
🗃️ Data Table View
📅 Calendar View
✉️ Invite System
⚙️ Workspace and Project Settings
🖼️ Image Uploads (for avatars and attachments)
🔌 Appwrite SDK Integration
🎨 Shadcn UI & TailwindCSS Styling
🔍 Advanced Search and Filtering
📈 Analytics Dashboard
👥 User Roles and Permissions
🔒 Authentication (OAuth and Email)
📱 Responsive Design (Mobile-friendly)

Timestamps
00:00 Intro & demo
03:29 Project setup
09:25 Adding a component library
21:41 Customizing components
34:02 Resolving lint errors
39:12 Creating auth screens
01:34:17 Setting up Hono API
01:48:11 Creating auth API
02:21:49 Setting up Appwrite & database
02:51:10 Building a session middleware
03:12:58 Learning how to protect routes
03:45:28 Building a dashboard layout
04:07:02 Building a workspace form
04:37:36 Handling image upload
05:04:37 Creating a workspace switcher
05:22:36 Creating workspace members
05:38:45 Building a responsive modal
06:11:44 Building a standalone layout
06:22:51 Building workspace settings
07:02:38 Refactoring server queries
07:12:03 Adding a "delete" functionality
07:35:03 Adding a "reset invite" functionality
07:47:03 Building the invite system
08:10:05 Adding a "delete" functionality

[codewithantonio]

First of all, thank you for clicking on this video. At 16 hours long (2 parts), it is my longest ever free video, and after more than a month of hard work it is finally out, and I hope you will enjoy it ❤

This time I decided to be specific with the versions I install in my project. This way you will *hopefully* not be blocked by any deprecations or breaking changes for a longer period, so I will be using this as a quick reminder for you to always look at the version of the package I am installing and try to use the same.

We will be learning a ton of things, most notably how to use the Appwrite SDK, which has been requested a lot in my comments. They've also been kind enough to provide you with $50 USD in cloud credits should you decide to further scale your app in Appwrite!

Besides that, here are the key features in this project:
🏢 Workspaces
📊 Projects / Epics
✅ Tasks
📋 Kanban Board View
🗃 Data Table View
📅 Calendar View
✉ Invite System
⚙ Workspace and Project Settings
🖼 Image Uploads (for avatars and attachments)
🔌 Appwrite SDK Integration
⚛ Next.js 14 Framework
🎨 Shadcn UI & TailwindCSS Styling
🔍 Advanced Search and Filtering
📈 Analytics Dashboard
👥 User Roles and Permissions
🔒 Authentication (OAuth and Email)
📱 Responsive Design (Mobile-friendly)
🚀 API using Hono.js

Happy learning, and see you in the next tutorial!

[MohammedMaaz-ungp]

Bro is not gonna let AI get better than us developers. Thank you Antonio!

[THE_zhao]

You are the best YouTube channel in this field. You didn't talk nonsense about the project and taught me new architectural solutions. Thank you Antonio！

[miraclenerdkidchiki]

Literally just rounding up on the slack are an amazing teacher Mr. Antonio...God bless you for the immense value you add to our lives

[smartbeeinc]

I mean, it's the clean design for me. No nonsense, straight to business. Thank you, Antonio. I swear I chose this path because of you. 💝

[finetopethiopia]

Just finished this part of the tutorial and I am in awe. Thanks, Antonio. The project organization with feature is the greatest thing I have learned this year.

[avishekdas]

There are no words to express my gratitude to you. We can learn for only teachers like you. I wish i could afford your primium course but I hope I can afford it some day. Lots of love❤

[TheMERABANABER]

One of the best youtube channels of all time. I watch your video as one hour long lectures everyday after work and then rewatch them when I'm trying to sleep. All the love.

[HenokGebresenbet]

"hey there my name is antonio" legendary🥰

[mdalmamunit]

I love the way you explained this concept—it’s so clear and easy to understand!

[chaoticcitrus]

This is so soo awesome. Just started the slack clone and this is heree. Will definitely rush to finish that and be on here.
Thank you, Antonio ^

[ipcgrdn]

Hello Antonio, I’m a university student in Korea, and thanks to you, I’ve reached a turning point in my life due to the tremendous help you’ve provided. You’ve been my teacher and my only mentor. I want you to know that you’ve made a huge impact on a student living on the other side of the world. As I leave this first comment, I’d like to make a suggestion. Could you possibly create a video on cloning YouTube Music or SoundCloud?

[Plaswin]

I laugh every time Antonio says "Great job", I mean you did all the work :) . Thank you for another great project.

[businesscoach]

Great insights! Growing a business takes persistence, smart strategy, and knowing your audience. It's all about creating value, building strong relationships

[igorkovalenko]

Bro, thanks! You’re an awesome teacher.

At 36:52, you had some trouble with this code ([_, config]). If you try it like this: ([, config]), the linter should stop complaining. Hope this is helpful advice. Good luck with your lessons! 🙌

[摸看看-vp]

You're the greatest tech blogger on Youtobe

[ziacodes]

Broooo. I built a similar application.

I'll see whole video to see your structure and how you approach things... Really really amazing.

Keep it up!

[markus_dev_cwb]

Oh my gosh, this is a gift project!!!
Tks Antonio.

[mate_motive]

yesterday search for calendar view did not find a good resource but today got you and when it's you we know we don't need to go anywhere

[wahidulislam-dlcv]

your YouTube tutorial videos are best and ur teaching methods are exceptionally organized and astonishing. so easy to understandable ❤❤