Giter Site home page Giter Site logo

nz-m / socialecho Goto Github PK

View Code? Open in Web Editor NEW
2.1K 29.0 498.0 19.44 MB

Social networking platform with automated content moderation and context-based authentication system

Home Page: https://socialecho.netlify.app

License: MIT License

JavaScript 98.34% HTML 0.19% CSS 0.63% Shell 0.23% Dockerfile 0.06% Python 0.55%
express jwt-authentication mern-project mongodb mongoose nodejs react redux bart-large-mnli huggingface-transformers

socialecho's Introduction

SocialEcho

A social networking platform with automated content moderation and context-based authentication system.

Watch Demo

UI-community

Table of Contents

Project Overview

The project is a social networking platform built using the MERN (MongoDB, Express.js, React.js, Node.js) stack. It incorporates two major features: an automated content moderation system and context-based authentication. These features are accompanied by common functionalities found in social media applications, such as profile creation, post creation and sharing, liking and commenting on posts, and following/unfollowing users.

Automated Content Moderation

The platform's automated content moderation system utilizes various NLP (Natural Language Processing) APIs. These APIs include:

  • Perspective API: Used for filtering spam, profanity, toxicity, harassment etc.
  • TextRazor API: Integrated for content categorization.
  • Hugging Face Interface API: Utilized with BART Large MNLI for content categorization.

A Flask application has been developed to provide similar functionality as the Hugging Face Interface API's classifier. The Flask app utilizes the BART Large MNLI model. It operates as a zero-shot classification pipeline with a PyTorch framework.

The system allows flexibility in choosing different services for API usage or disabling them without affecting overall functionality by using a common interface for interacting with the APIs.

When a user posts content, it undergoes a thorough filtering process to ensure compliance with the community guidelines. Additionally, users have the ability to report posts that they find inappropriate, which triggers a manual review process.

Context-Based Authentication

The platform implements context-based authentication to enhance user account security. It takes into consideration user location, IP address, and device information for authentication purposes. Users can conveniently manage their devices directly from the platform. To ensure data privacy, this information is encrypted using the AES algorithm and securely stored in the database.

In case of a suspicious login attempt, users are promptly notified via email and are required to confirm their identity to protect against unauthorized access.

User Roles

There are three distinct user roles within the system:

  1. Admin: The admin role manages the overall system, including moderator management, community management, content moderation, monitoring user activity, and more.
  2. Moderators: Moderators manage communities, manually review reported posts, and perform other moderation-related tasks.
  3. General Users: General users have the ability to make posts, like comments, and perform other actions within the platform.

Features

  • User authentication and authorization (JWT)
  • User profile creation and management
  • Post creation and management
  • Commenting on posts
  • Liking posts and comments
  • Following/unfollowing users
  • Reporting posts
  • Content moderation
  • Context-based authentication
  • Device management
  • Admin dashboard
  • Moderator dashboard
  • Email notifications

Technologies

  • React.js
  • Redux
  • Node.js
  • Express.js
  • MongoDB
  • Tailwind CSS
  • JWT Authentication
  • Passport.js
  • Nodemailer
  • Crypto-js
  • Azure Blob Storage
  • Flask
  • Hugging Face Transformers

Schema Diagram

Schema Diagram

Getting Started

Prerequisites

Before running the application, make sure you have the following installed:

  • Node.js
  • MongoDB or MongoDB Atlas account

Installation

  1. Clone the repository
git clone https://github.com/nz-m/SocialEcho.git
  1. Go to the project directory and install dependencies for both the client and server
cd client
npm install
cd server
npm install
  1. Create a .env file in both the client and server directories and add the environment variables as shown in the .env.example files.
  2. Start the server
cd server
npm start
  1. Start the client
cd client
npm start

Configuration

Run the admin_tool.sh script from the server directory with permissions for executing the script. This script is used for configuring the admin account, creating the initial communities, and other settings.

./admin_tool.sh

.env Variables

For email service of context-based authentication, the following variables are required:

EMAIL=
PASSWORD=
EMAIL_SERVICE=

For content moderation, you need the PERSPECTIVE_API_KEY and either the INTERFACE_API_KEY or TEXTRAZOR_API_KEY. Visit the following links to obtain the API keys:

If you prefer, the Flask server can be run locally as an alternative to using the Hugging Face Interface API or TextRazor API. Refer to the classifier_server directory for more information.

Note: Configuration for context-based authentication and content moderation features are not mandatory to run the application. However, these features will not be available if the configuration is not provided.

Usage

Admin

The admin dashboard can be accessed at the /admin route. Use the admin_tool.sh script to configure the admin account. The admin account can be used to manage moderators, communities, and perform other admin-related tasks. You can also enable/disable or switch API services using the admin dashboard.

Moderator

Moderators have specific email domain (@mod.socialecho.com). When registering with an email from this domain, the user is automatically assigned the moderator role. Moderators can be assigned to different communities from the admin dashboard.

Demo

https://youtu.be/Tmncayg7FeU

License

This project is licensed under the MIT License.

socialecho's People

Contributors

iqbal-emon avatar nz-m avatar rownokmahbub avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

socialecho's Issues

[Bug]: css not loading properly

Contact Details

[email protected]

Bug Description

Screenshot from 2024-07-21 09-23-20
It seems that the CSS is not working properly, and all images are too big. I managed to fix some by adding CSS code directly to the JSX file, but it looks ugly. I also manually fixed the icons that were too big. As you can see in the picture, it appears that the CSS might be missing or something else might need to be installed. Thank you for your help.
P.S. I'm still learning.

Environment

Linux

Reproduction Steps

No response

Browsers

No response

Relevant Log Output

No response

[FEAT]: Google Sign-In Integration

Description

Add Google Sign-In functionality to the website to allow users to authenticate using their Google accounts. This feature aims to provide a convenient and secure login method, enhancing user experience and potentially increasing user registration rates.

Requirements

  1. Google Sign-In Button: Add a Google Sign-In button on the login and registration pages.
  2. OAuth 2.0 Implementation: Implement OAuth 2.0 flow to securely authenticate users via their Google accounts.
  3. Backend Integration: Connect the authentication process to the backend, ensuring proper user session management.
  4. UI/UX: Ensure the sign-in process is seamless and intuitive for users.
  5. Error Handling: Properly handle and display any errors that occur during the sign-in process.

Additional Information

Acceptance Criteria

  1. Users can see a Google Sign-In button on the login and registration pages.
  2. Users can sign in using their Google accounts.
  3. The backend properly handles the OAuth 2.0 authentication flow.
  4. Users are seamlessly redirected to the dashboard or appropriate page after sign-in.
  5. Proper error messages are displayed for any authentication errors.

Tasks

  • Add Google Sign-In button to the login and registration pages.
  • Implement OAuth 2.0 flow for Google Sign-In.
  • Integrate the authentication process with the backend.
  • Ensure smooth UI/UX for the sign-in process.
  • Implement error handling for authentication issues.

Labels: enhancement, authentication, frontend, backend

setLoading needs to split

setLoading(false);

setLoading(false);

if (loading || error) {

Currently setLoading is shared with the redux store initialization and the server-status check.

If any one of them passes, the app renders.
So you can have:

  1. possibility that the server is down, but redux initialized successfully, so no "loading.." will occur unless 'error' flag is also set quickly.
  2. Even worse, the server-status check completes really fast, before redux store is initialized, and the app tries to acces useState for example before the store is up. (Ask me how i know ๐Ÿ˜‰)

Better to split the two, have two flags and check for both.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.