https://github.com/abhi9720/postgram-frontend
Postgram is an open-source social media application built on the backend with Node.js, Express, and MongoDB and the frontend with React.js and Socket.io. It includes a real-time chat feature, cloudinary image uploading, mobile responsiveness with Bootstrap and Material UI, and the ability to manage users' profiles, posts, and friends.
https://github.com/abhi9720/postgram-frontend
chat-room cloudinary express infinite-scroll javascript messenger mobile-responsive mongodb netlify nodejs post postgram pwa-apps react reactjs realtime-messaging social-network socket-io user-profile
Last synced: 7 months ago
JSON representation
Postgram is an open-source social media application built on the backend with Node.js, Express, and MongoDB and the frontend with React.js and Socket.io. It includes a real-time chat feature, cloudinary image uploading, mobile responsiveness with Bootstrap and Material UI, and the ability to manage users' profiles, posts, and friends.
- Host: GitHub
- URL: https://github.com/abhi9720/postgram-frontend
- Owner: abhi9720
- License: mit
- Created: 2022-01-31T10:01:00.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-04-03T16:28:04.000Z (over 2 years ago)
- Last Synced: 2025-01-13T14:52:24.167Z (9 months ago)
- Topics: chat-room, cloudinary, express, infinite-scroll, javascript, messenger, mobile-responsive, mongodb, netlify, nodejs, post, postgram, pwa-apps, react, reactjs, realtime-messaging, social-network, socket-io, user-profile
- Language: JavaScript
- Homepage: https://postgram-social.netlify.app/
- Size: 9.32 MB
- Stars: 0
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Postgram
Postgram is a social media application that uses Socket.io to allow users to create and manage their profiles, upload and delete posts, follow other users, and send friend requests. The app has a creative profile page where users can manage their followers and friends, as well as a real-time chat feature where users can communicate. On the backend, Node.js, Express, and MongoDB are used, and on the frontend, React.js and Socket.io are used. For image uploading, Cloudinary is used, and the UI is built with Bootstrap and Material UI. The app is mobile-friendly and supports infinite scrolling. The project is open source and can be found on GitHub.
---
## Live Demo [Postgram](https://postgram-social.netlify.app/)
### Homepage
| |
| ------------- |
||
----
### Profile
| |
| ------------- |
| 
---
### MESSENGER
| |
| ------------- |
| 
### Mobile Responsive
### Functionality and Features
- Simple login and signup
- Adding new post
- Infinite Scroll
- Follow other user
- Like a Post or Delete a post
- Sending Friend Request using socket.io - accept or reject both
- Realtime chat application
- Creative profile page of user to manage your follower and following , and friend
- Upload profile picture and Cover image for profile page
- Easily Search other user , follow or send request
- **Awesome UI and Responsive For Mobile**
## **Technology & library Used**
| Nodejs | Express | Mongodb |
| ------------- | --------------- | -------------------- |
| **Reactjs** | **Socket.io** | **mongoose** |
| **Multer** | **cloudinary** | **morgan** |
| **bootstrap** | **react-alert** | **socket.io-client** |
| **Netlify** | **Heroku** | **Material UI** |
## RUN IT LOCALLY
- Install `Nodejs` and `Reactjs` to your local machine
- Create account on cloudinary and mongodb and get credentials
- Set up all these keys by creating .env file for nodejs server
`MONGO_URL =`
`CLOUDINARY_CLOUD_NAME =`
`CLOUDINARY_KEY =`
`CLOUDINARY_SECRET =`
- And in Client folder setup .env file and add these variables to it
`REACT_APP_PUBLIC_FOLDER = ./assets/`
`REACT_APP_End_Point = http://localhost:8800/` or any port
- And Finally , run `cd .\server\` then `npm start`
---
> **Backend Code - ** https://github.com/abhi9720/postgram-server