Next.js 14 DevOverflow

🌐 Live Demo

Explore the live demonstration of the project: nextjs14-devoverflow-by-rohit

📝 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.

Project Code Structure

Folder Structure

nextjs14-devoverflow/
├── app/
├   ├── page.tsx(Intro Page for Web-Application)
├   ├── globals.css
├   ├── layout.tsx
├   ├── (auth)/
├   ├   ├── 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
├   ├   ├── 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/
├       ├── chatgpt/
├       ├   └── route.ts
├       └── webhook/
├              └── route.ts
├── components/
├   ├── cards/
├   ├   ├── AnswerCard.tsx
├   ├   ├── QuestionCard.tsx
├   ├   └── UserCard.tsx
├   ├── forms/
├   ├   ├── Answer.tsx
├   ├   ├── Profile.tsx
├   ├   └── Question.tsx
├   ├── home/
├   ├   ├── HomeFilters.tsx
├   ├── shared/
├   ├   ├── AllAnswers.tsx
├   ├   ├── AnswersTab.tsx
├   ├   ├── EditDeleteAction.tsx
├   ├   ├── Filter.tsx
├   ├   ├── LeftSidebar.tsx
├   ├   ├── Metric.tsx
├   ├   ├── NoResult.tsx
├   ├   ├── Pagination.tsx
├   ├   ├── ParseHTML.tsx
├   ├   ├── ProfileLink.tsx
├   ├   ├── QuestionsTab.tsx
├   ├   ├── RenderTag.tsx
├   ├   ├── RightSidebar.tsx
├   ├   ├── Stats.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
├       ├── card.tsx
├       ├── carousel.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
├── 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
├       ├── 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

Client Side

page.tsx within /app folder is acting as a entry point which is a Intro Landing Page.
(auth) contains Authentication setup using Clerk.
/components/shared folder contains only those component which we wanna share across the application.
Context components => Context is a React library which by default is client-side, But Next.js is server-side so don't forget to use "use client".
/app/api contains "Webhooks" which is Connecting our 'Clerk-user-database' to 'MongoDb-database'
/app/api/webhooks contains webhooks which is connecting our 'clerk database' and 'mongoDB database'.
/app/api/chatgpt since chatgpt is paid now, I'm using chatgpt API from RapidAPI which is still free for 500 uses. (HEHEHE)
/app/(root)/question/[id] is a dynamic route for question details page.
/app/api/webhooks contains webhooks which is connecting our 'clerk database' and 'mongoDB database'.

Server Side

Remember when creating a Server-action, Always connect to database first.
don't forget to enable server actions in next.config like this
"use server" in server-action function or on top of server-action separate file.

const nextConfig = {
  experimental: {
    // serverActions are available by default now, So the below experimental code is not required
    // serverActions: true,
    // Compile MDX files using the new Rust compiler.
    mdxRs: true,
    // Choose your own choice of backend library
    serverComponentsExternalPackages: ["mongoose"],
  },
};

Visit this blog for understandingNext.js Server-Actions Blog
/lib/actions this folder contains all of the Server Actions.
/lib/mongoose.ts this file creates our Database
/database folder contains all the database models
don't forget to disable 'Vercel Authentication' which is acting as a thorn in sending requests from clerk webhook. and enable 'username' and 'name' in clerk dashboard to match the data pattern of 'userModel' of mongoDB collection.

⚙️ Package Installations

ESLint

Install "JavaScript Standard Style' for ESLint. Then add 'standard' in .eslintrc.json.

npm install eslint-config-standard

Run "ESLint" to check any potential errors & bug.

npm run lint

Tailwind plugin of "ESLint". Sometimes we write styles like this min-h-screen flex-col flex which is not a logical method to write tailwind and we have to read the whole class everytime. So, in order to maintain readability and logical pattern this Plugin comes in handy. After installation simply add it in your .eslintrc.json file.

npm install eslint-plugin-tailwindcss

To avoid conflicts between Prettier and ESLint, install. This will removes all "ESLint" rules that could conflict with Prettier. Once Installed, add "prettier" to your .eslintrc.json file.

npm install eslint-config-prettier

"Prism.js" is a fantastic code highlighting library. The code highlighting in question details page you are seeing! is done using "Prism.js"

npm install prismjs

"HTML-React-Parser" to convert an HTML string to one or more React elements.

npm install html-react-parser

example : Here as you can see instead of using built-in HTML parser property "creatElement()" we're using HTML-React-Parser for better and easier coding.

import parse from 'html-react-parser';

parse('<p>Hello, World!</p>'); // React.createElement('p', {}, 'Hello, World!')

"npm check updates" This will upgrades your packages.json dependencies to the latest versions. ignoring specified versions. And to run it just type

ncu

Authentication

We're using Clerk authentication services for easier and better auth process. Everything is happening according to docs available on Clerk's website, So for any questions visit the site.
Installation > Wrapping app in clerkProvider > Adding API in .env file > Adding SignIn & SignUp component > Adding UserButton component.

ShadCN Component Library

This is NOT a component library.

What do you mean by not a component library?

I mean you do not install it as a dependency. It is not available or distributed via npm.

Pick the components you need. Copy and paste the code into your project and customize to your needs. The code is yours.

We just have install each component we wanna use, So it's pretty damn light library without any heavy depencies
To install see the ShadCN documentation.
When you install this library, you'll see it overwrote your global.css and tailwind.config.ts. But Don't worry, Just copy and paste your old styles.
It'll add /lib/utils.ts in your code for better customization. and It'll also add ui in your component folder which contains ShadCN components.

Webhooks Svix

"Svix": provides a package for verifying the webhook signature, making it easy to verify the authenticity of the webhook events.

npm install svix

For more info, Visit Clerk Webhooks Guide

✨ Technologies Used

DevOverflow 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.

⚙️ 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/RohitKS7/devflow-application.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.

DevOverflow 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.

🔧 Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

To fix a bug or enhance an existing module, follow these steps:

Fork the repo
Create a new branch (git checkout -b improve-feature)
Make the appropriate changes in the files
Commit your changes (git commit -am 'Improve feature')
Push to the branch (git push origin improve-feature)
Create a Pull Request 🎉

📩 Bug / Feature Request

If you find a bug (failure of a module to execute its intended function), kindly open an issue here by including the issue with a title and clear description.

If you'd like to request a new function, feel free to do so by opening an issue here. Please include sample queries and their corresponding results.

💎 Acknowledgements

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

📚 References

JSMastery. (2023). Ultimate Next.js 14 Course | Become a top 1% Next.js 14 developer. E-Learning.

📞 Connect With Me

TIPS :

Start by modifying favicon, title etc. in layout.tsx

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Next.js 14 DevOverflow

🌐 Live Demo

📝 Description

Project Code Structure

Client Side

Server Side

⚙️ Package Installations

ESLint

Authentication

ShadCN Component Library

Webhooks Svix

✨ 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

📞 Connect With Me

About

Releases 1

Packages

Languages

Name		Name	Last commit message	Last commit date
Latest commit History 135 Commits
app		app
components		components
constants		constants
context		context
database		database
lib		lib
public		public
styles		styles
types		types
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
README.md		README.md
components.json		components.json
middleware.ts		middleware.ts
next.config.mjs		next.config.mjs
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

RohitKS7/Dev-OverFlow-Application

Folders and files

Latest commit

History

Repository files navigation

Next.js 14 DevOverflow

🌐 Live Demo

📝 Description

Project Code Structure

Client Side

Server Side

⚙️ Package Installations

ESLint

Authentication

ShadCN Component Library

Webhooks Svix

✨ 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

📞 Connect With Me

About

Resources

Stars

Watchers

Forks

Releases 1

Packages 0

Languages

Packages