Connect, share ideas, follow developers, and engage through posts, likes, and comments.
Live Demo »
·
Repository
- About
- Features
- Tech Stack
- Screenshots
- Project Structure
- Getting Started
- Environment Variables
- Running the Project
- API Overview
- Future Improvements
- Contributing
- Author
- License
DevX is a full-stack social networking platform built specifically for developers. It allows users to create accounts, share posts, upload images, follow other developers, and interact through likes and comments.
The application follows the MERN architecture and implements secure JWT authentication with refresh tokens. Images are stored using Cloudinary, while MongoDB serves as the primary database.
The project was built to gain hands-on experience with full-stack development, REST API design, authentication, state management, and modern React development.
- User Registration
- Secure Login
- JWT Authentication
- Refresh Tokens
- Protected Routes
- Create an account
- Edit profile
- Upload profile picture
- View followers & following
- Create new posts
- Upload images
- Edit posts
- Delete posts
- View posts from other users
- Like posts
- Unlike posts
- Add comments
- Follow users
- Unfollow users
- Search developers by username
- View public profiles
- Image uploads using Cloudinary
- React 19
- Vite
- React Router DOM
- Tailwind CSS
- Axios
- Lucide React
- Node.js
- Express.js
- MongoDB
- Mongoose
- JWT
- bcrypt
- Multer
- Cloudinary
- Cookie Parser
- CORS
devX
│
├── Backend
│ ├── src
│ │ ├── controllers
│ │ ├── middleware
│ │ ├── models
│ │ ├── routes
│ │ ├── utils
│ │ ├── db
│ │ └── app.js
│ │
│ ├── package.json
│ └── .env
│
├── Frontend
│ ├── src
│ ├── public
│ ├── package.json
│ └── .env
│
├── screenshots
│
└── README.md
git clone https://github.com/ShubhamNagda/devX.gitMove into the project directory.
cd devXcd Backend
npm installcd ../Frontend
npm installPORT=
CORS_ORIGIN=
ACCESS_TOKEN_SECRET=
ACCESS_TOKEN_EXPIRY=
REFRESH_TOKEN_SECRET=
REFRESH_TOKEN_EXPIRY=
MONGODB_URI=
CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
NODE_ENV=(development/production)VITE_API_URL_USERS=
VITE_API_URL_FOLLOWS=
VITE_API_URL_POSTS=
VITE_API_URL_LIKES=
VITE_API_URL_COMMENTS=cd Backend
npm run devcd Frontend
npm run devOpen your browser and visit
http://localhost:5173
The backend exposes RESTful APIs for all major features.
/api/v1/users
Handles:
- Register
- Login
- Logout
- Refresh Token
- User Profile
- Profile Update
/api/v1/posts
Handles:
- Create Post
- Get Posts
- Edit Post
- Delete Post
/api/v1/likes
Handles:
- Like
- Unlike
/api/v1/comments
Handles:
- Add Comment
- Delete Comment
/api/v1/follows
Handles:
- Follow User
- Unfollow User
React
│
Axios
│
Express API
│
Controllers
│
MongoDB
│
Cloudinary
- Passwords are hashed using bcrypt.
- Authentication uses JWT Access Tokens and Refresh Tokens.
- Protected routes require authentication.
- HTTP-only cookies are used where applicable.
- Sensitive configuration is stored using environment variables.
- Real-time notifications
- Direct messaging
- Infinite scrolling
- Email verification
- Password reset
- Bookmark posts
- User activity feed
- Responsive mobile improvements
- Real-time chat using Socket.IO
Contributions are welcome.
-
Fork the repository.
-
Create a new branch.
git checkout -b feature-name- Commit your changes.
git commit -m "Add feature"- Push to GitHub.
git push origin feature-name- Open a Pull Request.
https://github.com/ShubhamNagda/devX
Shubham Nagda
GitHub: https://github.com/ShubhamNagda
This project is licensed under the MIT License.
Feel free to use, modify, and distribute this project under the terms of the MIT License.
This project was built as a learning-focused full-stack application to strengthen practical knowledge of the MERN stack, RESTful APIs, authentication, database design, and modern frontend development.