Skip to content

Mazennaji/developers-community-platform

BranchesTags

Repository files navigation

🚀 DevCommunity Platform

A premium developer community platform built with cutting-edge technologies

Where developers connect, collaborate, and grow together

Next.js TypeScript MongoDB Tailwind CSS

📸 Preview

DevCommunity Platform

Premium UI with sophisticated animations and modern design

✨ Overview

DevCommunity is a modern, feature-rich platform designed to bring developers together. Built with Next.js 16, TypeScript, and MongoDB, it offers a seamless experience for networking, knowledge sharing, and professional growth.

🎯 Key Highlights

  • Premium UI/UX - Sophisticated design with Framer Motion animations
  • Lightning Fast - Optimized with Next.js SSR and edge functions
  • Type-Safe - Full TypeScript implementation across the stack
  • Scalable Architecture - Built for growth and performance
  • Real-time Features - Instant chat and live updates
  • Developer-First - Designed by developers, for developers

🎨 Features

🔐 Authentication & Security

  • Multi-Provider Auth - NextAuth.js with GitHub, Google, and email
  • Secure Sessions - JWT-based authentication with refresh tokens
  • Protected Routes - Middleware-based route protection
  • Password Validation - Zod schema validation for data integrity

👥 User Experience

  • Customizable Profiles - Showcase your skills, projects, and experience
  • Professional Portfolio - Display your work and achievements
  • Resume Builder - Create and export professional resumes
  • Activity Dashboard - Track your engagement and analytics

📝 Content & Community

  • Rich Blog System - Write and share technical articles with markdown support
  • Code Highlighting - Syntax highlighting for multiple languages
  • Bookmarks - Save and organize your favorite content
  • Developer Directory - Discover and connect with peers

💬 Communication

  • Real-time Chat - Instant messaging with other developers
  • Notifications - Stay updated on community activity
  • Comments & Discussions - Engage with posts and articles

📚 Resources

  • Knowledge Base - Comprehensive documentation and guides
  • API Reference - Interactive API documentation
  • Changelog - Track platform updates and improvements
  • Learning Hub - Tutorials and best practices

🛠️ Developer Tools

  • API Integration - RESTful API for external integrations
  • Webhooks - Event-driven notifications
  • Analytics - Track your content performance
  • Export Options - Download your data anytime

🏗️ Tech Stack

Frontend

- Next.js 16 (App Router)
- TypeScript 5.0
- Tailwind CSS
- Framer Motion
- Lucide React
- React Hook Form
- Zod Validation

Backend

- Node.js
- Next.js API Routes
- MongoDB
- Mongoose ODM
- NextAuth.js
- JWT Authentication

Development & Quality

  • ESLint - Code linting and style enforcement
  • Prettier - Code formatting
  • TypeScript - Static type checking
  • Husky - Git hooks (optional)

📁 Project Architecture

developers-community-platform/
├── app/
│   ├── (main)/
│   │   ├── posts/
│   │   │   ├── [id]/
│   │   │   └── create/
│   │   ├── profile/
│   │   ├── chat/
│   │   └── community/
│   ├── api/
│   │   ├── auth/
│   │   ├── posts/
│   │   ├── bookmarks/
│   │   └── developers/
│   ├── api-reference/
│   ├── blog/
│   ├── changelog/
│   └── layout.tsx
├── components/
│   ├── ui/
│   │   ├── APIReferenceCard.tsx
│   │   ├── ChangeLogCard.tsx
│   │   ├── FeatureCard.tsx
│   │   ├── PostCard.tsx
│   │   └── ...
│   ├── Navbar.tsx
│   ├── Footer.tsx
│   └── ...
├── lib/
│   ├── models/
│   │   ├── User.ts
│   │   └── Post.ts
│   ├── schemas/
│   │   └── validation.ts
│   └── utils.ts
├── public/
│   └── assets/
├── .env.local
├── next.config.ts
├── tailwind.config.ts
└── tsconfig.json

🚀 Quick Start

Prerequisites

Ensure you have the following installed:

  • Node.js 18.x or higher
  • npm / yarn / pnpm
  • MongoDB (local or cloud instance)
  • Git

Installation

# Clone the repository
git clone https://github.com/yourusername/developers-community-platform.git

# Navigate to project directory
cd developers-community-platform

# Install dependencies
npm install
# or
yarn install
# or
pnpm install

# Create environment file
cp .env.example .env.local

# Configure your environment variables
# Edit .env.local with your settings

Environment Setup

Create a .env.local file with the following variables:

# Database
MONGODB_URI=your_mongodb_connection_string

# NextAuth
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_secret_key

# OAuth Providers
GITHUB_ID=your_github_client_id
GITHUB_SECRET=your_github_client_secret
GOOGLE_ID=your_google_client_id
GOOGLE_SECRET=your_google_client_secret

Development

# Start the development server
npm run dev

# Build for production
npm run build

# Start production server
npm run start

# Run linter
npm run lint

# Type checking
npm run type-check

Open http://localhost:3000 in your browser to see the application.

📡 API Documentation

Posts Endpoints

Method Endpoint Description Auth Required
GET /api/posts Retrieve all posts ❌
GET /api/posts/:id Get single post ❌
POST /api/posts Create new post ✅
PUT /api/posts/:id Update post ✅
DELETE /api/posts/:id Delete post ✅

Bookmarks Endpoints

Method Endpoint Description Auth Required
GET /api/bookmarks Get user bookmarks ✅
POST /api/bookmarks Add bookmark ✅
DELETE /api/bookmarks/:id Remove bookmark ✅

Developers Endpoints

Method Endpoint Description Auth Required
GET /api/developers List all developers ❌
GET /api/developers/:id Get developer profile ❌

🎨 Design System

Color Palette

Primary: Blue (#3B82F6) → Cyan (#06B6D4)
Secondary: Purple (#A855F7) → Pink (#EC4899)
Accent: Emerald (#10B981) → Teal (#14B8A6)
Neutral: Gray scale for text and backgrounds

Typography

  • Headings: Bold, gradient text effects
  • Body: Light to regular weights for readability
  • Code: Monospace with syntax highlighting

Components

All components follow a consistent design language with:

  • Glass morphism effects
  • Subtle animations
  • Hover states
  • Responsive layouts
  • Accessibility features

🤝 Contributing

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

  1. Fork the repository
  2. Create a feature branch 
    git checkout -b feature/amazing-feature
  3. Commit your changes 
    git commit -m 'feat: add amazing feature'
  4. Push to your branch 
    git push origin feature/amazing-feature
  5. Open a Pull Request

Contribution Guidelines

  • Follow the existing code style
  • Write meaningful commit messages
  • Add tests for new features
  • Update documentation as needed
  • Ensure all tests pass before submitting

📈 Roadmap

  • Mobile app (React Native)
  • Video chat integration
  • AI-powered code suggestions
  • Advanced analytics dashboard
  • Plugin system for extensions
  • Multi-language support
  • Dark/Light theme toggle
  • Email notifications
  • Advanced search filters
  • Mentorship matching system

🐛 Known Issues

Check the Issues page for current bugs and feature requests.

📄 License

This project was developed as a final bootcamp assignment and is intended for educational purposes only.

All rights reserved © 2026 Mazen Naji

👨‍💻 Author

Mazen Naji

Software Engineer & Full-Stack Developer

GitHub LinkedIn

🙏 Acknowledgments

Special thanks to:

  • Next.js Team - For the incredible framework
  • Vercel - For hosting and deployment solutions
  • MongoDB - For the robust database platform
  • Tailwind Labs - For the utility-first CSS framework
  • The Developer Community - For inspiration and support

💬 Support

Need help? Have questions?

Built with ❤️ by developers, for developers

⭐ Star this repo if you find it helpful!

About

A full stack developer community built with Next.js 16, GitHub authentication, MongoDB, and server-side rendering.

Topics

typescript mongodb mongoose nextjs tailwindcss

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages