Devflow: Developer Hub - Nextjs 14

🌐 Live Demo

Explore the live demonstration of the project: nextjs14-devflow

📝 Description

DevOverflow is a complex Q&A platform for developers to ask questions, share knowledge, and learn from each other. It is built with Next.js, Tailwind CSS, Clerk, MongoDB, and more.

Functionalities

• Global Search: Enables quick content discovery across the platform.
• Sorting and Filtering with URL: Provides customizable view options through URL parameters.
• Voting: Facilitates community engagement through content evaluation.
• AI Answers: Offers automated assistance for common queries.
• Full Responsive Design: Ensures seamless experience across all devices.

Features

• StackOverflow-like Q&A: Users can ask questions, provide answers, and vote on the best solutions.
• Tagging System: Organize questions by relevant tags for easy searching and filtering.
• User Authentication: Secure login and registration using Clerk for authentication.
• Responsive Design: Tailwind CSS ensures a seamless experience across devices.
• Syntax Highlighting: Prism.js provides syntax highlighting for code snippets.
• Webhooks: Integration with webhooks for real-time updates and notifications.
• TypeScript Support: Written in TypeScript for enhanced developer productivity and code maintainability.
• Database Integration: MongoDB with Mongoose for efficient data storage and retrieval.

Folder Structure

nextjs14-devflow/
├── app/
├   ├── favicon.ico
├   ├── globals.css
├   ├── layout.tsx
├   ├── (auth)/
├   ├   ├── onboarding/
├   ├   ├   └── page.tsx
├   ├   ├── sign-in/[[...sign-in]]/
├   ├   ├   └── page.tsx
├   ├   ├── sign-up/[[...sign-up]]/
├   ├   ├   └── page.tsx
├   ├   └── layout.tsx
├   ├── (root)/
├   ├   ├── layout.tsx
├   ├   ├── (home)/
├   ├   ├   ├── loading.tsx
├   ├   ├   └── page.tsx
├   ├   ├── ask-question/
├   ├   ├   └── page.tsx
├   ├   ├── collection/
├   ├   ├   ├── loading.tsx
├   ├   ├   └── page.tsx
├   ├   ├── community/
├   ├   ├   ├── loading.tsx
├   ├   ├   └── page.tsx
├   ├   ├── edit-answer/
├   ├   ├   └── [id]/
├   ├   ├       └── page.tsx
├   ├   ├── jobs/
├   ├   ├   ├── loading.tsx
├   ├   ├   └── page.tsx
├   ├   ├── profile/
├   ├   ├   ├── [id]/
├   ├   ├   ├   ├── loading.tsx
├   ├   ├   ├   └── page.tsx
├   ├   ├   └── edit/
├   ├   ├       └── page.tsx
├   ├   ├── question/
├   ├   ├   ├── [id]/
├   ├   ├   ├   └── page.tsx
├   ├   ├   └── edit/
├   ├   ├       └── [id]/
├   ├   ├           └── page.tsx
├   ├   └── tags/
├   ├       ├── [id]/
├   ├       ├   ├── loading.tsx
├   ├       ├   └── page.tsx
├   ├       ├── page.tsx
├   ├       └── loading.tsx
├   └── api/
├       ├── openai/
├       ├   └── route.ts
├       ├── rapidapi/
├       ├   └── route.ts
├       └── webhook/clerk/
├              └── route.ts
├── components/
├   ├── cards/
├   ├   ├── AnswerCard.tsx
├   ├   ├── JobCard.tsx
├   ├   ├── QuestionCard.tsx
├   ├   └── UserCard.tsx
├   ├── forms/
├   ├   ├── Answer.tsx
├   ├   ├── Profile.tsx
├   ├   └── Question.tsx
├   ├── jobs/
├   ├   └── JobBadge.tsx
├   ├── shared/
├   ├   ├── AllAnswers.tsx
├   ├   ├── AnswersTab.tsx
├   ├   ├── EditDeleteAction.tsx
├   ├   ├── Filter.tsx
├   ├   ├── Filters.tsx
├   ├   ├── LeftSidebar.tsx
├   ├   ├── Metric.tsx
├   ├   ├── NoResult.tsx
├   ├   ├── Pagination.tsx
├   ├   ├── ParseHTML.tsx
├   ├   ├── ProfileLink.tsx
├   ├   ├── QuestionsTab.tsx
├   ├   ├── RenderTag.tsx
├   ├   ├── RightSidebar.tsx
├   ├   ├── Stats.tsx
├   ├   ├── Switcher.tsx
├   ├   ├── Votes.tsx
├   ├   ├── navbar/
├   ├   ├   ├── Navbar.tsx
├   ├   ├   ├── Mobile.tsx
├   ├   ├   └── Theme.tsx
├   ├   └── search/
├   ├       ├── GlobalFilters.tsx
├   ├       ├── GlobalResult.tsx
├   ├       ├── GlobalSearch.tsx
├   ├       └── LocalSearchbar.tsx
├   └── ui/ (generated by shadcn-ui)
├       ├── badge.tsx
├       ├── button.tsx
├       ├── form.tsx
├       ├── input.tsx
├       ├── label.tsx
├       ├── menubar.tsx
├       ├── select.tsx
├       ├── sheet.tsx
├       ├── skeleton.tsx
├       ├── switch.tsx
├       ├── tabs.tsx
├       ├── textarea.tsx
├       ├── toast.tsx
├       ├── toaster.tsx
├       └── use-toast.ts
├── constants/
├   ├── filters.ts
├   └── index.ts
├── content/
├   ├── countries.json
├   └── jsearch.json
├── context/
├   └── ThemeProvider.ts
├── datbase/
├   ├── answer.model.ts
├   ├── interaction.model.ts
├   ├── question.model.ts
├   ├── tag.model.ts
├   └── user.model.ts
├── lib/
├   ├── mongoose.ts
├   ├── utils.ts
├   ├── validations.ts
├   └── actions/
├       ├── answer.action.ts
├       ├── general.action.ts
├       ├── interaction.action.ts
├       ├── job.action.ts
├       ├── question.action.ts
├       ├── tag.action.ts
├       ├── user.action.ts
├       └── shared.types.d.ts
├── public/
├   ├── next.svg
├   ├── vercel.svg
├   └── assets/
├       ├── icons/[[...]].svg
├       └── images/[[...]].{svg,png}
├── styles/
├   ├── prism.css
├   └── theme.css
├── types/
├   └── index.d.ts
├── .eslintrc.json
├── .gitignore
├── README.md
├── components.json
├── middleware.ts
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.ts
└── tsconfig.ts

📖 Table of Contents

Table of Contents

• Live Demo
• Description
• Technologies Used
• Get Started
  • Prerequisites
  • Installation and Run Locally
  • Scripts
• Environment Variables
• Deployment
  • Deploy to production (manual)
  • Deploy on Vercel (recommended)
  • Deploy on Netlify
• Contributing
  • Bug / Feature Request
• Acknowledgements
• References
• Contact Us
• License

✨ Technologies Used

Devflow is built using the following technologies:

• TypeScript: TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
• Next.js: Next.js is a React framework for building server-side rendered and statically generated web applications.
• Tailwind CSS: Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces.
• ESLint: ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code.
• Prettier: Prettier is an opinionated code formatter.
• Clerk: Clerk is a developer-first authentication API that handles all the logic for user sign up, sign in, and more.
• Shadcn-UI: Shadcn UI is a React UI library that helps developers rapidly build modern web applications.
• TinyMCE: TinyMCE is the world's most popular JavaScript library for rich text editing.
• MongoDB: MongoDB is a general purpose, document-based, distributed database built for modern application developers and for the cloud era.
• Mongoose: Mongoose is a MongoDB object modeling tool designed to work in an asynchronous environment.
• Prism.js: Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind.
• Query String: Parse and stringify URL query strings.
• Svix: Svix is a webhook proxy that allows you to receive webhooks locally.
• Zod: Zod is a TypeScript-first schema declaration and validation library.
• Vercel: Vercel is a cloud platform for frontend developers, providing the frameworks, workflows, and infrastructure to build a faster, more personalized Web.

🧰 Get Started

To get this project up and running in your development environment, follow these step-by-step instructions.

📋 Prerequisites

In order to install and run this project locally, you would need to have the following installed on your local machine.

• Node.js
• NPM
• Git

⚙️ Installation and Run Locally

Step 0:

Important

• the application uses Clerk for Authentication and User Management, therefore, you need to create Clerk account here and sets the CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY environment variables in .env file. Also, the different URLs for the Clerk sign-in, sign-up, after sign-in and after sign-up pages.
• the application uses a MongoDB database, therefore, you need to create a database and connect it to the application, for this, change the MONGODB_URL environment variable in .env file located in server folder.
• the application uses TinyMCE, therefore, you need to create TinyMCE account here and sets the NEXT_PUBLIC_TINYMCE_API_KEY environment variable in .env file.
• the application uses OpenAI API, therefore, you need to create OpenAI account here and sets the OPENAI_API_KEY environment variable in .env file.
• the application uses RapidAPI, therefore, you need to create RapidAPI account here, subscribe to the JSearch API and sets the RAPIDAPI_API_KEY environment variable in .env file.

After following all the instructions above, we'll want to create a new webhook on Clerk. To do this, go to the Clerk Dashboard, click on the "Webhooks" tab, and then click "Add Endpoint". For the Endpoint URL, enter http://<PASTE-YOUR-LINK-HERE>/api/webhook/clerk. For the events, select the "user". Then click "Create" to create the webhook. get the signing secret and set it as CLERK_WEBHOOK_SECRET environment variable in .env file.

Step 1:

Download or clone this repo by using the link below:

git clone https://github.com/ladunjexa/nextjs14-devflow.git

Step 2:

Execute the following command in the root directory of the downloaded repo in order to install dependencies:

npm install

Step 3:

Execute the following command in order to run the development server locally:

npm run dev

Step 4:

Open http://localhost:3000 with your browser to see the result.

📜 Scripts

All scripts are defined in the package.json file. Here is a list of all scripts:

Script	Action
npm install	Installs dependencies
npm run dev	Starts local dev server at localhost:3000
npm run build	Build your production site to ./dist/
npm run start	Start your production site locally
npm run lint	Run ESLint

🔒 Environment Variables

Environment variables[^12] can be used for configuration. They must be set before running the app.

Environment variables are variables that are set in the operating system or shell, typically used to configure programs.

Devflow uses Clerk, TinyMCE, RapidAPI, OpenAI API and MongoDB as external services. You need to create an account on each of these services and get the required credentials to run the app.

Create a .env file in the root directory of the project and add the following environment variables:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<CLERK_PUBLISHABLE_KEY>
CLERK_SECRET_KEY=<CLERK_SECRET_KEY>
NEXT_CLERK_WEBHOOK_SECRET=<CLERK_WEBHOOK_SECRET>

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/onboarding

NEXT_PUBLIC_TINY_MCE_API_KEY=<YOUR_TINY_MCE_API_KEY>

MONGODB_URL=<YOUR_MONGODB_URL>

NEXT_PUBLIC_SERVER_URL=<YOUR_SERVER_URL>

OPENAI_API_KEY=<YOUR_OPENAI_API_KEY>

RAPID_API_KEY=<YOUR_RAPID_API_KEY>

🚀 Deployment

Deploy to production (manual)

You can create an optimized production build with the following command:

npm run build

Deploy on Vercel (recommended)

The easiest way to deploy this Next.js app is to use the Vercel Platform.

Deploy on Netlify

You can also deploy this Next.js app with Netlify.

Check out Next.js deployment documentation for more details.

Website Image

💎 Acknowledgements

I'd like to express my gratitude to the following people who helped me with this project and made it possible:

• Clerk
• MongoDB
• Mongoose
• Zod
• Shadcn
• Tailwind CSS
• Svix
• TinyMCE
• OpenAI API
• RapidAPI
• Vercel

📞 Contact Us

🚀 Contact

Connect with me through various portals :

	Social Media	Username	Link
	Email	shabazuddin.198@gmail.com	Email
	LinkedIn	Shabazuddin Mohammad	LinkedIn
	Instagram	shabaz_uddin	Instagram
	Facebook	Shabaz	Facebook
	Twitter	shabazuddin786	Twitter

I'm always open to collaboration and new opportunities! Feel free to reach out and connect with me. 🌟