Giter VIP home page Giter VIP logo

socialnetwork's Introduction

Build Status

About Project

works pretty similar to a well known social network, but you can host it on your very own infrastructure. No external dependencies needed. Focus of this project is stability. security and performance.

Anouncement

On 13.02.2020 i decided to mark version 2.0 as deprecated and started to rewrite everything from scratch. At moment the master has less features than 2.0, but iam working hard to restore the most important ones. Feel free to join the development process by creating tasks (feature request) or make code improvements.

0. Demo

https://dev.codejungle.org

1. Installation

git clone https://github.com/andreas83/SocialNetwork.git
cd SocialNetwork
composer install
npm install

1.2 Configuration

Check the .env.example file for db settings

1.3 Database

This will create the db structure

php artisan migrate

1.3 Folders / Permissions

Create storage folder (symbolic link)

php artisan storage:link

Make phantomsjs executeable (needed for og tag parsing)

chmod +x bin/phantomjs

1.4 Webserver (nginx)

This is just a example configuration of our dev system

server {

  server_name dev.codejungle.org;
  root /var/www/dev.codejungle.org/public;
  index index.html index.php;
  location ~ \.php$ {
          include snippets/fastcgi-php.conf;
          fastcgi_pass unix:/run/php/php7.4-fpm.sock;
  }

  location ~ /\.ht {
          deny all;
  }

  location / {
      try_files $uri $uri/ /index.php?$args;
  }



  listen 443 ssl; # managed by Certbot
  ssl_certificate /etc/letsencrypt/live/dev.codejungle.org/fullchain.pem; # managed by Certbot
  ssl_certificate_key /etc/letsencrypt/live/dev.codejungle.org/privkey.pem; # managed by Certbot
  include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
  ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}
server {
  if ($host = dev.codejungle.org) {
      return 301 https://$host$request_uri;
  } # managed by Certbot

      server_name dev.codejungle.org;

  listen 80;
  return 404; # managed by Certbot


}

2. Support

You can use the github issue tracker for bugs.

For commercial support please contact: [email protected]

3. History

Version 1.0 (est 2008)

Screenshoot of verion 1.0

Version 2.0 (est 2014)

Screenshoot of verion 2.0

This version was a complete rewrite, build on a my very own php framework and with the help of react for frontend stuff. Sadly the frontend code became not maintainable also i made huge mistakes how the components communicate with each other.

Working features:

  • Share (Websites, Images, Videos, SourceCode)
  • Like / Dislike / Comments
  • #hash tag search (orderd by popularity)
  • @user mentions and notifications via websockets
  • REST API
  • Oauth2 (Facebook, Github)
  • Backend with Dashboard

One side project was to visualize the related hashtags.

Visualization of the related Hashtags

Another cool feature was the Google Chrome extension to share content with just a click. Screenshoot of Google Chrome extension

Please keep in mind Version 2.0 is not longer maintained

Demo is still alive here: https://social.codejungle.org/

Version 3.0 (est 2020)

Please report feature requests and bugs. Demo is here: https://dev.codejungle.org/

Working features are:

  • Share, Commnet, Reshare, Likes
  • OpenGraph Tag parsing
  • OAuth login via Github and Facebook

Attention This is a early stage beta, things can change drasticly.

4. Donate

Bitcoins: 1GqMSGseij18JnAoB9f3LHJRozNr1QeHkh

Ethereum: 0x6788024D1D36641DDE7832ce9B0300eBbD7C4832

socialnetwork's People

Contributors

andreas83 avatar dependabot[bot] avatar snyk-bot 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

socialnetwork's Issues

new content type featured article

Right now we have different content types like Video, Upload, WWW, Img, Generic...

I like to add another one: Article.

Required fields:
title
image
description
content (with simple WYSIWYG editor)

and of cause the usual meta information (author, created, modified, comments, likes)

Also we need a new route for this, something like:

/article/title/+id

create build script in phing

Create a build script in phing that

  • check if composer exists
  • check if npm exists
  • triggers composer and npm update / install
  • triggers bower
  • triggers phpunit
  • triggers a database migration script state

Basic Chat System

Original: Als Nutzer möchte ich mich mit den anderen Nutzern die online sind unterhalten können :) "story style" ;)

English: As user i like to communicate with other Users who are Online right now :)

database.sql faild on line 48

Which is: modified DATETIME

CREATE TABLE  Hashtags (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `hashtag` VARCHAR(255) NOT NULL,
  `pop` int(10) unsigned NOT NULL,
   modified DATETIME
   PRIMARY KEY (`id`), UNIQUE(`hashtag`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

create database migration manager

We need a manager to

  • save the current state of the database
  • imports the migration scripts

this is so we don't get inconsistent with the environment differences in the database.
and we can build a live system from scratch without legacy dummy data.

Plaintext

Not sure if you are aware of it but .cfg files are readable in the browser, it is therefore possible to read the config files in app\config. Might be a bad idea since passwords are stored there.

Upload any file

I figured it's possible to upload any file as avatar/upload any file on posting. This means .html files can be uploaded and used. I tried to upload a PHP file to test if that worked but it didn't. Which is good.

Anyways, restrict avatar uploads to only jpg, jpeg, png and bmp extension?

admin panel aka automated generic backend

We need an admin panel, with at least minimum generic functions like create, read, update, delete.
I do not plan to create a separate controller, template for each model, instead i would love
to generate the admin panel from meta data.
in example we could use doc code inside the model to describe the data other frameworks use config array or yaml

What we need to generate an admin panel

  1. Authentication for privileged users
    Done
  2. We need to know which model should be editable
    Can be done via doc code or another declarative way. Other idea highly welcome too!
  3. We need to define which properties are visible and editable also validation will be an issue.

iam still thinking about a nice way how to render specific properties (like datetime picker, wyswyg editor or upload fields)

add @todo tags

we need a overview which part of the application needs to be refactored.
i already added @todo tags with my thoughts, please share your idea with me too.
the goal is to improve code readability, so it will be much easier for other to contribute, to maintain, extend and so on. There are plenty of other code smells, please help me to reduce them.

Reduce amount of ajax request

Right now there are two ajax calls for every content element (comment and like), so while scrolling
there are maybe hundreds of requests going on.
I'am quite curios if it feels faster or slower when we switch from many ajax request to just one...

Another alternative could be a general switch to web sockets.

help with code add my json

jquery
`$(function() {

var container = $("#placeholder");

// Determine how many data points to keep based on the placeholder's initial size;
// this gives us a nice high-res plot while avoiding more than one point per pixel.

var maximum = container.outerWidth() / 2 || 300;

//

var data = [];

function getRandomData() {

    if (data.length) {
        data = data.slice(1);
    }

    while (data.length < maximum) {
        var previous = data.length ? data[data.length - 1] : 50;
        var y = previous + Math.random() * 10 - 5;
        data.push(y < 0 ? 0 : y > 100 ? 100 : y);
    }

    // zip the generated y values with the x values

    var res = [];
    for (var i = 0; i < data.length; ++i) {
        res.push([i, data[i]])
    }

    return res;
}

//

series = [{
    label: "down",
    data: getRandomData(),
    lines: { fill: true }
}];

//

var plot = $.plot(container, series, {
    grid: {
        borderWidth: 1,
        minBorderMargin: 20,
        labelMargin: 10,
        backgroundColor: {
            colors: ["#fff", "#e4f4f4"]
        },
        margin: {
            top: 8,
            bottom: 20,
            left: 20
        },
        markings: function(axes) {
            var markings = [];
            var xaxis = axes.xaxis;
            for (var x = Math.floor(xaxis.min); x < xaxis.max; x += xaxis.tickSize * 2) {
                markings.push({ xaxis: { from: x, to: x + xaxis.tickSize }, color: "rgba(232, 232, 255, 0.2)" });
            }
            return markings;
        }
    },
    xaxis: {
        tickFormatter: function() {
            return "";
        }
    },
    yaxis: {
        min: 0,
        max: 110
    },
    legend: {
        show: true
    }
});

// Create the demo X and Y axis labels

var yaxisLabel = $("<div class='axisLabel yaxisLabel'></div>")
    .text("Response Time (ms)")
    .appendTo(container);

// Since CSS transforms use the top-left corner of the label as the transform origin,
// we need to center the y-axis label by shifting it down by half its width.
// Subtract 20 to factor the chart's bottom margin into the centering.

yaxisLabel.css("margin-top", yaxisLabel.width() / 2 - 20);

// Update the random dataset at 25FPS for a smoothly-animating chart

setInterval(function updateRandom() {
    series[0].data = getRandomData();
    plot.setData(series);
    plot.draw();
}, 40);

});`

my php

`<?php

$int="em2"; 
session_start(); 

$rx[] = @file_get_contents("/sys/class/net/$int/statistics/rx_bytes"); 
$tx[] = @file_get_contents("/sys/class/net/$int/statistics/tx_bytes"); 
sleep(1); 
$rx[] = @file_get_contents("/sys/class/net/$int/statistics/rx_bytes"); 
$tx[] = @file_get_contents("/sys/class/net/$int/statistics/tx_bytes"); 

$tbps = $tx[1] - $tx[0]; 
$rbps = $rx[1] - $rx[0]; 

$round_rx=round($rbps/1024, 2); 
$round_tx=round($tbps/1024, 2); 

$time=date("U")."000"; 
$_SESSION['rx'][] = "[$time, $round_rx]"; 
$_SESSION['tx'][] = "[$time, $round_tx]"; 
$data['label'] = $int; 
$data['data'] = $_SESSION['rx']; 
# to make sure that the graph shows only the 
# last minute (saves some bandwitch to) 
if (count($_SESSION['rx'])>60) 
{ 
    $x = min(array_keys($_SESSION['rx'])); 
    unset($_SESSION['rx'][$x]); 
} 

# json_encode didnt work, if you found a workarround pls write me 
# echo json_encode($data, JSON_FORCE_OBJECT); 

echo ' {"label":"'.$int.'","lines": { fill: true },"data":['.implode($_SESSION['rx'], ",").']} '; 
?>`

Namespace Issues

new psr-4 autoloading, or to be more specific, the namespace
breaks the existing function from Backend.

Would be cool if there is such thing like:

use SocialNetwork\app\model*

Any idea to solve this issue @chilimatic ?

Fileupload

Right now you can upload any document to /public/upload
We should somehow prevent uploading or executing php and other potentially dangerous filetypes

Reset password function

Would be useful to have a reset password function, I pretty much forgot my password on the demo and thought of it from that.

Update/Edit Content

Right now its not possible to edit/update

  • Sourcecode
  • Pictures
  • Uploaded Files
  • Website (Title, Description, Pic)
    You can only edit the text at the beginning on each content type.

Improve open graph parsing

some websites don't have any opengraph information, so
i try to find the good old meta tags title, keyword, description...
for image i search for the first img tag, which is in most cases the logo.
but the url inside is sometimes, relative or absoloute, sometimes absoloute but without protocol and so on...
so the challenge here is to have better fallback mechanism.

`function og_parser($url){

    //check for og tag
    $data = array("type" => "www", "url"=>$url);
    $ch = curl_init();
    $optArray = array(
        CURLOPT_URL => $url,
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_USERAGENT=>'Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.13) Gecko/20080311 Firefox/2.0.0.13',
    );
    curl_setopt_array($ch, $optArray);
    $result = curl_exec($ch);

    $dom = new DOMDocument;
    @$dom->loadHTML($result);
    foreach ($dom->getElementsByTagName('meta') as $tag) {
        if ($tag->getAttribute('property') === 'og:image') {
            $data['og_img'] = $tag->getAttribute('content');
        }
        if ($tag->getAttribute('property') === 'og:title') {
            $data['og_title'] = $tag->getAttribute('content');
        }
        if ($tag->getAttribute('property') === 'og:description') {
            $data['og_description'] = $tag->getAttribute('content');
        }
        if($tag->getAttribute('name') == 'description')
        {
          $data['alt_description']= $tag->getAttribute('content');  
        } 

    }

    //fallback (while no opengraph tags exist, we use title tag, and meta description)
    if(!isset($data['og_title'])){
         $data['og_title'] =  $dom->getElementsByTagName('title')->item(0)->textContent;
    }
    if(!isset($data['og_description']) && isset($data['alt_description']) && !empty($data['alt_description'])){
         $data['og_description'] =  $data['alt_description'];
    }

    if(!isset($data['og_img']))
    {
        $base=$dom->getElementsByTagName('base');
        if($base->length>0)
            $base =  $dom->getElementsByTagName('base')->item(0)->attributes->getNamedItem("href")->value;
        else
            $base=$url;

        if($dom->getElementsByTagName('img')->length>0)
            $imgSrc=$dom->getElementsByTagName('img')->item(0)->attributes->getNamedItem("src")->value;

        if(substr($imgSrc, 0, 4)=="http")
            $data['og_img'] = $imgSrc;
        else
            $data['og_img'] = $base.$imgSrc;
    }
    return $data;
}`

Syntax Code Highlighting

Input

text
<code> my_cool_function() </code>

output

text

expected result

text

my_cool_function();

The source of the trouble is the #hashtag replacer,
we need to distinguish between the code and regular text block

nodes = domNode.querySelectorAll('.text>span');
        if (nodes.length > 0) {
            for (var i = 0; i < nodes.length; i=i+1) {
                if(nodes[i].childNodes.length>0)
                {
                    if(typeof(nodes[i].childNodes[0].nodeValue)=="string")
                    {
                        //todo: fix the repalcement so text block does not overwrite the code block
                        $(nodes[i]).html(nodes[i].childNodes[0].nodeValue.replace(/#(\S*)/g,'<a class="hash" href="/hash/$1">#$1</a>'));

                    }
                    console.log(nodes[i].childNodes[0].nodeType);
                }

            }
        }
´´´

Auth Cookie

after login you get an auth cookie/token, this is used for notifications and chat etc.
now this works fine until you authenticate with the same account on another's computer.
then the old auth cookie get invalid and the websocket server dont know who you are anymore.
We could use the session variable to renew the auth cookie/token,

create integration tests

at the beginning integration tests for the API would be cool

content

  • post content
  • get content
  • put aka update content
  • delete content

comment

  • post comment
  • get comment

Upload + Mentions

Right now files with spaces are not available anymore.

would be cool to extend the existing functionality, so we could reuse the filenames for mentions.

example:
hi @besn here is the +filename you requested.

Notification system

We should have a Notification system.

Notifications are:
Some of my friends posted something
Some of my firends liked/disliked something
Someone liked my Post
Someone comment on my Post

Garbage Collection:
We should remove any notifications after 7 days

Maybe some special system notification have longer ttl.

Blank Post

I have latest Version online and blank Post is now bug.

Report post & basic admin panel

Might be useful to add a basic function that allows users to report posts, and then have some sort of a admin panel where you can review these reports and either delete the post or keep it.

Groups / Permission and friends

we have already a public stream
/public/stream

now we like to have a private stream for all members of a group
/groupname/stream

So new features will be:

Group->Create
Group->Delete
User->AddToGroup
User->RemoveFromGroup

Groups

would be cool to create, manage groups plus invite users to group...
maybe a permission system is required too.

Page system, User details

Maybe system for creating fan pages would be great, also if user profile could be filled with user details, such as location, bio, work, etc...

Blank Post

Hello, ist this bug?
Get With 0 Charakter Posting....

split components from react.jsx into smaller chunks

Right now to much stuff happens in one file (react.jsx).
We should split the components into smaller chunks, i.e.

Rendering

Content Box with following types:

  • Video
  • Websites
  • Sourcecode
  • Images
  • File uploads

Functions

1.) Sharing Box
2.) Comment Box
3.) Like/Dislike Box
4.) Scroll Event

Two accounts on same e-mail

It's possible to have two or more accounts on same e-mail with different passwords. Check my accounts "merfin" and "martin. I can't really remember how I did it, but I think I just created them on same e-mail.

Order data by score

I like to order the Post by Score (on a daily basis)

What i did so far,
select Content.id, count(Score.id) as score from Content left join Score on Content.id=Score.content_id group by Content.id order by DATE(from_unixtime(Content.date)), score asc

This works pretty well, until i fetch some more data via limit offset...

Database Table Score

mysql> desc Score;
+------------+-------------------+------+-----+---------+----------------+
| Field      | Type              | Null | Key | Default | Extra          |
+------------+-------------------+------+-----+---------+----------------+
| id         | int(10) unsigned  | NO   | PRI | NULL    | auto_increment |
| user_id    | int(10) unsigned  | NO   | MUL | NULL    |                |
| content_id | int(10) unsigned  | NO   |     | NULL    |                |
| type       | enum('add','sub') | NO   |     | NULL    |                |
| date       | int(10) unsigned  | NO   |     | NULL    |                |
+------------+-------------------+------+-----+---------+----------------+
5 rows in set (0,00 sec)

Maybe it makes sense to pre count the score in Content, so the left join will not nessesary while fetching new data. But this would just improve read performance.

Another problem is, right now we fetch x posts from given id!
In example 10 posts from id 12040, this will return us 12039, 12038 ... and so on.
this works pretty well, because our data is ordered by id.

with the new feature, the result is not ordered by id anymore.
so the result could look like 12037, 12040, 12039 .....

Right now we would use the last id, and fetch 10 more posts while scrolling.
In this scenario, we would fetch several post twice.
But if we fetch, 10 post from the lowest id (i.e. 12037) we may miss some post too.

@neuron303 @chilimatic @besn any hints ?

Hook / Slot System

We properly need a hook / slot system.
This can be useful for extension programming, think about do something before/after a method is called.

Something like
$obj->addHook((obj)$user, "save", (obj)$plugin, "sendmail");

This triggers the method "sendmail" from Object $plugin,
while the save method from $user object is called.

Open Questions:

  1. How to handle parameters.
  2. Option for pre / after hook

@besn @chilimatic @neuron303 your input is always highly appreciated!

real one page app

While developing the new group feature it turned out, that
extending and modifying the existing react structure is extremely inflexible and complex.
in my opinion the main reason is, the missing controller and routing component.
on the long run we should rewrite the structure and add at least some sort of routing
also i need a clean solution for communication between components aka controller.

i really like to address this issue on the next refactoring release,
in the meantime please don't hesitate and make code and or feature suggestions.

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.