Terrabuzz
说明： 社交媒体基于连接用户的兴趣，整合了一个新闻推送系统，关注...
(Social media based on connecting users on the basis of interests, integrating a system of news-feed, following/followers, notifications, profile updates, and a basic settings page)
(Social media based on connecting users on the basis of interests, integrating a system of news-feed, following/followers, notifications, profile updates, and a basic settings page)
文件列表:
.dockerignore (18, 2022-05-24)
.eslintignore (102, 2022-05-24)
.eslintrc.js (583, 2022-05-24)
CODE_OF_CONDUCT.md (3358, 2022-05-24)
Makefile (610, 2022-05-24)
SECURITY.md (619, 2022-05-24)
client (0, 2022-05-24)
client\.eslintignore (20, 2022-05-24)
client\.eslintrc.js (648, 2022-05-24)
client\Dockerfile (90, 2022-05-24)
client\package-lock.json (656380, 2022-05-24)
client\package.json (824, 2022-05-24)
client\public (0, 2022-05-24)
client\public\assets (0, 2022-05-24)
client\public\assets\img (0, 2022-05-24)
client\public\assets\img\misc (0, 2022-05-24)
client\public\assets\img\misc\buzz.png (6553, 2022-05-24)
client\public\assets\img\misc\spinner.gif (8821, 2022-05-24)
client\public\assets\img\navbar (0, 2022-05-24)
client\public\assets\img\navbar\UserProfilePicture.jpeg (40261, 2022-05-24)
client\public\assets\img\navbar\hashtag.svg (6244, 2022-05-24)
client\public\assets\img\navbar\logout.svg (1388, 2022-05-24)
client\public\assets\img\navbar\menu.svg (746, 2022-05-24)
... ...
.eslintignore (102, 2022-05-24)
.eslintrc.js (583, 2022-05-24)
CODE_OF_CONDUCT.md (3358, 2022-05-24)
Makefile (610, 2022-05-24)
SECURITY.md (619, 2022-05-24)
client (0, 2022-05-24)
client\.eslintignore (20, 2022-05-24)
client\.eslintrc.js (648, 2022-05-24)
client\Dockerfile (90, 2022-05-24)
client\package-lock.json (656380, 2022-05-24)
client\package.json (824, 2022-05-24)
client\public (0, 2022-05-24)
client\public\assets (0, 2022-05-24)
client\public\assets\img (0, 2022-05-24)
client\public\assets\img\misc (0, 2022-05-24)
client\public\assets\img\misc\buzz.png (6553, 2022-05-24)
client\public\assets\img\misc\spinner.gif (8821, 2022-05-24)
client\public\assets\img\navbar (0, 2022-05-24)
client\public\assets\img\navbar\UserProfilePicture.jpeg (40261, 2022-05-24)
client\public\assets\img\navbar\hashtag.svg (6244, 2022-05-24)
client\public\assets\img\navbar\logout.svg (1388, 2022-05-24)
client\public\assets\img\navbar\menu.svg (746, 2022-05-24)
... ...
# Terrabuzz - A Student Social Media Application
----------
## Description
Finding relations among people is one of the hardest things to do with social media these days, contrary to the word social media in the first place. More and more emphasis is put on driving a great amount of reactions, rather than focusing on helping people find more connections far more easily than others.
What does this mean? It means that there are lower chances or possibilities for artists, small business, startups, to more easily connect with their audience.
Social media really should be about socializing and finding it easier to connect and find people similar to your interest, and finding relationships between what people like and what they post content about is the main purpose for this creation.
Inspired by the research and idea carried forward by graph databases, the main motivation and idea for this was to enable people to connect to other people far more easily. Focusing on actual quality of content, and not just quantity of content.
----------
## About The Project
Terrabuzz is just this, a social media website that emphasizes on building relations with people, and helping people figure out similar groups of communities.
It will focus on having a homepage - a feed view, a profile page for each user, and the ability to search for other users meant to find other connections.
----------
## Screenshots
1. Home page when logged out 
2. Registration page 
3. Verification email 
4. Login page 
5. First login page 
6. Basic newsfeed 
7. Profile page 
8. Modal to change information 
9. Searching for profiles that have an interest 
10. Searching for profiles based on user handle 
11. Settings dropdown with the notification page in the background. No notifications generated, thus, no notifications displayed at the moment for this new account 
12. Individual post page 
13. Profile page of another user, who is being followed ( denoted by the red cross symbol ) 
14. Post shown after connecting with user 
15. Settings page 
----------
## Demos
### Using Demo
YT link to video a video showing the project demo will be placed here
### Workflow Explanation
YT link to video explaining the workflow of the project will be placed here
----------
## File Structure
This sections explains the file structure for the whole project
### Root Directory
### Client
The client directory contains the entirety of the frontend application. This means the ReactJS code with different sections designed, for example,
- `public` directory contains information for the basic React application
- `src` contains the pages, components, and the assets used for the pages
- `API` contains the API object, which can send GET and POST requests to the backend specified via a .env file located under `client`
- `assets` contains the individual pages as directories to segregate the different mutlimedia files
- `components` also contains a segregation. Each folder inside `components` is marked with the page component that uses those component. Each folder must have a `MainContent.js` that arranges and organizes all the other components within the folder, if they exist. Errors thrown here render an error page on the web browser tab
- `pages` contain single page views for a specified URL
- `services` contains the client side logic for dealing and handling the payloads. The error messages that occur here are displayed within the Chrome Dev Tool's console.
- `styles` is also separated into folders, each folder contains individual files for each component used respectively under `components`, and each file is suffixed with `.module.css` to make sure that styling is only applied to the component it is used in
- `App.js` contains the routing for the individual pages. Here, there is slight logic on how to deal with logged in and logged out user, and specifies the routes that will be visited when a specific URL is hit
- `index.js` simply imports the `App` component from `App.js` with `React.StrictMode`
- `serviceWorker.js` registers a new worker ( to be explained because this code came with ReactJS - I'm still not sure what this does exactly )
- `setupTests.js`, just importing the Jest libary for testing.
- `.eslintignore`, ignore running lint on some files
- `.eslintrc.js`, exports an object that configures the ES Lint run before each commit is performed
- `Dockerfile`, Docker file to build the `client` container
- `package.json`, contains the respective dependencies
- `package-lock.json`, lock file for package.json
- `README.md`, basic documentation generated by ReactJS
### Data
This folder is reserved space to allow volume mapping within the containers. Do not alter this or modify this. On forcefully removing this location, please build the containers again to safely allow volume mapping.
### Docs
Contains the `Software Requirement Specification` (SRS) and `Software Development Specification` (SDS) written for the project. Also contains some basic images for this README.md
### Server
Contains the entirety of the backend code, written in ExpressJS. The explanations for the subdirectory are as follows,
- `config`, we initially created this ... but really didn't do anything with it. There's an empty `index.js` for now. Future expansion is most probably expected
- `controllers`, requests after being properly routed, are sent to their respective controller functions here. The functions specified for each route really just cares about the
- `db`, contains the connector bindings for the databases used. Each folder is separately for each database with it's respective connector
- `middleware`, contains some middleware function to check for correct login, and for authenticating the user
- `models`, the classes and views created for Mongoose and MySQL2 to provide an easy way of dealing with the connectors and saving information
- `routes`, specifies the endpoints to hit for GET and POST requests
- `services`, here, queries are sent to the underlying databases in containers to perform CRUD operations
- `tests`, any tests needed should be sent here
- `www`, making sure the PORT is open
### Web Server
The web server acts as an intermediary between the client side container and the backend container by mounting client at `/`, and backend at `/api/`.
The file structure is as follows,
- `nginx.conf`, basic NGINX configuration
- `Dockerfile`, sets up the docker container for nginx
- `conf.d/default.conf`, mounting location for `/api/`
----------
## Getting Started
This is dedicated to setting the software up
### Prerequisites
You need to simply have Docker on your machine! Everything is dockerized, which means to build and run the project, you don't need to install any other software - Docker pulls that for you.
- If you're on Windows, check out "[Install Docker Desktop on Windows](https://docs.docker.com/docker-for-windows/install/)"
- If you're on Linux, check out "[https://docs.docker.com/compose/install/](https://docs.docker.com/compose/install/)" and "[Install Docker Engine on Ubuntu](https://docs.docker.com/engine/install/ubuntu/)"
### Installation
If you're on `Linux`, simply run `make build`. You can interrupt the containers anytime by pressing `Ctrl^C`. If you want to remove the containers, run `make remove`. If you want to start them again, just run `make up`. Check out the `Makefile` for more instructions.
If you're on `Windows`, simply visit the root of the project via the command line, and run `docker-compose -f docker-compose.dev.yaml up --build`, and it should start.
The team developed, built, and tested this project on Linux. If there a issue with the Window's equivalent of commands, let us know in the issues tab! :D
----------
## Roadmap
See the [open issues](https://github.com/Rubix***2/Terrabuzz/issues) for a list of proposed features (and known issues).
----------
## Contributing
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
----------
## Contact
Email,
- Saif Ul Islam, saifulislam84210@gmail.com
- Muhammad Hassan Zahid, hassanzhd2000@gmail.com
- Tashik Moin Sheikh, tashikmoinsheikh@gmail.com
- Hasan Burney, hasanburney@outlook.com
## Acknowledgements
* [GitHub Emoji Cheat Sheet](https://www.webpagefx.com/tools/emoji-cheat-sheet)
* [Img Shields](https://shields.io)
* [Choose an Open Source License](https://choosealicense.com)
* [GitHub Pages](https://pages.github.com)
* [Animate.css](https://daneden.github.io/animate.css)
* [Loaders.css](https://connoratherton.com/loaders)
* [Slick Carousel](https://kenwheeler.github.io/slick)
* [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll)
* [Sticky Kit](http://leafo.net/sticky-kit)
* [JVectorMap](http://jvectormap.com)
* [Font Awesome](https://fontawesome.com)
# Todo
- Improve this README
- Make and upload a live video representation on how to use this template
- Plan out how to structure the documentation
- Make project planning and building as automated as possible
[contributors-shield]: https://img.shields.io/github/contributors/Rubix***2/Terrabuzz.svg?style=for-the-badge
[contributors-url]: https://github.com/Rubix***2/Terrabuzz/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/Rubix***2/Terrabuzz.svg?style=for-the-badge
[forks-url]: https://github.com/Rubix***2/Terrabuzz/network/members
[stars-shield]: https://img.shields.io/github/stars/Rubix***2/Terrabuzz.svg?style=for-the-badge
[stars-url]: https://github.com/Rubix***2/Terrabuzz/stargazers
[issues-shield]: https://img.shields.io/github/issues/Rubix***2/Terrabuzz.svg?style=for-the-badge
[issues-url]: https://github.com/Rubix***2/Terrabuzz/issues
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
[linkedin-url-rubix***2]: https://www.linkedin.com/in/saif-ul-islam-93786b187/
[linkedin-url-Hassanzhd]: https://www.linkedin.com/in/muhammad-hassan-zahid-b110971b6/
[linkedin-url-tashikMoin23]: https://www.linkedin.com/in/tashik-moin-sheikh-08872116b/
[linkedin-url-hasanburney]: https://www.linkedin.com/in/hasanburney/
[product-screenshot]: images/screenshot.png
Terrabuzz
A student social media project
Read the SRS/SDS
Video Demo
·
Report Bug
·
Request Feature
Table of Contents
2. Registration page
3. Verification email
4. Login page
5. First login page
6. Basic newsfeed
7. Profile page
8. Modal to change information
9. Searching for profiles that have an interest
10. Searching for profiles based on user handle
11. Settings dropdown with the notification page in the background. No notifications generated, thus, no notifications displayed at the moment for this new account
12. Individual post page
13. Profile page of another user, who is being followed ( denoted by the red cross symbol )
14. Post shown after connecting with user
15. Settings page
----------
## Demos
### Using Demo
YT link to video a video showing the project demo will be placed here
### Workflow Explanation
YT link to video explaining the workflow of the project will be placed here
----------
## File Structure
This sections explains the file structure for the whole project
### Root Directory
### Client
The client directory contains the entirety of the frontend application. This means the ReactJS code with different sections designed, for example,
- `public` directory contains information for the basic React application
- `src` contains the pages, components, and the assets used for the pages
- `API` contains the API object, which can send GET and POST requests to the backend specified via a .env file located under `client`
- `assets` contains the individual pages as directories to segregate the different mutlimedia files
- `components` also contains a segregation. Each folder inside `components` is marked with the page component that uses those component. Each folder must have a `MainContent.js` that arranges and organizes all the other components within the folder, if they exist. Errors thrown here render an error page on the web browser tab
- `pages` contain single page views for a specified URL
- `services` contains the client side logic for dealing and handling the payloads. The error messages that occur here are displayed within the Chrome Dev Tool's console.
- `styles` is also separated into folders, each folder contains individual files for each component used respectively under `components`, and each file is suffixed with `.module.css` to make sure that styling is only applied to the component it is used in
- `App.js` contains the routing for the individual pages. Here, there is slight logic on how to deal with logged in and logged out user, and specifies the routes that will be visited when a specific URL is hit
- `index.js` simply imports the `App` component from `App.js` with `React.StrictMode`
- `serviceWorker.js` registers a new worker ( to be explained because this code came with ReactJS - I'm still not sure what this does exactly )
- `setupTests.js`, just importing the Jest libary for testing.
- `.eslintignore`, ignore running lint on some files
- `.eslintrc.js`, exports an object that configures the ES Lint run before each commit is performed
- `Dockerfile`, Docker file to build the `client` container
- `package.json`, contains the respective dependencies
- `package-lock.json`, lock file for package.json
- `README.md`, basic documentation generated by ReactJS
### Data
This folder is reserved space to allow volume mapping within the containers. Do not alter this or modify this. On forcefully removing this location, please build the containers again to safely allow volume mapping.
### Docs
Contains the `Software Requirement Specification` (SRS) and `Software Development Specification` (SDS) written for the project. Also contains some basic images for this README.md
### Server
Contains the entirety of the backend code, written in ExpressJS. The explanations for the subdirectory are as follows,
- `config`, we initially created this ... but really didn't do anything with it. There's an empty `index.js` for now. Future expansion is most probably expected
- `controllers`, requests after being properly routed, are sent to their respective controller functions here. The functions specified for each route really just cares about the
- `db`, contains the connector bindings for the databases used. Each folder is separately for each database with it's respective connector
- `middleware`, contains some middleware function to check for correct login, and for authenticating the user
- `models`, the classes and views created for Mongoose and MySQL2 to provide an easy way of dealing with the connectors and saving information
- `routes`, specifies the endpoints to hit for GET and POST requests
- `services`, here, queries are sent to the underlying databases in containers to perform CRUD operations
- `tests`, any tests needed should be sent here
- `www`, making sure the PORT is open
### Web Server
The web server acts as an intermediary between the client side container and the backend container by mounting client at `/`, and backend at `/api/`.
The file structure is as follows,
- `nginx.conf`, basic NGINX configuration
- `Dockerfile`, sets up the docker container for nginx
- `conf.d/default.conf`, mounting location for `/api/`
----------
## Getting Started
This is dedicated to setting the software up
### Prerequisites
You need to simply have Docker on your machine! Everything is dockerized, which means to build and run the project, you don't need to install any other software - Docker pulls that for you.
- If you're on Windows, check out "[Install Docker Desktop on Windows](https://docs.docker.com/docker-for-windows/install/)"
- If you're on Linux, check out "[https://docs.docker.com/compose/install/](https://docs.docker.com/compose/install/)" and "[Install Docker Engine on Ubuntu](https://docs.docker.com/engine/install/ubuntu/)"
### Installation
If you're on `Linux`, simply run `make build`. You can interrupt the containers anytime by pressing `Ctrl^C`. If you want to remove the containers, run `make remove`. If you want to start them again, just run `make up`. Check out the `Makefile` for more instructions.
If you're on `Windows`, simply visit the root of the project via the command line, and run `docker-compose -f docker-compose.dev.yaml up --build`, and it should start.
The team developed, built, and tested this project on Linux. If there a issue with the Window's equivalent of commands, let us know in the issues tab! :D
----------
## Roadmap
See the [open issues](https://github.com/Rubix***2/Terrabuzz/issues) for a list of proposed features (and known issues).
----------
## Contributing
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
----------
## Contact
Email,
- Saif Ul Islam, saifulislam84210@gmail.com
- Muhammad Hassan Zahid, hassanzhd2000@gmail.com
- Tashik Moin Sheikh, tashikmoinsheikh@gmail.com
- Hasan Burney, hasanburney@outlook.com
## Acknowledgements
* [GitHub Emoji Cheat Sheet](https://www.webpagefx.com/tools/emoji-cheat-sheet)
* [Img Shields](https://shields.io)
* [Choose an Open Source License](https://choosealicense.com)
* [GitHub Pages](https://pages.github.com)
* [Animate.css](https://daneden.github.io/animate.css)
* [Loaders.css](https://connoratherton.com/loaders)
* [Slick Carousel](https://kenwheeler.github.io/slick)
* [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll)
* [Sticky Kit](http://leafo.net/sticky-kit)
* [JVectorMap](http://jvectormap.com)
* [Font Awesome](https://fontawesome.com)
# Todo
- Improve this README
- Make and upload a live video representation on how to use this template
- Plan out how to structure the documentation
- Make project planning and building as automated as possible
[contributors-shield]: https://img.shields.io/github/contributors/Rubix***2/Terrabuzz.svg?style=for-the-badge
[contributors-url]: https://github.com/Rubix***2/Terrabuzz/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/Rubix***2/Terrabuzz.svg?style=for-the-badge
[forks-url]: https://github.com/Rubix***2/Terrabuzz/network/members
[stars-shield]: https://img.shields.io/github/stars/Rubix***2/Terrabuzz.svg?style=for-the-badge
[stars-url]: https://github.com/Rubix***2/Terrabuzz/stargazers
[issues-shield]: https://img.shields.io/github/issues/Rubix***2/Terrabuzz.svg?style=for-the-badge
[issues-url]: https://github.com/Rubix***2/Terrabuzz/issues
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
[linkedin-url-rubix***2]: https://www.linkedin.com/in/saif-ul-islam-93786b187/
[linkedin-url-Hassanzhd]: https://www.linkedin.com/in/muhammad-hassan-zahid-b110971b6/
[linkedin-url-tashikMoin23]: https://www.linkedin.com/in/tashik-moin-sheikh-08872116b/
[linkedin-url-hasanburney]: https://www.linkedin.com/in/hasanburney/
[product-screenshot]: images/screenshot.png
近期下载者：
相关文件：
收藏者：