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

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! 🔥