Terrabuzz - A Student Social Media Application

• Rubix982, Saif Ul Islam,
• Hassanzhd, Muhammad Hassan Zahid,
• TashikMoin23, Tashik Moin Sheikh,
• HasanBurney, Hasan Burney

Terrabuzz

A student social media project
Read the SRS/SDS»

Video Demo · Report Bug · Request Feature

---

Table of Contents

1. Description
2. About The Project
3. Screenshots
4. Demos
   • Run Demo
   • Workflow Explanation
5. File Structure
   • Client
   • Data
   • Docs
   • Server
   • Web Server
6. Getting Started
   • Prerequisites
   • Installation
7. Roadmap
8. Contributing
9. License
10. Contact
11. Acknowledgements

---

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"
• If you're on Linux, check out "https://docs.docker.com/compose/install/" and "Install Docker Engine on 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 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, [email protected]
• Muhammad Hassan Zahid, [email protected]
• Tashik Moin Sheikh, [email protected]
• Hasan Burney, [email protected]

Acknowledgements

• GitHub Emoji Cheat Sheet
• Img Shields
• Choose an Open Source License
• GitHub Pages
• Animate.css
• Loaders.css
• Slick Carousel
• Smooth Scroll
• Sticky Kit
• JVectorMap
• Font Awesome

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