Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/misa-j/social-network
Mini social network that I made as my first web app project.
https://github.com/misa-j/social-network
express javascript mern-stack mongodb nodejs notifications react realtime redux social-network socket-io
Last synced: 6 days ago
JSON representation
Mini social network that I made as my first web app project.
- Host: GitHub
- URL: https://github.com/misa-j/social-network
- Owner: misa-j
- License: mit
- Created: 2020-03-03T19:40:36.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-03-06T17:30:40.000Z (over 1 year ago)
- Last Synced: 2024-10-02T05:02:21.623Z (about 1 month ago)
- Topics: express, javascript, mern-stack, mongodb, nodejs, notifications, react, realtime, redux, social-network, socket-io
- Language: JavaScript
- Homepage: http://46.101.189.55/login
- Size: 10.4 MB
- Stars: 620
- Watchers: 24
- Forks: 136
- Open Issues: 39
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# social-network
Mini social network that I made as my first web app project.
## Demo
[social-network](http://46.101.189.55/login)
## Screenshots
![](screenshots/Screenshot%20from%202020-02-28%2023-25-47.png)
![](screenshots/Screenshot%20from%202020-02-29%2019-02-15.png)
![](screenshots/Screenshot%20from%202020-02-29%2019-04-54.png)
![](screenshots/Screenshot%20from%202020-02-29%2019-06-32.png)
![](screenshots/Screenshot%20from%202020-02-29%2019-07-23.png)
![](screenshots/Screenshot%20from%202020-02-29%2019-07-45.png)
![](screenshots/Screenshot%20from%202020-02-29%2019-07-06.png)
![](screenshots/Screenshot%20from%202020-02-29%2002-19-26.png)
![](screenshots/Screenshot%20from%202020-02-29%2019-21-47.png)
![](screenshots/Screenshot%20from%202020-02-29%2019-01-38.png)
![](screenshots/Screenshot%20from%202020-02-29%2019-08-45.png)
![](screenshots/Screenshot%20from%202020-02-29%2019-25-55.png)
![](screenshots/Screenshot%20from%202020-02-29%2019-26-42.png)## Gif
![]()
## Link to a full video
[Video](https://streamable.com/5srsv)
## Built With
- [React](https://reactjs.org/) - A JavaScript library for building user interfaces
- [Redux](https://redux.js.org/) - State managment
- [Semantic UI React](https://react.semantic-ui.com/) - UI
- [Socket.io](https://socket.io/) - Used for realtime features
- [Node](https://nodejs.org/en/) - Used for backend
- [Mongodb](https://www.mongodb.com/) - Database## Features
- Like posts, comments, replies
- See likes for posts, comments, replies
- Follow, unfollow
- Update user information
- Search users
- Tag people on post and in comments with autocomplete
- Send verification email
- Pagination for home feed, user profile, hashtag page, location page, notifications, comments, replies### Realtime
- Get notification when someone likes your post, comment, reply, tag you on post or reply on comment
- Chat send text message, image
- Seen feature and activity status of user## Installing
1. Install dependencies
```
npm i && cd client && npm i && cd ..
```2. Create variables.env file and replace values with yours
```
NODE_ENV=development
DATABASE="Mongodb Connection String"
JWT_KEY="secretkey"
EMAILUSER="[email protected]"
EMAILPASS="example"
HOST="your ip eg. http://192.168.0.14:5000"
ENABLE_SEND_EMAIL="true or false" // false if you don't want to set it up
TEST_DATABASE="testing db"
```3. Go into `client/src/_services/socketService.js` and replace
```
window.location.hostname
```with your local IP address on port 5000 eg.
```
192.168.0.14:5000
```4. Run project
```
npm run dev
```## Contribute
Show your support by ⭐ the project.