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
-
Create a new Next JS project by running:
npx create-next-app jira-clone
-
Change into the project directory:
cd jira-clone
-
Install the necessary dependencies:
npm install @clerk/clerk-react @clerk/clerk-js @tailwindcss/forms @headlessui/react @heroicons/react clerk @shadcn/shadcn-ui tailwindcss
- 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
- Go to the Clerk Dashboard, create a new project, and copy the Frontend API URL and API Key.
- Add the Frontend API URL and API Key to the
.env.local
file.
Setting up NeonDB
- Sign up for a free account on NeonDB and create a new database.
- Copy the MongoDB URI and add it to the
.env.local
file.
Creating the Components
- Create a new folder named
components
in thesrc
directory. - Create the necessary components for your Jira clone, such as
Navbar
,Sidebar
,TaskList
,TaskItem
, etc.
Building the Pages
- Create a new folder named
pages
in thesrc
directory. - Create the necessary pages for your Jira clone, such as
Dashboard
,Projects
,Tasks
,Profile
, etc.
Styling with Tailwind CSS
-
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';
-
Import the global styles in your
pages/_app.js
file:import '../styles/globals.css'
- Customize the Tailwind CSS config as needed in the
tailwind.config.js
file.
Building the Backend
- Create a new folder named
api
in thesrc
directory. - 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
-
Install the NeonDB package:
npm install neondb
- 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
-
Use Clerk to handle user authentication by wrapping your components with
ClerkProvider
. - Add authentication checks to your API routes using Clerk’s
useUser
hook.
Running the Project
-
Start the development server:
npm run dev
- 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! 🔥
➡ My Interview Prep Course (50% Discount) –
https://roadsidecoder.com/course-details
How did you make the logo and get idea for your project name
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 !!!!
This is so beautful and full of features , will definitely try
I want to know how did you make logo
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.
Good work but it is already outdated because of NextJS 15!
Typescript plz
13:48
Very cool Bro 🙂 why not typescript?
I built the same with vanilla JavaScript by asking Claude Ai to do it. And I understood better because it's in vanilla JavaScript.
Use Tsx instead of Jsx
❤❤❤❤
Could you make a short video on generating image logos using AI in ChatGPT.
You are killing it man. Kudos for the effort✌✌
We need some devops now ❤
Thanks for a nextjs project
Superb project but why clerk because already in calendly clone you have used same
bro how you build starting 10-20 second video in which website is getting moved and scrolled
How did you made the initial intro