DevConnect – Developer Community Platform

A modern full-stack developer community platform where developers can share ideas, create discussions, and interact through posts, likes, and comments.

---

Overview

DevConnect is a full-stack Developer Community Platform that enables developers to connect, share knowledge, and interact through posts and discussions. The project is developed using Next.js, React, TypeScript, Express.js, and MongoDB Atlas, demonstrating the integration of modern frontend technologies with a RESTful backend and a cloud-hosted database.

The application provides a clean and responsive interface where users can create posts, like community posts, comment on discussions, and delete posts when required. All information is stored in MongoDB Atlas and is retrieved dynamically through REST API calls, providing a smooth and responsive user experience.

---

Project Workflow

The application starts by loading the homepage, where the frontend sends a request to the backend server to retrieve all existing posts stored in the MongoDB database.

The backend processes the request, fetches the required information using Mongoose, and returns the data in JSON format. The frontend dynamically renders the posts without requiring a page refresh.

Before creating a post, the user enters a display name. After writing the post content, the frontend sends the information to the backend using a POST request. The backend validates the request, stores the post in MongoDB Atlas, and immediately returns the newly created post, allowing it to appear instantly in the community feed.

Users can interact with posts by liking them, adding comments, and deleting posts. Each interaction communicates with the backend through REST API endpoints. The backend updates the MongoDB database and returns the latest information, allowing the frontend to remain synchronized in real time.

This project demonstrates complete CRUD (Create, Read, Update, Delete) operations together with frontend-backend communication, cloud database integration, and dynamic rendering using modern web development technologies.

---

Features

Create Posts

• Publish developer posts instantly
• Enter a display name before posting
• Real-time post updates

Like Posts

• Like community posts
• Live like counter
• Instant UI updates

Comment System

• Add comments to posts
• View all comments for every post
• Dynamic comment loading

Delete Posts

• Remove posts instantly
• Automatic interface refresh

Responsive Interface

• Clean and modern layout
• Navigation bar
• Responsive design
• Card-based post display

---

Project Architecture

                 User
                  │
                  ▼
        Next.js Frontend (React)
                  │
          REST API Requests
                  │
                  ▼
          Express.js Backend
                  │
              Mongoose
                  │
                  ▼
          MongoDB Atlas Database

---

Technologies Used

Technology	Purpose
Next.js	Frontend Framework
React	User Interface Development
TypeScript	Type Safety
Tailwind CSS	Responsive Styling
Node.js	JavaScript Runtime
Express.js	REST API Backend
MongoDB Atlas	Cloud Database
Mongoose	MongoDB Object Data Modeling (ODM)
Git	Version Control
GitHub	Source Code Hosting
VS Code	Development Environment

---

Folder Structure

DeveloperCommunityPlatform
│
├── frontend
│   ├── src
│   │   ├── app
│   │   ├── models
│   │   ├── components
│   │   └── lib
│   └── package.json
│
├── backend
│   ├── config
│   ├── controllers
│   ├── models
│   ├── routes
│   ├── server.ts
│   └── package.json
│
└── README.md

---

Installation

Clone the Repository

git clone <repository-url>

---

Install Frontend Dependencies

cd frontend
npm install

---

Install Backend Dependencies

cd backend
npm install

---

Running the Project

Start the Backend

cd backend
npm run dev

Backend runs on:

http://localhost:5000

---

Start the Frontend

cd frontend
npm run dev

Frontend runs on:

http://localhost:3000

---

API Endpoints

Posts

Method	Endpoint	Description
GET	/api/posts	Fetch all posts
POST	/api/posts	Create a new post
PATCH	/api/posts/:id/like	Like a post
DELETE	/api/posts/:id	Delete a post

---

Comments

Method	Endpoint	Description
GET	/api/comments/:postId	Fetch comments
POST	/api/comments	Add a comment

---

Future Enhancements

The current version of DevConnect provides the core functionality required for a developer community platform. Future versions can include additional features to improve usability, scalability, and user experience.

• User Authentication (JWT/OAuth)
• User Profiles
• Post Editing
• Image Uploads
• Search & Filters
• Notifications
• Dark Mode
• Bookmarks
• Trending Posts
• Infinite Scrolling

---

Contributors

• Team 2 – Developer Community Platform
• ACM Project Team

---

License

This project is developed for educational and academic purposes.

---

If you found this project useful, consider giving it a ⭐ on GitHub!