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

Key Concepts

• Jira Clone: A project management platform replica built for learning purposes.
• Next.js: A React framework for building web applications with server-side rendering and routing.
• React: A JavaScript library for building user interfaces.
• Tailwind CSS: A utility-first CSS framework for rapid UI development.
• Hono.js: A lightweight web application framework, similar to Express.js, used for building APIs.
• Aight: A self-hosted open-source platform for user authentication, database, and storage.
• Shadcn UI: A collection of pre-built, customizable React components styled with Tailwind CSS.
• React Hook Form: A library for managing forms in React applications.
• Zod: A TypeScript-first schema declaration and validation library.
• TanStack Query (React Query): A library for managing, caching, and synchronizing asynchronous data in React applications.
• RPC (Remote Procedure Call): A protocol that allows a program on one machine to execute a procedure on another machine.
• Server Components: React components that run on the server and can access server-side resources.
• Client Components: React components that run in the browser and can interact with the DOM.
• Route Groups: A Next.js feature for organizing routes without affecting the URL structure.
• Layouts: A Next.js feature for creating reusable UI structures across multiple pages.
• Middleware: Functions that intercept requests and responses to perform actions like authentication or logging.
• Environment Variables: Variables that store configuration settings for an application.
• API Routes: Server-side endpoints in Next.js for handling API requests.
• Authentication: The process of verifying the identity of a user.
• Authorization: The process of determining what resources a user has access to.
• Cookies: Small text files stored on a user's computer to remember information about them.
• Sessions: A server-side mechanism for tracking a user's activity across multiple requests.
• Base64: A method for encoding binary data as text.

Detailed Summary

Project Overview

The course focuses on building a fully functional Jira clone using modern web technologies. The goal is to enhance developers' skills in building complex web applications and understanding project management tools. The core technologies used are Next.js, React, Tailwind CSS, Hono.js, and Aight.

Core Features Implementation

• Task Management:
  • Implementation of "My Tasks" page with table, Kanban board, and calendar views.
  • Individual task pages for viewing and editing task details, including descriptions and deletion with confirmation modals.
  • Filtering capabilities on the task list based on criteria like assignee.
  • Editing system for changing assignees, moving tasks between projects, and updating task status.
• User Management:
  • Members page to view all workspace members.
  • Role-based Access Control (RBAC) implementation: setting members as guests, promoting to admins, or removing them.
• Project Management:
  • Project pages with analytics and settings.
  • Creation, editing, and management of projects within a workspace.
• Task Creation:
  • Task creation form with fields for name, due date, assignee, status, and associated project.
• Workspace Customization:
  • Workspace settings for renaming and uploading a custom image.
  • Workspace switcher component for easy navigation between workspaces.
• Invite System:
  • Sharable invite links for onboarding new members.
  • Integration of new members into the workspace with immediate access to task management.

Setting Up the Project

1. System Requirements:
   • Node.js version 18.18 or higher.
   • Alternative runtime: Bun (optional).
2. Runtime Selection:
   • Node.js: Use npx create-next-app.
   • Bun: Use bunx create next-app.
3. Next.js Installation:
   • Command: bunx [email protected] jro-clone (or npx equivalent).
   • Configuration:
     • TypeScript: Yes
     • ESLint: Yes
     • Tailwind CSS: Yes
     • src directory: Yes
     • App Router: Yes
     • Customize default import alias: No
4. Project Directory:
   • Open the project in Visual Studio Code or preferred editor.
   • Verify package versions in package.json: React 18, React DOM 18, Next.js 14.2.14.
5. Running the App:
   • Use npm run dev or Bun Run Dev.
   • Access the app at localhost:3000.

Shaten UI Setup

1. Initialization:
   • Command: bunx shat [email protected] in it (or npx equivalent).
   • Style: New York
   • Color: Neutral
   • CSS Variables: Yes
2. Installed Packages:
   • radx-ui react-icons, class-variance-authority, CLX, Lucid react, Tailwind merge, Tailwind CSS animate.
3. Configuration:
   • Modified tailwind.config.js and global.css.
   • New CN method in src/lib/utils.ts for Tailwind class merging.
4. Adding Components:
   • Command: bunx shat [email protected] add button (or npx equivalent).
   • Import components from components/ui.
5. Customization:
   • Modify component variants and sizes directly in the component files.
   • Example: Adding a "test" variant to the button component with a green background.
6. Tailwind CSS Intellisense:
   • Install the "Tailwind CSS Intellisense" extension in VS Code.
7. Tailwind Configuration:
   • Ensure that tailwind.config.js includes the features folder in the content array.

Adding Multiple Shaten Components

• Command: Buon x-- bun Shaden at 2.1.0 add then use arrow keys and space bar to select multiple components.
• Components added: Avatar, badge, calendar, card, chart, checkbox, dialogue, drawer, drop-down menu, input, label, popover, scroll area, separator, sheet, skeleton, soner, table, tabs, and text area.

Customizing Components

• Modifying button variants (primary, destructive, secondary, ghost, muted, territory) with custom background gradients, text colors, and hover effects.
• Adjusting button sizes (large, small, extra small) with specific heights, padding, and font sizes.
• Customizing the default button class name with font-semi bold and custom disabled states.
• Changing input and select component heights.

Fixing Shaten UI Errors

• Addressing errors in newly added components due to version incompatibilities between Shaten UI and Next.js.
• Running Bun Run build or npm run build to identify lint errors.
• Fixing errors in calendar. DSX, chart. DSX, input. DSX, and text area. DSX by removing unused props, disabling unused vars, and replacing empty interfaces with type aliases.

Authentication Screens and Routing

• Creating sign-in and sign-up folders inside the app directory, each with a page. TSX file.
• Understanding the use of default exports for pages and layouts.
• Creating layout files (layout. DSX) for reusable UI elements, such as navbars.
• Using the children prop in layout files to render page content.
• Creating nested routes by adding folders inside the sign-in and sign-up directories.
• Using route groups (folders enclosed in parentheses) to organize routes without affecting the URL structure.
• Creating a shared layout file for the sign-in and sign-up routes using a route group.
• Using logo ipsum to find a logo for the project and adding it to the public folder.
• Customizing the logo color by modifying the SVG file.
• Adding a navbar with a logo and a "Sign Up" button to the shared layout file.
• Using the CN utility to merge Tailwind classes for conditional styling.

Component Structure and Styling

• Creating a features folder to house authentication-related components.
• Creating signin-card. TSX and signup-card. TSX components inside the features/out/components directory.
• Using named exports for components and default exports for pages and layouts.
• Styling the sign-in and sign-up cards with Tailwind CSS and Shaten UI components.
• Creating a custom dotted-dash-separator. TSX component for visual separation.
• Using the react-icons library to add icons to the "Log in with Google" and "Log in with GitHub" buttons.

Form Handling with React Hook Form and Zod

• Installing react-hook-form, zod, and @hookform/resolvers.
• Creating Zod schemas for form validation (email, password, name).
• Using the useForm hook to manage form state and validation.
• Using the ZodResolver to connect the Zod schema to the form.
• Using the form, form-control, form-field, form-item, and form-message components from Shaten UI to structure the form.
• Using the field prop from form-field to access form state and validation methods.
• Using the handle submit method to submit the form and log the values.

API Routes with Hono

• Creating API routes in Next.js by adding a route. DS file inside a folder in the app/api directory.
• Using the get export to handle GET requests.
• Using dynamic route parameters by creating folders with bracketed names (e.g., [userId]).
• Using Hono.js to create API routes with code-based routing.
• Installing Hono.js: bun ad hono.
• Creating a catch-all route in Next.js to handle all API requests with Hono.
• Using the handle wrapper from hono/verel to integrate Hono with Next.js.
• Using c. request. param to access route parameters in Hono.
• Using c. Json to return JSON responses in Hono.

End-to-End Type Safety with Hono and TanStack Query

• Installing TanStack React Query: bun ad @tack/[email protected].
• Following the TanStack React Query documentation for advanced server rendering in Next.js.
• Creating a query-provider. DSX component to wrap the application with the QueryClientProvider.
• Creating a new API route in the features/out/server directory using Hono.
• Installing hono/zod-validator: bun ad @ono/zod-validator.
• Using the Z validator middleware to validate the request body against a Zod schema.
• Creating a shared schema file (features/out/schemas.ts) to define the form schema for both the client and the server.
• Using c. request. valid Json to access the validated request body in Hono.
• Creating an RPC (Remote Procedure Call) endpoint in Hono to share the API specifications between the server and the client.
• Creating a type for the entire API using type of routes.
• Creating an RPC client using hono/client to generate a type-safe client for the API.
• Creating a custom React Hook (useLogin. DSX) to call the RPC endpoint using TanStack React Query.
• Using infer request type and infer response type from Hono to generate the types for the request and response.
• Passing the validated data from the form to the RPC endpoint using the generated client.

App Right Setup and Authentication

• Creating an account on app.io and creating a new project.
• Setting up a database and a collection in app Right.
• Creating an API key with the sessions. write and users. write scopes.
• Installing the app Right Node.js SDK: bun ad node-app [email protected].
• Creating an admin client in lib/app right. DS to interact with the app Right API.
• Using the server-only package to prevent accidental client-side access to the admin client.
• Creating API routes for user registration and login using the app Right admin client.
• Creating a new account and a new session for each registered user.
• Setting a cookie with the session ID to authenticate the user.
• Creating a session middleware to authenticate requests and protect API routes.
• Using get cookie and set cookie from hono/cookie to manage cookies in Hono.
• Creating a use current hook to fetch the currently logged-in user.
• Using next/navigation to redirect users based on their authentication status.

Workspace Creation and Management

• Creating a workspace entity with attributes for name and user ID.
• Creating API endpoints for creating, updating, and deleting workspaces.
• Creating a workspace creation form with validation using React Hook Form and Zod.
• Using TanStack React Query to manage the workspace creation process.
• Displaying success and error messages using the soner library.
• Implementing file upload functionality using form data and base64 encoding.
• Creating a workspace switcher component to allow users to switch between workspaces.
• Using the useQueryState hook from KN to manage the state of the workspace creation model in the URL.

Members and Invite System

• Creating a members collection to store the relationship between users and workspaces.
• Creating an enum for member roles (admin, member).
• Creating API endpoints for managing members (listing, adding, removing, updating).
• Creating a member avatar component to display member information.
• Implementing an invite system with unique invite codes for each workspace.
• Creating a join page where users can enter the invite code and join a workspace.
• Using server components and server actions to protect routes and perform server-side operations.

Refactoring and Code Improvements

• Refactoring the code to reduce duplication and improve readability.
• Abstracting the client initialization code into a reusable function.
• Using type-safe queries and mutations with Hono and TanStack Query.
• Using server components and server actions to protect routes and perform server-side operations.
• Using the server-only package to prevent accidental client-side access to server-side resources.

Conclusion

The course provides a comprehensive guide to building a complex web application with modern web technologies. It covers a wide range of topics, including front-end development with React and Next.js, back-end development with Hono.js, data management with TanStack Query, form handling with React Hook Form and Zod, authentication with Aight, and UI design with Tailwind CSS and Shaten UI. The course emphasizes type safety, code reusability, and best practices for building scalable and maintainable web applications.