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

[@codewithantonio]

⭐170+ hours of content, 21+ projects including source code available on my platform: dub.sh/twpYBjw 🔥 Get $50 in Appwrite credits: apwr.dev/antonio50 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!

[@iuliancarnaru954]

Hi Antonio, why is no more monthly payments?

[@MohammedMaaz-un2gp]

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

[@codewithantonio]

😁 Thanks for enjoying my content!

[@Davidchai-og1de]

i think ai will never surpass the human developers because we have creativity

[@gp390]

😂😂😂

[@online_sourcecode1613]

That's right brother....!! u from Pakistan?

[@MohammedMaaz-un2gp]

@@online_sourcecode1613 yes

[@miraclenerdkidchiki6249]

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

[@codewithantonio]

Thank you for watching my content!

[@BAWAOP]

hey man, you wrapped up that slack clone, i’m also almost done! do you mind connecting sometime, i’m facing a small issues

[@surya_dada_]

What do you think which project is better for learning slack clone to jira clone??

[@miraclenerdkidchiki6249]

@@surya_dada_ both I loved the slack clone cause it used Convex as the backend and i am already familiar with convex (started using it since 2023).....i have also begun the jira clone cuz i will love to see how to use Hono and nextjs, also i used appwrite in the past

[@THE_zhao]

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

[@codewithantonio]

Thank you very much :)

[@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. 💝

[@codewithantonio]

Happy you like my content, thank you!

[@avishekdas4947]

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❤

[@codewithantonio]

Thank you for watching my content!

[@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.

[@Plaswin]

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

[@HenokGebresenbet]

"hey there my name is antonio" legendary🥰

[@codewithantonio]

😁🫶

[@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 KZbin Music or SoundCloud?

[@finetopethiopia4095]

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.

[@codewithantonio]

So happy to hear that!

[@karacan2469]

Thank you for sharing this tutorial! It would be even more helpful if you could start by walking through a design plan, like a Figma layout, or outline the goal and structure of the app before jumping into coding. It often helps beginners to understand how real-world developers approach UI design and the planning stages. This way, we could follow along with a clearer understanding of what we’re building and why, rather than diving straight into code without a defined direction. Again, thanks for the great content!

[@markus_dev_cwb]

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

[@codewithantonio]

Happy to hear that!

[@eugenebesedovsky]

20:00 I believe that tailwind worked on test component just because you already used text-red-500 on your name before and the css class was already generated. But it wouldn't work if you apply a tailwind classname you haven't used before. Thank you for your amazing videos Antonio!

[@codewithantonio]

good point!

[@mdalmamunit427]

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

[@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

[@codewithantonio]

fyi, calendar implementation is in part 2, coming tomorrow!

[@mate_motive]

@@codewithantonio thank you ❤

[@摸看看-v8p]

You're the greatest tech blogger on Youtobe

[@codewithantonio]

Thank you

[@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 ^

[@chaoticcitrus]

For accountability: Slack clone started 07/10/2024.

[@codewithantonio]

Hope you enjoy it!

[@businesscoach202]

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

[@amirfahd197]

Man you're amazing, thanks for the vids it helps a lot for me to build my very own front end design

[@codewithantonio]

Glad to hear it!

[@SK_Covers]

Bro 👀👀❤️❤️❤️ It's winter, but you always WIN(ter)🎉🎉🎉

[@codewithantonio]

Hope you like it!

[@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!

[@codewithantonio]

Glad it will be helpful!

[@abdullahisalihu8107]

Finally, I’ve been looking for this

[@codewithantonio]

Happy to hear that!

[@VY-zt3ph]

Holy fuck. This dude is on fire with Next.js. I wish this level of skill I could have too

[@WiseD3v33]

wow @Antonio this is crazy thanks for Your time, effort and dedication

[@codewithantonio]

Thank you for the kind words

[@techwithib]

I was waiting for this video!

[@codewithantonio]

Glad you like it!

[@alexandervasilenko7773]

Thanx a lot, bro! You're one of the best prof! Waiting for the part 2...

[@codewithantonio]

Coming tomorrow!

[@jaecheokkim99]

perfect video for nextjs learner like me :) I really appreciated!!!!

[@wahidulislam-dl5cv]

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

[@Akgktainment]

babe wake up master Antonio upload new master peace.😍

[@codewithantonio]

Thank you for your support ❤️

[@skhomo]

I pitty a developer who hasn't seen this channel - great work Antonio as always

[@websitewalaofficial]

Always waiting for your video😊

[@codewithantonio]

Thank you 🙏

[@IvanGregorTabalno]

This is what I admire about Sir Antonio-despite having a lot of tutorials, he never forgets the basic guides, like when he teaches how to set up Next.js, Shadcn, and others. So even beginners can watch his tutorial without needing to go back to his previous ones. In all his tutorials, he always teaches the basics, even though many people are already familiar with them. Like me, I stopped developing websites for almost 1-2 months, but thanks to Sir Antonio, I'm able to refresh my knowledge on Next.js and other things because of his teaching, thank you a lot ❤

[@CodingWithTaaxo]

29:18 fun fact: it's not teritary but tertiary and is pronounced "TUR-shuh-ree."

[@khouchanemahmoud9475]

Man this is so cool can't wait to start coding

[@codewithantonio]

Good lucK!

[@RABWA333]

Thanks a lot for the production quality you provide . this is really great

[@cb73]

Your "Hey there" intro isn't quite work safe and makes me blush. lol. J/k... your content is top of the game, thanks for everything you do.

[@pdunk]

Antonio you are goated, you are the javascript goat a 10X developer, once I make it I will have to give pay you , I'm in kenya Africa and you are just reaching me from another side of the world God bless you 🙂🙂🙂

[@bacloud]

Amazing content, Your explanation are great. Great job :)

[@shamim12314]

Awesome! You are best ever youtuber i ever seen! ❤

[@vrfEducation]

super super cool man. I've learned a lot. Thanks

[@codewithantonio]

Glad you liked it!

[@mohammadabbas1623]

Bro is back with master pice

[@codewithantonio]

Thank you!

[@emretarhan0]

hello antonio! i'm grateful to you for the special 50% discount for turkey. i'll support you as much as i can

[@vittoriomorellini1939]

You are simply incredible

[@dzun_nn]

Can't wait for part 2 🔥🔥🔥🔥

[@codewithantonio]

Coming tomorrow!

[@lightoncode]

I asked it and I got it. Thanks a lot Antonio.

[@codewithantonio]

Hope you enjoy it!

[@a2089533]

Let's go !!!🔥🔥🔥

[@ssamyyy]

Nice clone, definately worth it!, gonna go and watch pt 2 now!!

[@buiquockhoi]

Thanks for your video, Antonio! I know you only worked with React in all of your videos, but could you make a video with Svelte because I really love the way you deliver your content?

[@insensibility]

The goat!

[@codewithantonio]

Thank you!

[@learnanywhere139]

Thank you very much, I really hope you will make a CMS project that has the function of dragging and dropping blocks to create stores like e-commerce sites are doing.

[@codewithantonio]

Thanks for the idea!

[@hamudxd9497]

TOP CLASS ❤

[@codewithantonio]

Thank you!

[@jihadislam-e8f]

Please, sir, could you create a multiple-choice/quiz examination system that includes features like negative marking, tracking wrong answers, right answers, and more? Love from Bangladesh ♥♥♥

[@codewithantonio]

Thank you for the suggestion!

[@sumanthprabhu11]

In the next project please 😅​@codewithantonio

[@TessaMero]

great video, thank you!

[@NattapongPUN]

OMG, this project is blowing my mind.

[@AjaySingh-jz8qx]

Onlyfans subscription ❌️ Antonio's course subscription ✅️

[@codewithantonio]

❤️

[@madmaxdev]

Man killing every big SAASes out there. I heard you're fixing KZbin next😅.

[@codewithantonio]

That's what they're saying 🤭

[@mmiiprpkr]

"Thank you, my teacher." 🙏

[@codewithantonio]

You are very welcome!

[@faisal_dev951]

First off, thank you so much for the quality content you consistently provide-it's been incredibly helpful for us. God bless you! I have a quick question regarding the project we're currently working on. Right now, we're unsure about what exactly we’re building in terms of UI. Would it be possible for you to share any design resources, such as a Figma file or other references, that could give us some clarity on what the end result should look like? Thanks again for all your hard work and for helping us grow!

[@肥豬肥肥]

10 x ⭐️ content ! Thank you so much ! PLEASE build Living Social/ Groupon clone 🙏🙏🙏

[@Showmatic]

Wow, the timing for this is perfect

[@codewithantonio]

Happy to hear that!

[@NTDairy]

Ty so much sir, your project is very impress. I've hope rest of the project.

[@codewithantonio]

Glad you like it!

[@BogdanSOLGA]

Congratulations and thank you for another video, Antonio 🙂 Looking forward to integrate it. Have you considered the option to allow more granular access to your courses? I would be interested just in 3-4 courses, and I would gladly pay for them 🙂

[@codewithantonio]

Will look into offering that!

[@BogdanSOLGA]

@@codewithantonio looking forward to it 🙂 I want to pay for what I learned from you 🍹

[@dffhhfhdifh]

thankyou so much learnt all next js from your projects.Kindly upload a project with next js supbase updated docs plzzzz ☺😊🤗

[@codewithantonio]

Thank you for the suggestion!

[@hvn1w]

As Antonio once said: "Great, great job" 🎉

[@user-xy5sm5nn3v]

I can't thank you enough for this !! THANK YOU SO MUCH

[@matheus8708]

Antonio, you are amazing man, I would really like to see this project using Prisma, PostgreSQL and Server Actions

[@CarlosTello-h5s]

nice project, nice interface

[@codewithantonio]

Glad you like it!

[@athergaming6878]

Amazing tutorial, and quick question, what do you think is the current best thing to use for db? Prisma, Convex or something else

[@patolorde]

Awesome thanks man!

[@codewithantonio]

Glad to help!

[@marekgacekdev]

You are awesome!

[@codewithantonio]

You too!!

[@ilyas8523]

This is awesome. Thank you

[@codewithantonio]

Glad you like it!

[@olawunitemitope2738]

​@@codewithantonioyea, it's been long you created a project like that

[@ankitrajpootr]

You always deliver amazing tutorial. But since 19 months I am requesting for Leetcode clone tutorial.

[@abhirajkumar882]

My man came back to give another punch of nightmare to generative AIs.

[@borisstanar1]

Svaka čast❤

[@davischoo]

Thank you so much. Hope to make a POS system tutorial.

[@codewithantonio]

Thank you for the suggestion!

[@AmirShakeel-o8y]

the GOAT

[@emigdio821]

What theme are you using Antonio? looks like Monokai Pro but slightly different, thanks for your nice work!

[@yaseerokino]

Really, You’re the best.

[@CarlosTello-m8h]

Great project

[@codewithantonio]

Thank you!

[@ARSHADKHAN-hc6pb]

Superman back 😁😁

[@LumisphereMusic]

There are many channels that are competing with you. I know you can stand out from them, Antonio. You just need to increase the perfection a bit.

[@LumisphereMusic]

and more AI, backend lol

[@smurfx6922]

Bro isnt pregnant but always delivers ❤❤❤

[@MehnazRk]

Hey Antonio, Can u teach us how to make custom clerk authentication means that we customize clerk page and style it without their so cold watermark 😊

[@Deus-lo-Vuilt]

Thanks Antonio ❤

[@codewithantonio]

You are welcome!

[@michaelfrieze]

This is insane.

[@codewithantonio]

Thank you!

[@codestacklab]

love your content, i only watch a piece of it what i need , but i really appreciate it is even great for beginners, currently building a heavy project, which also involves tickteting system, i will surelycheck it out for that , i may get new things

[@zohaibhassan8395]

Antonio, I have one question. Will your next new course be using next.js 15 and react 19 because groundbreaking updates are out & what about new viewers who are gonna watch your previous videos? They are going to struggle a lot completing the old courses.

[@mre9616]

great great job!

[@JohnAmao-k3f]

Hey Antonio! Let’s build something in healthcare next !

[@9622AX]

Thanks a ton 🎉

[@codewithantonio]

Always welcome!

[@xiongshi7476]

👍 thank you ❤Tks Antonio.

[@codewithantonio]

Your welcome!

[@laxmiprasanna4092]

I like the way you assume that the viewer is not aware about a library or concept. You start it by introducing the same thing in every video. Some people mwmay directlt watch this without prior knowledge

[@sijunnoh]

Thanks for great video. I have a question. Do you prefer hono to server action? I just want to know what makes you switch back to API routes.

[@codewithantonio]

I prefer Hono DX, especially the end-to-end typesafety

[@evanjihua]

Thanks bro❤😮

[@codewithantonio]

Glad you like it!

[@yusufkolawole4291]

Thanks my mentor

[@codewithantonio]

Enjoy it!

[@sulmanahmad6943]

Amazing 👍 please make a video on CRM clone like (pipedrive, privyr) in next js

[@aifootballmagicians7461]

Hi Antonio, I love your content! Would it be possible for you to create a multi-tenant application where customers can purchase memberships, giving them access to their own personalized dashboards? The features available would vary based on the membership level they choose. Each customer would also be able to manage their own users, payment options, and more. Thanks!

[@hameeeed5992]

Thanks man

[@Mohannadhamdy]

hey Antonio! Great Great Job 👏👏 This is one of the best tutorials I've ever watched! really love your idea of explanation here. I have a question about fetching the members: 8:15:04 if I'm using Supabase not Appwrite & using Clerk Auth not handling it manually, wouldn't be easier & better to create a JSONB column, call it "members" and inside of that we add a json with 3 keys name, id & role so that when we fetch the workspace we have all members with roles already? or that is not a good approach?