Tutorial: Building a Full Stack React JS Project (Jira Clone) with Next JS, Shadcn UI, Tailwind, Clerk, and NeonDB 🔥

Posted by


In this tutorial, we will be building a full stack React JS project, a Jira clone, using Next JS, Shadcn UI, Tailwind, Clerk, and NeonDB. This project will demonstrate how to create a modern, responsive web application with a sleek user interface and a fully functional backend using these technologies.

Prerequisites

Before we get started, make sure you have the following installed on your machine:

  • Node.js
  • Git
  • npm or Yarn
  • MongoDB or another database of your choice

Setting up the Project

  1. Create a new Next JS project by running:

    npx create-next-app jira-clone
  2. Change into the project directory:

    cd jira-clone
  3. Install the necessary dependencies:

    npm install @clerk/clerk-react @clerk/clerk-js @tailwindcss/forms @headlessui/react @heroicons/react clerk @shadcn/shadcn-ui tailwindcss
  4. Create a new file named .env.local at the root of your project and add the following environment variables:
    NEXT_PUBLIC_CLERK_FRONTEND_API=https://your-camel-camelfish-01.clerk.app
    CLERK_API_KEY=your_clerk_api_key
    MONGODB_URI=your_mongodb_uri

Setting up Clerk

  1. Go to the Clerk Dashboard, create a new project, and copy the Frontend API URL and API Key.
  2. Add the Frontend API URL and API Key to the .env.local file.

Setting up NeonDB

  1. Sign up for a free account on NeonDB and create a new database.
  2. Copy the MongoDB URI and add it to the .env.local file.

Creating the Components

  1. Create a new folder named components in the src directory.
  2. Create the necessary components for your Jira clone, such as Navbar, Sidebar, TaskList, TaskItem, etc.

Building the Pages

  1. Create a new folder named pages in the src directory.
  2. Create the necessary pages for your Jira clone, such as Dashboard, Projects, Tasks, Profile, etc.

Styling with Tailwind CSS

  1. Create a new file named styles/globals.css at the root of your project and add the following Tailwind CSS imports:

    @import 'tailwindcss/base';
    @import 'tailwindcss/components';
    @import 'tailwindcss/utilities';
  2. Import the global styles in your pages/_app.js file:

    import '../styles/globals.css'
  3. Customize the Tailwind CSS config as needed in the tailwind.config.js file.

Building the Backend

  1. Create a new folder named api in the src directory.
  2. Create the necessary API routes using Next JS API routes, such as GET /api/projects, POST /api/projects, PUT /api/projects/:id, DELETE /api/projects/:id, etc.

Integrating NeonDB

  1. Install the NeonDB package:

    npm install neondb
  2. Create a new file named neon.js in the root of your project and configure the NeonDB connection:
    
    import { connect } from 'neondb';

const connectDB = async () => {
await connect(process.env.MONGODB_URI);
};

export default connectDB;


3. Import and use the NeonDB connection in your API routes:
```javascript
import connectDB from '../../neon';

connectDB();

Creating User Authentication

  1. Use Clerk to handle user authentication by wrapping your components with ClerkProvider.

  2. Add authentication checks to your API routes using Clerk’s useUser hook.

Running the Project

  1. Start the development server:

    npm run dev
  2. Open your browser and navigate to http://localhost:3000 to see your Jira clone in action.

Congratulations! You have successfully built a full stack React JS project, a Jira clone, using Next JS, Shadcn UI, Tailwind, Clerk, and NeonDB. Feel free to further customize and extend the functionality of your project to suit your needs. Happy coding! 🔥

0 0 votes
Article Rating

Leave a Reply

31 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
@RoadsideCoder
2 days ago

➡ My Interview Prep Course (50% Discount) –
https://roadsidecoder.com/course-details

@SaiyamYadav-j9b
2 days ago

How did you make the logo and get idea for your project name

@KRISHNATHAKKAR-h9l
2 days ago

We need more complex projects mainly using Nextjs aas frontend , Node/Hono as backend and can you please use NextAuth as Authentication
Thank you for this !!!!

@allmighty2000
2 days ago

This is so beautful and full of features , will definitely try

@SaiyamYadav-j9b
2 days ago

I want to know how did you make logo

@ushrangouhar952
2 days ago

I am a Frontend Engineer at Atlassian in Jira Software and this project is so great. Your JS interview videos helped me in cracking Atlassian interview. Thank you and big kudos to your effort for such amazing projects you provide for free.

@stavroskefaleas6320
2 days ago

Good work but it is already outdated because of NextJS 15!

@Z3r0CO01-x
2 days ago

Typescript plz

@afaqahmad-ef4ky
2 days ago

13:48

@KnowledgeDBman
2 days ago

Very cool Bro 🙂 why not typescript?

@rayyanabdulwajid7681
2 days ago

I built the same with vanilla JavaScript by asking Claude Ai to do it. And I understood better because it's in vanilla JavaScript.

@rohitrajput2097
2 days ago

Use Tsx instead of Jsx

@hamudxd9497
2 days ago

❤❤❤❤

@GaneshUails
2 days ago

Could you make a short video on generating image logos using AI in ChatGPT.

@whataboutcoding
2 days ago

You are killing it man. Kudos for the effort✌✌

@NOVAGAMING_08
2 days ago

We need some devops now ❤

@jawadrashid1000
2 days ago

Thanks for a nextjs project

@nikhilkorane9364
2 days ago

Superb project but why clerk because already in calendly clone you have used same

@coderex7404
2 days ago

bro how you build starting 10-20 second video in which website is getting moved and scrolled

@midhunmohan4692
2 days ago

How did you made the initial intro

31
0
Would love your thoughts, please comment.x
()
x