🧠 DevOverflow is a complex Next.js 14 app that exhibits Q&A platform for developers to ask questions, share knowledge, and learn from each other.
MIT License
Explore the live demonstration of the project: nextjs14-devoverflow
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.
nextjs14-devoverflow/
├── 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
To get this project up and running in your development environment, follow these step-by-step instructions.
In order to install and run this project locally, you would need to have the following installed on your local machine.
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
andCLERK_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 inserver
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-devoverflow.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.
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[^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>
You can create an optimized production build with the following command:
npm run build
The easiest way to deploy this Next.js app is to use the Vercel Platform.
You can also deploy this Next.js app with Netlify.
Check out Next.js deployment documentation for more details.
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:
git checkout -b improve-feature
)git commit -am 'Improve feature'
)git push origin improve-feature
)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.
I'd like to express my gratitude to the following people who helped me with this project and made it possible:
JSMastery. (2023). Ultimate Next.js 14 Course | Become a top 1% Next.js 14 developer. E-Learning.
DevOverflow is open source software licensed as MIT and is free to use — See LICENSE for more details.