Special thanks to Adrian Hajdin - JS Mastery and his team for creating the Ultimate Next.js Course - the foundation of this project. Their guidance and resources have been invaluable in bringing this project to life.
- 🤖 Introduction
- ⚙️ Tech Stack
- 🔋 Features
- 🤸 Quick Start
- 🔗 Assets & Resources
DevOverflow is a modern, full-stack Q&A platform inspired by Stack Overflow, designed to help developers connect, share knowledge, and solve coding problems. Built with the latest features of Next.js 15, this platform offers a seamless experience for asking questions, providing answers, and exploring developer resources in a robust and responsive environment.
The application leverages advanced rendering strategies including SSG, ISR, SSR, and PPR to ensure optimal performance and user experience. With MongoDB as the database backbone and NextAuth for secure authentication, DevOverflow provides a reliable foundation for community interaction and knowledge sharing.
What sets DevOverflow apart is its integration with Google Gemini AI for generating intelligent responses to questions, along with gamification elements like badges and rewards to encourage participation. The platform also features a job discovery section, personalized recommendations, and a comprehensive tagging system to organize content effectively.
- Next.js 15.3.0 - Latest version with advanced rendering strategies
- TypeScript - For type safety and better developer experience
- MongoDB - NoSQL database for flexible data storage
- Mongoose - ODM for MongoDB, simplifying data modeling
- NextAuth (Auth.js) - Authentication solution supporting multiple providers
- Google Gemini - AI integration for generating answers
- ShadCN UI - Component library for consistent UI elements
- TailwindCSS - Utility-first CSS framework for styling
- React Hook Form - Form validation and handling
- Zod - Schema validation library
- MDX Editor - Rich text editing for questions and answers
👉 Authentication: Secure sign-in with NextAuth, supporting Email/Password, Google, and GitHub.
👉 Home Page: Displays questions with filters, search, and pagination for easy navigation.
👉 Recommendations: Personalized suggestions on the home page.
👉 Complex Layout: Organized layout with popular questions and tags in view.
👉 Question Details: View questions with rich content, including images and code blocks.
👉 Voting: Upvote/downvote on questions to highlight helpful content.
👉 View Counter: Tracks the number of views for each question.
👉 Bookmarking: Save questions for quick access later.
👉 Answer Posting: MDX editor with light/dark modes for submitting answers.
👉 AI Answer Generation: Get AI-generated responses to questions.
👉 Answer Filtering: Sort answers by newest or most-voted, with pagination.
👉 Answer Voting: Upvote/downvote answers to rank quality responses.
👉 Collections: Organized saved questions with filters, search, and pagination.
👉 Community: Browse all users with search, filters, and pagination.
👉 Profile: View user info, badges, and engagement history with pagination.
👉 Job Finder: Discover jobs with filters and search, tailored to the user’s location.
👉 Tags Page: List of all tags with question counts, filters, and pagination.
👉 Tag Details: View questions by tag with search and pagination.
👉 Ask a Question: Simple interface for posting new questions.
👉 Edit & Delete: Update or remove questions and answers with validation and authorization.
👉 Global Search: Find content across questions, users, tags, and more.
👉 Responsive Design: Fully optimized for a seamless experience on desktops, tablets, and mobile devices.
👉 High Performance: Fast loading and smooth interactions for an efficient user experience.
and many more, including code architecture and reusability
Follow these steps to set up the project locally on your machine.
Prerequisites
Make sure you have the following installed on your machine:
Cloning the Repository
git clone https://github.com/lhlam2515/devoverflow-arise.git
cd devoverflow-ariseInstallation
Install the project dependencies using npm:
npm installSet Up Environment Variables
Create a new file named .env in the root of your project and add the following content:
# Mongodb
MONGODB_URI=
# Google Generative AI
GOOGLE_GENERATIVE_AI_API_KEY=
# Rapid API
NEXT_PUBLIC_RAPID_API_KEY=
# Auth
AUTH_GOOGLE_ID=
AUTH_GOOGLE_SECRET=
AUTH_GITHUB_ID=
AUTH_GITHUB_SECRET=
AUTH_SECRET=Replace the placeholder values with your actual credentials. You can obtain these credentials by signing up on the respective websites
Running the Project
npm run devOpen http://localhost:3000 in your browser to view the project.
- Next.js Documentation
- Auth.js Documentation
- ShadCN UI Documentation
- TailwindCSS Documentation
- MongoDB Documentation
- Mongoose Documentation
Assets used in the project can be found here