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

Generate Convert Improve

Install / Use

/learn @Rubix982/Terrabuzz

About this skill

Quality Score

0/100

README

Terrabuzz - A Student Social Media Application

[![Contributors][contributors-shield]][contributors-url] [![Forks][forks-shield]][forks-url] [![Stargazers][stars-shield]][stars-url] [![Issues][issues-shield]][issues-url]

Rubix982, Saif Ul Islam, [![LinkedIn - Rubix982][linkedin-shield]][linkedin-url-rubix982]
Hassanzhd, Muhammad Hassan Zahid, [![LinkedIn - Hassanzhd][linkedin-shield]][linkedin-url-Hassanzhd]
TashikMoin23, Tashik Moin Sheikh, [![LinkedIn - TashikMoin23][linkedin-shield]][linkedin-url-tashikMoin23]
HasanBurney, Hasan Burney [![LinkedIn - HasanBurney][linkedin-shield]][linkedin-url-hasanburney]

<a href="https://github.com/Rubix982/Terrabuzz"> <img src="client/public/favicon.ico" alt="Logo" width="80" height="80"> </a> <h3 align="center">Terrabuzz</h3> A student social media project <a href="https://drive.google.com/file/d/1EMZb2H9-jMr69Ac4kvM5gi9LASd5B79q/view">Read the SRS/SDS»</a> <a href="https://github.com/Rubix982/Terrabuzz">Video Demo</a> · <a href="https://github.com/Rubix982/Terrabuzz/issues/new?assignees=&labels=&template=bug_report.md&title=">Report Bug</a> · <a href="https://github.com/Rubix982/Terrabuzz/issues/new?assignees=&labels=&template=feature_request.md&title=">Request Feature</a>

<details open="open"> <summary>Table of Contents</summary> <ol> <li> <a href='#description'>Description</a> </li> <li> <a href="#about-the-project">About The Project</a> </li> <li> <a href='#screenshots'>Screenshots</a> </li> <li> <a href='#demos'>Demos</a> <ul> <li><a href="#using-demo">Run Demo</a></li> <li><a href="#workflow-explanation">Workflow Explanation</a></li> </ul> </li> <li> <a href="#file-structure">File Structure</a> <ul> <li><a href="#client">Client</a></li> <li><a href="#data">Data</a></li> <li><a href="#docs">Docs</a></li> <li><a href="#server">Server</a></li> <li><a href="#web-server">Web Server</a></li> </ul> </li> <li> <a href="#getting-started">Getting Started</a> <ul> <li><a href="#prerequisites">Prerequisites</a></li> <li><a href="#installation">Installation</a></li> </ul> </li> <li><a href="#roadmap">Roadmap</a></li> <li><a href="#contributing">Contributing</a></li> <li><a href="#license">License</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#acknowledgements">Acknowledgements</a></li> </ol> </details>

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

Home page when logged out <img src='./docs/screenshots/1.png' alt='' />
Registration page <img src='./docs/screenshots/2.png' alt='' />
Verification email <img src='./docs/screenshots/3.png' alt='' />
Login page <img src='./docs/screenshots/4.png' alt='' />
First login page <img src='./docs/screenshots/5.png' alt='' />
Basic newsfeed <img src='./docs/screenshots/6.png' alt='' />
Profile page <img src='./docs/screenshots/7.png' alt='' />
Modal to change information <img src='./docs/screenshots/8.png' alt='' />
Searching for profiles that have an interest <img src='./docs/screenshots/9.png' alt='' />
Searching for profiles based on user handle <img src='./docs/screenshots/10.png' alt='' />
Settings dropdown with the notification page in the background. No notifications generated, thus, no notifications displayed at the moment for this new account <img src='./docs/screenshots/11.png' alt='' />
Individual post page <img src='./docs/screenshots/12.png' alt='' />
Profile page of another user, who is being followed ( denoted by the red cross symbol ) <img src='./docs/screenshots/13.png' alt='' />
Post shown after connecting with user <img src='./docs/screenshots/14.png' alt='' />
Settings page <img src='./docs/screenshots/15.png' alt='' />

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 f

Related Skills

bluebubbles

331.2k

Use when you need to send or manage iMessages via BlueBubbles (recommended iMessage integration). Calls go through the generic message tool with channel="bluebubbles".

node-connect

331.2k

Diagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps

slack

331.2k

Use when you need to control Slack from OpenClaw via the slack tool, including reacting to messages or pinning/unpinning items in Slack channels or DMs.

prose

331.2k

OpenProse VM skill pack. Activate on any `prose` command, .prose files, or OpenProse mentions; orchestrates multi-agent workflows.