DevConnect is a developer-focused social platform that blends GitHub-style repositories and Twitter-style micro-posts. Share code snippets, project updates, and connect with fellow developers—all in one place.
- User Authentication – Secure signup/login with JWT and bcrypt password hashing
- Post Feed – Share text, images, videos, and code updates with syntax highlighting
- Media Upload – Upload images and videos via Cloudinary integration
- GitHub Integration – Display and showcase your public repositories
- Social Interactions – Like posts, comment, and follow other developers
- User Profiles – Comprehensive profile pages with posts, repos, and activity
- Responsive Design – Clean UI built with React and TailwindCSS, works on all devices
- Real-time Updates – Dynamic content loading with modern React patterns
| Layer | Technology |
|---|---|
| Frontend | React 19, Redux Toolkit, React Router, TailwindCSS |
| Backend | Node.js, Express.js, MongoDB, Mongoose |
| Authentication | JWT (JSON Web Tokens) |
| Media Storage | Cloudinary |
| Build Tools | Vite, ESLint |
| Deployment | Ready for Vercel, Heroku, or similar platforms |
Before running this project, make sure you have the following installed:
- Node.js (v18 or higher)
- npm or yarn
- MongoDB (local installation or MongoDB Atlas)
- Git
git clone https://github.com/DATBOI-MAYANK/DevConnect.git
cd DevConnectNavigate to the backend directory and install dependencies:
cd backend
npm installCreate a .env file in the backend directory with the following variables:
PORT=5000
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key
JWT_EXPIRES_IN=7d
CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret
NODE_ENV=developmentStart the backend server:
npm run serverThe backend will run on http://localhost:5000
Open a new terminal and navigate to the frontend directory:
cd frontend
npm installStart the frontend development server:
npm run devThe frontend will run on http://localhost:5173
DevConnect/
├── backend/
│ ├── Database/ # Database connection
│ ├── Routes/ # API routes
│ ├── controllers/ # Route controllers
│ ├── middlewares/ # Custom middlewares
│ ├── models/ # Mongoose models
│ ├── utils/ # Utility functions
│ ├── constants/ # App constants
│ ├── public/ # Static files
│ ├── app.js # Express app configuration
│ ├── index.js # Server entry point
│ └── package.json # Backend dependencies
└── frontend/
├── src/
│ ├── components/ # Reusable components
│ ├── pages/ # Page components
│ ├── store/ # Redux store and slices
│ ├── utils/ # Utility functions
│ └── App.jsx # Main app component
├── public/ # Static assets
├── index.html # HTML template
├── vite.config.js # Vite configuration
└── package.json # Frontend dependencies
npm run server- Start the development server with nodemon
npm run dev- Start the development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLint
POST /api/auth/register- User registrationPOST /api/auth/login- User loginPOST /api/auth/logout- User logout
GET /api/posts- Get all postsPOST /api/posts- Create a new postGET /api/posts/:id- Get a specific postPUT /api/posts/:id- Update a postDELETE /api/posts/:id- Delete a post
GET /api/users/profile- Get user profilePUT /api/users/profile- Update user profileGET /api/users/:id- Get user by ID
Create .env files in both backend and frontend directories:
PORT=5000
MONGODB_URI=mongodb://localhost:27017/devconnect
JWT_SECRET=your-super-secret-jwt-key
JWT_EXPIRES_IN=7d
CLOUDINARY_CLOUD_NAME=your_cloudinary_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret
NODE_ENV=developmentVITE_API_URL=http://localhost:5000/api
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Navbar sections
- Edit Post
- Follow Users
- Github Repo section update
Mayank - @DATBOI-MAYANK
If you have any questions or need help, feel free to:
- Open an issue on GitHub
- Contact me via email
- Connect with me on social media