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

This podcast episode serves as a complete guide for developers eager to leverage Next.js and the ChatCN UI for modern web application development. It walks you through the entire process, from setting up your project to implementing advanced features such as authentication, workspace management, and user role controls. With step-by-step instructions and valuable insights into integrating backend services like Appwrite and middleware solutions like Hono.js, this episode equips listeners to build secure, responsive, and efficient applications, while also highlighting the significance of type safety and user experience throughout the development journey.

Outlines

Sign in to continue reading, translating and more.

Open full episode in Podwise

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

Code With Antonio

00:00Course Introduction and Project Overview

Course Introduction and Project Overview

03:01Setting up the Next.js Project

Setting up the Next.js Project

08:18Installing and Configuring ChatCN UI

Installing and Configuring ChatCN UI

13:32Adding and Customizing ChatCN Components

Adding and Customizing ChatCN Components

17:09Tailwind CSS Configuration and Component Library

Tailwind CSS Configuration and Component Library

21:42Building Authentication Screens with Next.js Routing

Building Authentication Screens with Next.js Routing

44:44Implementing Authentication Layouts and Logo Integration

Implementing Authentication Layouts and Logo Integration

53:32Creating Authentication Forms with React Hook Form and Zod

Creating Authentication Forms with React Hook Form and Zod

1:13:35Refining Authentication Forms and Handling Errors

Refining Authentication Forms and Handling Errors

1:28:57Introduction to Next.js API Routes and Hono.js

Introduction to Next.js API Routes and Hono.js

1:38:12Implementing Hono.js for Type-Safe API Routes

Implementing Hono.js for Type-Safe API Routes

1:47:18Integrating TanStack Query with Hono.js for End-to-End Type Safety

Integrating TanStack Query with Hono.js for End-to-End Type Safety

1:52:53Setting up Appwrite and Creating Authentication API Routes

Setting up Appwrite and Creating Authentication API Routes

2:02:53Building Type-Safe RPC Utilities with Hono.js and Appwrite

Building Type-Safe RPC Utilities with Hono.js and Appwrite

2:11:10Implementing Login and Registration with Appwrite and React Query

Implementing Login and Registration with Appwrite and React Query

2:21:49Setting up Appwrite Database and Collections

Setting up Appwrite Database and Collections

2:37:36Implementing Workspace Creation and Data Storage

Implementing Workspace Creation and Data Storage

2:49:59Building a Session Middleware for Authentication

Building a Session Middleware for Authentication

3:06:57Implementing User Authentication and Redirection

Implementing User Authentication and Redirection

3:14:10Creating a Reusable User Button Component

Creating a Reusable User Button Component

3:24:39Refactoring Authentication with Server-Side Authorization Checks

Refactoring Authentication with Server-Side Authorization Checks

3:31:07Building the Dashboard Layout with Sidebar and Navbar

Building the Dashboard Layout with Sidebar and Navbar

3:45:29Creating Workspace Entity and Database Interactions

Creating Workspace Entity and Database Interactions

4:07:00Building the Create Workspace Form

Building the Create Workspace Form

4:19:17Implementing Image Upload Functionality

Implementing Image Upload Functionality

4:45:56Fetching Workspaces and Building the Workspace Switcher

Fetching Workspaces and Building the Workspace Switcher

5:08:48Implementing Workspace Member Management

Implementing Workspace Member Management

5:22:36Creating Workspace Invite Codes and Join Functionality

Creating Workspace Invite Codes and Join Functionality

5:38:45Building Individual Workspace Pages and Navigation

Building Individual Workspace Pages and Navigation

5:43:43Implementing Onboarding Redirects and Workspace Creation

Implementing Onboarding Redirects and Workspace Creation

5:52:46Creating a Responsive Modal Component

Creating a Responsive Modal Component

6:06:30Integrating the Create Workspace Modal and URL State Management

Integrating the Create Workspace Modal and URL State Management

6:16:59Refactoring Server-Side Queries and Client Initialization

Refactoring Server-Side Queries and Client Initialization

6:22:03Implementing Workspace Update and Deletion Functionality

Implementing Workspace Update and Deletion Functionality

6:46:41Building the Workspace Settings Page

Building the Workspace Settings Page

7:02:38Adding Delete and Reset Invite Code Functionality to Workspace Settings

Adding Delete and Reset Invite Code Functionality to Workspace Settings

7:35:03Implementing the Workspace Join System

Implementing the Workspace Join System

7:53:06Building the Members List Page and Component

Building the Members List Page and Component

8:10:05Implementing Member Role Management and Deletion

Implementing Member Role Management and Deletion