Explore the live demonstration of the project: nextjs14-devoverflow
DevOverflow, a sophisticated Next.js 14 application, is meticulously designed as a comprehensive Q&A platform catering specifically to developers. This platform functions as a dynamic hub where developers, regardless of their skill levels or expertise, converge to seek guidance, exchange insights, and foster a collaborative learning environment
Project Folder Structure
Devoverflow_Nextjs14/
βββ .env.local
βββ .eslintrc.json
βββ app/
β βββ auth/
β β βββ sign-in/
β β β βββ [...sign-in]/
β β β βββ page.tsx
β β βββ sign-up/
β β βββ [...sign-up]/
β β βββ page.tsx
β βββ root/
β β βββ home/
β β β βββ loading.tsx
β β β βββ page.tsx
β β βββ ask-question/
β β β βββ page.tsx
β β βββ collection/
β β β βββ loading.tsx
β β β βββ page.tsx
β β βββ community/
β β β βββ loading.tsx
β β β βββ page.tsx
β β βββ jobs/
β β β βββ loading.tsx
β β β βββ page.tsx
β β βββ profile/
β β β βββ edit/
β β β β βββ page.tsx
β β β βββ [id]/
β β β βββ loading.tsx
β β β βββ page.tsx
β β βββ question/
β β βββ edit/
β β β βββ [id]/
β β β βββ page.tsx
β β βββ [id]/
β β βββ page.tsx
β βββ api/
β β βββ chatgpt/
β β βββ jobSearch/
β β βββ webhook/
β β βββ favicon.ico
β βββ globals.css
β βββ components/
β βββ cards/
β β βββ AnswerCard.tsx
β β βββ JobCard.tsx
β β βββ QuestionCard.tsx
β β βββ UserCard.tsx
β βββ forms/
β β βββ Answer.tsx
β β βββ Profile.tsx
β β βββ Question.tsx
β βββ Home/
β β βββ HomeFilters.tsx
β βββ jobs/
β β βββ JobBadge.tsx
β βββ shared/
β βββ AllAnswers.tsx
β βββ AnswersTab.tsx
β βββ EditDeleteAction.tsx
β βββ Filter.tsx
β βββ Filters.tsx
β βββ LeftSidebar.tsx
β βββ Metric.tsx
β βββ Navbar/
β β βββ MobileNav.tsx
β β βββ Navbar.tsx
β β βββ Theme.tsx
β βββ NoResult.tsx
β βββ Pagination.tsx
β βββ ParseHTML.tsx
β βββ ProfileLink.tsx
β βββ QuestionTab.tsx
β βββ RenderTag.tsx
β βββ RightSidebar.tsx
βββ components.json
βββ constants/
β βββ filters.ts
β βββ index.ts
βββ content/
β βββ countries.json
β βββ jsearch.json
βββ context/
β βββ ThemeProvider.tsx
βββ database/
β βββ answer.model.ts
β βββ interaction.model.ts
β βββ question.model.ts
β βββ tag.model.ts
β βββ user.model.ts
βββ lib/
β βββ actions/
β β βββ answer.action.ts
β β βββ general.action.ts
β β βββ interaction.action.ts
β β βββ job.action.ts
β β βββ question.action.ts
β β βββ shared.types.d.ts
β β βββ tag.actions.ts
β β βββ user.action.ts
β βββ mongoose.ts
β βββ utils.ts
β βββ validations.ts
β βββ middleware.ts
β βββ next-env.d.ts
βββ next.config.js
βββ package-lock.json
βββ package.json
βββ postcss.config.js
βββ public/
β βββ assets/
β βββ icons/
β β βββ (various SVG and image files)
β βββ images/
β βββ (various image files)
βββ README.md
βββ settings.json
βββ styles/
β βββ prism.css
β βββ theme.css
β βββ tailwind.config.ts
βββ tsconfig.json
βββ types/
βββ index.d.ts
Table of Contents
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.
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:
Note 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.
Note MONGODB_URL
environment variable in .env
file located in server
folder.
Note NEXT_PUBLIC_TINYMCE_API_KEY
environment variable in .env
file.
Note OPENAI_API_KEY
environment variable in .env
file.
Note 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/RakshithDB1/Devoverflow_Nextjs14.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=/
NEXT_PUBLIC_TINY_EDITOR_API_KEY=<YOUR_TINY_EDITOR_API_KEY>
MONGODB_URL=<YOUR_MONGODB_URL>
NEXT_PUBLIC_SERVER_URL=<YOUR_SERVER_URL>
OPENAI_API_KEY=<YOUR_OPENAI_API_KEY>
RapidAPI_Key=<YOUR_RAPID_API_KEY>
RapidAPI_Host=<YOUR_RAPIDAPI_HOST>
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.
JSMastery. (2023). Ultimate Next.js 14 Course | Become a top 1% Next.js 14 developer. E-Learning.