Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/aryanyadav-dev/devoverflow

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.
https://github.com/aryanyadav-dev/devoverflow

mongodb nextjs openapi typescript

Last synced: 4 days ago
JSON representation

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.

Awesome Lists containing this project

README 

        





  
DevOverflow



 
Welcome to DevOverflow, a full-stack application built with Next.js 14 and Server Actions, featuring an array of powerful functionalities to enhance your developer community experience. DevOverflow is designed to be a comprehensive platform for developers to ask questions, share knowledge, and engage in a thriving community.



 


   

   

   

   

   

   



> 






## 🚀 Features



- **Next.js Server Actions**: Leverage the power of Next.js server actions for enhanced backend functionality.

- **Webhooks for Authentication Service**: Utilize webhooks for streamlined authentication services.

- **Ask and Answer Questions:** Engage in meaningful discussions by posing questions and providing answers

- **Bookmarking:** Save and organize your favorite posts for future reference.

- **Recommendation System for Posts**: Unparalleled recommendation system to enhance content discovery.

- **Global Database Data-Fetching**: Efficient data fetching from all models of the database for the search bar.

- **AI-Generated Answers**: Harness the power of AI to generate insightful answers to questions.

- **Community Badges & Reputation System**: Earn badges and build your reputation within the community.

- **Views and Voting Mechanism**: Track views and enable a robust voting mechanism for content.

- **Filter and Pagination**: Enjoy filter and pagination features across various pages for easy navigation.

- **Responsive UI**:Experience a responsive user interface that adapts to different screen sizes.

- **User Authentication**: Create a personalized account to fully engage with the community.

- **Themes**: Switch between light and dark themes for a comfortable viewing experience.

- **Multiple Layouts & Grouped Routes**: Explore a well-organized interface with multiple layout options and grouped routes.

- **Form Handling**: Efficiently handle forms for seamless user interactions.

- **Tag Browsing:** Explore content categorically through an intuitive tag-based browsing system.



## 🛠️ Tech Stack



- **Next.js 14**: A React framework for building server-rendered applications.

- **Tailwind CSS**: A utility-first CSS framework for responsive designs.

- **TypeScript:** A typed superset of JavaScript that compiles to plain JavaScript.

- **ESLint**: Pluggable linting utility for JavaScript and TypeScript.

- **MongoDB**: Store and manage data efficiently.

- **Mongoose**: MongoDB object modeling for Node.js.

- **clerk**: Simplify authentication workflows.

- **hookform/resolver**: Webhooks for authentication services.

- **Shadcn UI:**: Components from the Shadcn UI library.

- **tailwindcss/typography**: Typography plugin for Tailwind CSS.

- **prismjs**: Syntax highlighting for code blocks.

- **react-hook-form**: Forms management for React.

- **zod**: A TypeScript-first schema declaration.



## 🛠️ Run the project



- Clone the repository.

- Install dependency using:



```bash

npm install

# or

yarn install

```



- Run the development server:



```bash

npm run dev

# or

yarn dev

# or

pnpm dev

# or

bun dev

```



- Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.



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



```

# Clerk secrets for api key and webhook

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=

CLERK_SECRET_KEY=

NEXT_CLERK_WEBHOOK_SECRET=



# Clerk routes

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=/



#  Tiny editor

NEXT_PUBLIC_TINY_EDITOR_API_KEY=



# Database

MONGO_DB_URI=



# OpenAI and public secrets

NEXT_PUBLIC_SERVER_URL=http://localhost:3000

OPENAI_API_KEY=

```



Notes



- **Clerk Authentication:** Create a Clerk account [here](https://clerk.com/) and set the `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` and `CLERK_SECRET_KEY` environment variables in the `.env.local` file. Configure different URLs for Clerk sign-in, sign-up, after sign-in, and after sign-up pages.

- **MongoDB Database:** Create a MongoDB database and connect it to the application. Change the `MONGO_DB_URI` environment variable in the `.env.local` file.

- **TinyMCE**: Create a TinyMCE account [here](https://www.tiny.cloud/) and set the `NEXT_PUBLIC_TINY_EDITOR_API_KEY` environment variable in the `.env.local` file.

- **OpenAI API:** Create an OpenAI account here and set the `OPENAI_API_KEY` environment variable in the `.env.local` file.

- After deploy, create a new webhook on Clerk, add the endpoint of `http:///api/webhook`, set `user` events, and set the `NEXT_CLERK_WEBHOOK_SECRET` environment variable in the `.env.local` file.



## 📝 References



[JSMastery. (2023). Ultimate Next.js 14 Course | Become a top 1% Next.js 14 developer.](https://www.jsmastery.pro/ultimate-next-course) E-Learning.