DevGram is a developer-first social and collaboration platform where developers can share projects, publish technical blogs, collaborate in real time, and discover new developers and technologies.
It combines developer portfolios, social networking, and team collaboration tools into a single platform built specifically for developers.
Developers usually use multiple platforms:
- GitHub for code hosting
- Medium / Dev.to for blogging
- Discord / Slack for collaboration
- LinkedIn / Twitter for sharing work
DevGram brings these workflows together into one unified ecosystem.
Developers can:
- Share projects
- Publish technical blogs
- Discover developers
- Collaborate via messaging
- Work together in shared workspaces
- Explore a personalized developer feed
Each user has a public developer profile containing:
- Profile photo and bio
- Skills and interests
- Projects and blogs
- Followers and following
This allows developers to maintain a public developer portfolio.
Developers can showcase their projects with:
- Project title and description
- Technology stack tags
- GitHub repository links
- Live demo links
- Screenshots or media uploads
- Engagement metrics
DevGram supports long-form technical blogs where developers can share:
- Tutorials
- System design explanations
- Engineering insights
- Development experiences
Blogs support tagging, comments, and engagement metrics.
Users can:
- Follow other developers
- Like posts
- Comment on blogs and projects
- Discover content via tags
This enables networking and community engagement.
DevGram includes Workspaces, collaborative environments where teams can organize and communicate.
Workspaces allow developers to:
- Collaborate in teams
- Organize discussions
- Manage members
- Share updates on projects
Workspaces use role-based permissions.
- Full control of the workspace
- Manage roles
- Delete workspace
- Manage members
- Create channels
- Moderate conversations
- Participate in discussions
- Send messages
- Access shared resources
DevGram provides real-time communication using Socket.io.
Features include:
- Direct messages
- Workspace channel messaging
- Message editing and deletion
- Persistent chat history
- Online presence indicators
DevGram uses a custom feed ranking system to deliver relevant content.
The feed combines multiple signals:
- Content similarity
- Recency decay
- Engagement scoring
- Follow prioritization
- Trending posts
- Exploration posts
- Cursor-based pagination
/feed?cursor=0&limit=20
- Infinite scrolling
- Tag-based filtering
- Seen-content filtering
- Guaranteed inclusion of followed users' posts
- React
- Vite
- React Router
- Tailwind CSS
- Axios
- Socket.io Client
- Node.js
- Express.js
- MongoDB
- Mongoose
- JWT Authentication
- Socket.io
- MongoDB Atlas
- Cloudinary
- Vercel (frontend)
- Render (backend)
DevGram
│
├── backend
│ ├── controllers
│ ├── models
│ ├── routes
│ ├── middleware
│ ├── socket
│ ├── utils
│ ├── config
│ └── server.js
│
├── frontend
│ ├── src
| | ├── api
│ │ ├── components
│ │ ├── pages
| | ├── layouts
│ │ ├── routes
│ │ ├── context
| | ├── constants
│ │ └── utils
│ │
│ └── vite.config.js
│
└── README.md
git clone https://github.com/AbhinavNeema/DevGram.git
cd DevGram
Backend
cd backend
npm install
Frontend
cd frontend
npm install
Create a .env file inside the backend folder.
PORT=5001
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret
FRONTEND_URL=http://localhost:5173
Backend
cd backend
npm run dev
Frontend
cd frontend
npm run dev
Frontend runs at:
http://localhost:5173
Backend API runs at:
http://localhost:5001
Contributions are welcome.
Steps:
- Fork the repository
- Create a feature branch
- Commit your changes
- Submit a pull request
Abhinav Neema