A modern, community-driven Q&A platform for developers, built as an enhanced alternative to Stack Overflow. DevQnA enables developers to ask questions, share knowledge, and collaborate with a global community of programmers.

https://dev-qna.vercel.app/

• Question & Answer System: Post technical questions and provide detailed answers
• Voting System: Upvote helpful questions and answers to improve visibility
• Tag-based Organization: Categorize questions with relevant technology tags
• Rich Text Editor: Create formatted posts with code syntax highlighting
• Search & Filtering: Find relevant questions using advanced search and filters
• AI assisted Answer Generation: The members can enhance their answers with AI

• Authentication: Secure login/signup with NextAuth.js
• OAuth Integration: Sign in with GitHub, Google, and other providers
• User Profiles: Personalized profiles with activity history and statistics
• Reputation System: Track user engagement through votes and contributions

• Collections: Save and organize favorite questions for later reference
• Job Board: Browse and post developer job opportunities
• Community Feed: Stay updated with latest questions and discussions
• Interactive Discussions: Comment and engage with the community

• Dark/Light Theme: Choose your preferred visual experience
• Responsive Design: Optimized for desktop, tablet, and mobile devices
• Real-time Updates: Live notifications and activity feeds
• Accessibility: Built with inclusive design principles

• Next.js 15.5.0 - React framework with App Router
• React 19.1.0 - Modern React with concurrent features
• TypeScript 5 - Type-safe JavaScript development
• Tailwind CSS 4.1.12 - Utility-first CSS framework

• NextAuth.js 5.0.0-beta.29 - Authentication and session management
• MongoDB 8.18.1 - NoSQL database with Mongoose ODM
• bcryptjs - Password hashing and security

• ESLint 9 - Code linting and quality assurance
• Prettier - Code formatting and consistency
• Turbopack - Fast development and build tooling

• Radix UI - Accessible component primitives
• Lucide React - Beautiful icon library
• React Hook Form - Performant form handling
• Zod - TypeScript-first schema validation
• Sonner - Toast notifications
• Next Themes - Theme switching functionality

• @mdxeditor/editor - Advanced markdown editing
• AI SDK - Integration with AI services for enhanced features
• Bright - Code syntax highlighting

Before running this project, make sure you have:

• Node.js (version 18 or higher)
• npm or yarn package manager
• MongoDB database instance
• Git for version control

1. Clone the repository

   git clone https://github.com/md-zeon/DevQnA.git
   cd DevQnA

2. Install dependencies

   npm install

3. Environment Setup Create a .env.local file in the root directory with the following variables:

   # Database
   MONGODB_URI=your_mongodb_connection_string
   
   # NextAuth.js Configuration
   NEXTAUTH_URL=http://localhost:3000
   NEXTAUTH_SECRET=your_nextauth_secret
   
   # OAuth Providers (optional)
   GITHUB_CLIENT_ID=your_github_client_id
   GITHUB_CLIENT_SECRET=your_github_client_secret
   GOOGLE_CLIENT_ID=your_google_client_id
   GOOGLE_CLIENT_SECRET=your_google_client_secret
   
   # AI Integration (optional)
   OPENAI_API_KEY=your_openai_api_key

4. Start the development server

   npm run dev

5. Open your browser Navigate to http://localhost:3000 to see the application running.

• npm run dev - Start the development server with Turbopack
• npm run build - Build the application for production
• npm run start - Start the production server
• npm run lint - Run ESLint for code quality checks

DevQnA/
├── app/                    # Next.js App Router pages and layouts
│   ├── (auth)/            # Authentication pages
│   ├── (root)/            # Main application pages
│   ├── api/               # API routes
│   ├── globals.css        # Global styles
│   └── layout.tsx         # Root layout
├── components/            # Reusable React components
│   ├── cards/            # Card components (Question, Answer, etc.)
│   ├── forms/            # Form components
│   ├── navigation/       # Navigation components
│   ├── ui/               # Base UI components
│   └── ...
├── database/             # Database models and schemas
├── lib/                  # Utility functions and configurations
│   ├── actions/          # Server actions
│   ├── handlers/         # API handlers
│   └── ...
├── constants/            # Application constants
├── types/                # TypeScript type definitions
├── public/               # Static assets
└── ...

• Create, edit, and delete questions
• Rich text formatting with code syntax highlighting
• Tag-based categorization for better organization
• Question metrics (views, votes, answers)

• Provide comprehensive answers to questions
• Vote on answer quality and helpfulness
• Mark accepted answers for solved questions

• User reputation and badge system
• Activity feeds and notifications
• Profile customization and statistics

• Full-text search across questions and answers
• Advanced filtering by tags, date, and activity
• Related questions suggestions

The project uses Next.js 15 with the App Router. Key configurations in next.config.ts:

• External packages for server-side logging
• MDX remote transpilation
• Image optimization with remote patterns

MongoDB collections for:

• Users and authentication accounts
• Questions and answers
• Tags and tag-question relationships
• Votes and interactions
• Collections and user preferences

npm run build
npm run start

Ensure all environment variables are properly set in your deployment platform:

• Database connection strings
• OAuth provider credentials
• API keys for external services

We welcome contributions from the developer community! Here's how you can help:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Make your changes and test thoroughly
4. Commit your changes (git commit -m 'Add amazing feature')
5. Push to the branch (git push origin feature/amazing-feature)
6. Open a Pull Request

• Follow TypeScript best practices
• Write meaningful commit messages
• Add tests for new features
• Update documentation as needed
• Ensure responsive design principles

This project is licensed under the MIT License - see the LICENSE file for details.

• Next.js team for the amazing framework
• Vercel for platform and deployment insights
• Radix UI for accessible component primitives
• Tailwind CSS for utility-first styling
• MongoDB for the flexible database solution

• GitHub OAuth - Social login with GitHub accounts
• Google OAuth - Social login with Google accounts
• Email/Password - Traditional credential-based authentication

• Password Hashing - Secure password storage with bcryptjs
• Session Management - Secure JWT-based sessions
• Input Validation - Comprehensive form validation with Zod schemas
• Rate Limiting - API protection against abuse

• Job Search API - Integration with JSearch (RapidAPI) for job listings
• IP Geolocation - Location detection for personalized content
• Country Data - REST Countries API for location-based features

• Authentication (/api/auth/*) - User authentication and session management
• Questions (/api/questions/*) - Q&A functionality
• Users (/api/users/*) - User profile management
• AI (/api/ai/*) - AI-powered features and suggestions

• Turbopack - Fast development and build performance
• Image Optimization - Next.js built-in image optimization
• Code Splitting - Automatic route-based code splitting
• Database Indexing - Optimized MongoDB queries with proper indexing

• Pino Logger - High-performance logging system
• Error Handling - Comprehensive error management and reporting
• Request Tracking - API request monitoring and analytics

• TypeScript - Full type safety across the application
• ESLint - Code linting and style enforcement
• Prettier - Automatic code formatting
• Pre-commit Hooks - Automated quality checks

The application uses MongoDB with the following main collections:

// Core Models
- Users: Developer profiles and authentication
- Questions: Technical questions and discussions
- Answers: Responses to questions
- Tags: Technology categorization
- Votes: User voting on content
- Collections: Saved question collections
- Interactions: User activity tracking
- Jobs: Job posting and applications

# Copy environment template
cp .env.example .env.local

# Edit with your configuration
nano .env.local

# For local MongoDB
mongod

# Or use MongoDB Atlas (recommended for production)
# Create cluster at https://mongodb.com/atlas

# Install dependencies
npm install

# Start development server
npm run dev

# Open http://localhost:3000

• Real-time Chat - Instant messaging between developers
• Code Playground - Integrated code execution environment
• Advanced Analytics - Detailed usage and performance metrics
• API Documentation - Built-in API documentation system
• Mobile App - React Native companion application
• Team Collaboration - Organization and team management features

• ✅ Next.js 15 upgrade with App Router
• ✅ TypeScript 5 migration
• ✅ Tailwind CSS 4 styling updates
• ✅ Enhanced search with global search functionality
• ✅ Job board integration with external APIs

• 📋 Preliminary Design Review (PDR) - Complete design review and architecture decisions
• 🏗️ System Design Document - Detailed technical specifications and architecture
• 📊 Project File Structure - Visual representation of the entire codebase

• 🏛️ System Architecture - High-level system architecture diagram
• 🔗 Class Diagram - Database models and class relationships
• 🗄️ ER Diagram - Entity relationship diagram with database schema
• 🔄 Sequence Diagram - User interaction flows and system sequences
• 🧭 UI Navigation Flow - User interface navigation and state flows

• RESTful API Structure - Complete endpoint documentation
• Authentication Flow - OAuth and session management details
• Database Schema - MongoDB collections and relationships
• Error Handling - Standardized error response formats

1. Environment Setup - Configure MongoDB and OAuth providers
2. Local Development - Run the development server with hot reload
3. Database Seeding - Set up initial data for testing
4. Testing - Run the test suite and verify functionality

1. Fork & Clone - Create your own copy of the repository
2. Feature Branch - Create a branch for your changes
3. Development - Implement features following project patterns
4. Testing - Write tests for new functionality
5. Pull Request - Submit changes for review

• 📋 API Endpoints - Complete API reference and examples
• 🚀 Deployment Guide - Step-by-step deployment instructions
• 👥 User Guide - How to use the DevQnA platform effectively
• 🔧 Troubleshooting - Common issues and solutions
• 📝 Contributing Guide - How to contribute to the project
• 🐛 Build Errors Tracking - Detailed analysis of build issues and solutions

• Next.js Documentation - Framework documentation
• MongoDB Guide - Database documentation
• NextAuth.js Docs - Authentication guide
• Tailwind CSS - Styling framework
• TypeScript Handbook - Type safety guide

• 📖 Documentation - Comprehensive setup and API guides in this README and /docs folder
• 💬 GitHub Issues - Bug reports, feature requests, and technical questions
• 📧 Email Support - Direct contact: [email protected]
• 🌐 Portfolio - View more projects: zeon-portfolio.netlify.app
• 💼 LinkedIn - Connect with me: linkedin.com/in/zeanur-rahaman-zeon

This is a personal portfolio project showcasing full-stack development skills. Feel free to:

• Fork and modify the code for your own learning
• Report issues or suggest improvements via GitHub Issues
• Use as reference for your own projects
• Reach out for collaboration opportunities

Built by Zeanur Rahaman Zeon as a comprehensive portfolio piece demonstrating:

• Modern Web Development: Next.js 15, React 19, TypeScript 5
• Full-Stack Architecture: MongoDB, API design, authentication
• UI/UX Design: Responsive design, dark/light themes, accessibility
• Development Practices: Clean code, testing, documentation
• Project Management: Complete development lifecycle from conception to deployment

DevQnA - Showcasing modern full-stack development expertise. 🚀

Built with ❤️ by Zeanur Rahaman Zeon