Coder Social home page Coder Social logo

clutter's Introduction

Clutter

Code Status Build Status In Progress Chat License: GPL v3

P2P twitter-clone built on Holochain A group of cats is called a Clutter, Cludder, Clowder, Kendle, or Kindle. Maybe it's time for a peer-to-peer shoutcast system to eat a certain blue bird.

Clutter is a work in progress. It's a sample application designed to demonstrate how easy it is to build applications on Holochain.

If you would like to simply download a build version of the latest Clutter, download and unzip the latest release

Code Status: Pre-alpha. Not for production use. This application has not been audited for any security validation.

Clutter Installation

From Holochain Release

If you want to just see Clutter in action and haven't yet installed Holochain, the best way to try it out is simply to use the version included in the latest Holochain release. Go to the Holochain Releases page and download and unzip the archive for your machine. That archive contains a full version of clutter, along with instructions for running it.

From Clutter Release

You can download the latest Clutter release directly from the Clutter Release page.

Via hcdev

Prerequiste: Install holochain on your machine and make sure you do the step to set the $GOPATH.

Run the command:

hcdev init -cloneExample=clutter

This will create a copy of the Clutter source code in a clutter directory.

You can then run clutter in development mode with:

cd clutter
hcdev web

and point your browser at http://localhost:4141 to access the UI.

--or--,

assuming that you've already setup your Holochain environment with hcadmin init you can join and run Clutter with:

cd clutter
hcadmin join . clutter
hcd clutter

and point your browser at http://localhost:3141 to access the UI.

Installation: for Developers

Prerequiste: Install Holochain on your machine and make sure you do the step to set the $GOPATH.

Dependencies: If you want to work on the Clutter UI, you will need nodejs (https://nodejs.org/en/) (LTS) installed, with npm or yarn (https://yarnpkg.com/lang/en/docs/install) to be able to build and copy it from the ui-src to the ui directory:

The following commands will clone the latest build of clutter to your machine (you may want to use your own fork instead of our repo) and then you will either install npm or yarn to build the UI for the app.

git clone https://github.com/Holochain/clutter.git
cd clutter/ui-src
npm install # (or yarn install)
npm run build # (or yarn build)
cd ..

After npm run build, npm start to configure and start the React UI.

Running Clutter in Dev mode

Now if you want to run the app, you can run:

hcdev web

Running Clutter with Local Boostrap

Holochain does local discovery with MDNS which is not always availble on Windows machines. So during development instead you may want to run your own local bootstrap server for node discovery. These instructions detail how to run 2 instances of Clutter and your own Bootstrap server.

Make two copies of your your clutter folder one called clutter1 and the other clutter2. Both folders will need to have a dna folder and a ui folder in each.

Firstly run the bootstrap server which will let each instance of Clutter know about its peers. The bs command is part of the Holochain install. If it doesn't work you probably need to set the $GO_PATH variable. (Soon we won't need this step)

  bs

You will get a response like

2018/01/11 11:24:03 app version: 0.0.2; Holochain bootstrap server
2018/01/11 11:24:03 starting up on port 3142

Now start up Clutter in each folder.

  cd clutter1
  hcdev -DHTport=6001 -agentID=lucy -bootstrapServer=localhost:3142 web 3141

  cd ..
  cd clutter2
  hcdev -DHTport=6002 -agentID=phil -bootstrapServer=localhost:3142 web 4141

You will see a response like:

Copying chain to: /Users/philipbeadle/.holochaindev
Serving holochain with DNA hash:QmVbbeDAHVxC9cTvx6UhNEeTCK99SRKfxKDz3s4mR6TnsS on port:3141

Now open a browser at http://localhost:3142/QmVbbeDAHVxC9cTvx6UhNEeTCK99SRKfxKDz3s4mR6TnsS (substituting in the DNA hash from the response above if different) and look at the Bootstrap server. You will see 2 records like this

  [{"Req":{"Version":1,"NodeID":"QmTAjDmQHobs2oQZp4UrbSzkShUGVKcsQUdakHeQ4YYxRX","NodeAddr":"/ip4/0.0.0.0/tcp/6003"},"Remote":"[::1]:63187","LastSeen":"2018-01-11T12:32:15.659887156+11:00"},{"Req":{"Version":1,"NodeID":"QmWQVaqEayZJWnvxLtsKr1iyeTDp3s7m7TTE36HhAUTiTK","NodeAddr":"/ip4/0.0.0.0/tcp/6002"},"Remote":"[::1]:63153","LastSeen":"2018-01-11T12:28:40.85765899+11:00"}]

Now open a browser to http://localhost:3141 and you will see Clutter. Open another tab to http://localhost:4141 and you now have 2 instances of Clutter that you can chat between. Add a handle in each and then meow and follow each instance and you will see the meows!!

Docker Usage

You can do all this much easier with Docker. Download the latest release from Clutter Release, unzip it and cd into the folder. Then run

  cd ui-src
  npm install # (or yarn install)
  npm run build # (or yarn build)
  cd ..
  TARGETDIR=$(pwd) docker-compose up

This will build the source into a React app and install it in Holochain. Then you can open browsers to

  http://localhost:3142 - Bootstrap
  http://localhost:3141 - Clutter
  http://localhost:4141 - Clutter
  http://localhost:5141 - Clutter

and try out Clutter.

Tests

To run all the stand alone DNA tests:

hcdev test

Scenarios

Scenario - Collision Of Handles - Sequence Diagram

  hcdev scenario collisionOfHandles

followAndShare

hcdev scenario followAndShare

This test spins up two nodes jane and joe and tests that following and reading posts works. To watch the network traffic and details try:

hcdev -debug scenario followAndShare

scaling

This test is designed to be run on separate machines and spins up many clones on each and confirms that they all talk to each other.

UI automation

in clutter folder

  hcdev -execpath=$HOME/.holochaindev1 -DHTport=6001 -agentID=agent3141 web 3141
  hcdev -execpath=$HOME/.holochaindev2 -DHTport=6002 -agentID=agent4141 web 4141
  hcdev -execpath=$HOME/.holochaindev3 -DHTport=6003 -agentID=agent5141 web 5141

if running all in one terminal you will need to kill the processes between restarts.

  kill -kill `lsof -t -i tcp:3141` & kill -kill `lsof -t -i tcp:4141` & kill -kill `lsof -t -i tcp:5141`

What the Automated build does

When a branch is pushed to Github Travis runs a build. The build does the following:

  1. Installs docker-compose
  2. Runs docker-compose up -d which spins up a bootstrap server and 3 instances of clutter
  3. Installs the cypress dependencies
  4. Runs the Cypress e2e tests.
  5. If on master a new release is published to github releases. (coming soon)

Feature Roadmap and Current Progress

  • Set default handle from AgentID string
  • Enable users to change their handle
  • Share mews (tweets) -- up to 256 characters
  • Follow someone (by specified handle)
  • Unfollow someone
  • View post stream of people you follow sorted by time
  • Provide React/Redux UI
  • Implement Cypress and Storybook UI testing
  • Detect #hashtags in post text
  • Create hashtag anchors if they don't exist
  • Link from hashtag anchor to posts with that hashtag
  • Show posts which have a particular hashtag
  • Mark posts as a favorite ⭐
  • Link favorited posts from a user/handle
  • Show someone's ⭐ favorited posts
  • Edit a previous post (partially implemented)
  • Refollow someone previously unfollowed (partially implemented - Have to fix put/del/put links sequence)
  • Detect @mentions in post text
  • Link from handle posts which @mention them
  • Show @mentions for a user/handle
  • Lists - Special anchor type with text being "[userhandle]-[listname]" with links to users on a named list which is named unique-per-user
  • Reply to mew (add reply-to link + link to replies)
  • Remew/Retweet (link to original in content of post? + new content?)
  • Enable direct messages via N2N private messaging
  • Detect links
  • Include links (w/ link shortening?) as linked link
  • Pretty display of OpenGraph data for first link
  • Create/Read/Update/Delete User profile info (first name, last name, location, picture, website, etc.)
  • Keyword indexing/search with Holodex integration
  • Search with result groupings/tabs (people, posts, tags, trending, )
  • Add UI tabs/views: feed, mentions, direct messages, lists
  • Embed pictures ("pic" link to url) with pretty render
  • Integrate with Twitter for publishing mews to tweets from your unique userspace
  • Integrate with DPKI for bridging app contexts

Contribute

We welcome pull requests and issue tickets. Find us on gitter to chat.

Contributors to this project are expected to follow our development protocols & practices.

License

License: GPL v3

Copyright (C) 2017, The MetaCurrency Project (Eric Harris-Braun, Arthur Brock, et. al.)

This program is free software: you can redistribute it and/or modify it under the terms of the license provided in the LICENSE file (GPLv3). This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

Note: We are considering other 'looser' licensing options (like MIT license) but at this stage are using GPL while we're getting the matter sorted out.

clutter's People

Contributors

artbrock avatar bboyatwork avatar christopherreay avatar connoropolous avatar harlantwood avatar lucksus avatar philipbeadle avatar pythagorean avatar qubist avatar rhysanexture avatar science-girl avatar willemolding avatar zippy 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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

clutter's Issues

feature: hashtag functionality

when clicking on a #word or phrase, all mentions of that word or phrase are displayed. example: clicking on @lindsey shows all mentions by others of Lindsey.

Implement Storybook

Add Storybook and UI test the components. Also going to refactor components and containers into their own folders with the idea of a constructed Storybook that has all the components from all the apps in it. That will give us a great dev experience in an app plus an organisation wide view of the components built.

Part of the dev team

This isn't a problem, it's a request, I would like to become part of dev team as I have a change I would like to commit/push but it's failing authentication on github desktop.

The file change I have requested is:

Clutter > test > posts.json

But I can't find any instructions on how to make sure that my commits are being pushed through and checked.

feature: ability to apply background image

As a Clutter user I'd like to be able to upload a background image of my choosing so that I can personalize the dashboard and experience to suit my personality and the way other's see me when they search for me.

minor bugs in clutter

  • Can’t follow a user if they are not currently online.
  • No way to discover new users within the app (do both of these require indexing? Or a list of handles to be maintained somewhere?)
  • Unfollow doesn’t seem to be working
  • I might be wrong, but I thought I had noticed that when a user goes offline, their meows disappear from my feed (or at least don't populate the next time I come online)
  • Clicking a handle doesn’t seem to filter posts

system header validation

#610 added headers system type. sysvalidation of that type confirms the entry schema but still needs to:

  • confirm signatures in system headers entry

ui: tweaks & fixes

As a Clutter user I need to feel the familiarity to Twitter in order to feel confident using it.

  • 'Clutter' headline clickable
  • Separate meow feed from message area
  • Move handle under profile picture
  • Change background image / find higher-res

From @science-girl:

  • background graphic of kittens should be fixed not
  • set handle should be a dialog box that pops up upon opening page
  • after setting handle, return to screen to send message

meow links should be clickable

when a user posts a meow with a link, it is not currently clickable. desired behavior: clicking link will open it in new tab.

As an alpha 1 user I want to have links clickable if the link is in the proper and full format with "https://" in front.

feature: implement favorite list

on sidebar, have option to click on "favorites" which would display all posts for that user, that were marked with a red heart.

Add UI Automation tests with Cypress

Automated UI Testing with Cypress.io on Travis-CI and in a terminal
Use the Docker image, init and run Clutter in the Docker image from the current branch
Run the Cypress tests.

feature: profile picture

As a clutter user I want to be able to upload my own profile picture and see the profile pictures of others.

(Click on left hand cat with bird in mouth... to change your profile picture.)

Resizing and everyting done client-side, MVP.

This will mean dealing with the question of file storage of pictures... I propose Base64 encoding with size limit (5 Mb?) and put it into a Holochain entry.

UI fixes

  • follow list broken
  • no good update mechanism (UI re-render)
  • no way to view meows of somebody you haven't followed

feature: follow user per subject

Forgive me if this is not the best place to post this... if you can point me to somewhere better I will happily re-post.

This is a request for Clutter to enable users to follow others PER subject or #tag
So, for example I might follow @artbrock for #holo but not for #cats
Thereby reducing the noise in my stream.
This seems like a fairly easy addition which Twitter never got round to implementing, and if Clutter was to do it now it while the user base is small it would be easier...
It may get complex if users post on many tags so some "follow #all" and "not #cats" functionality may be required to improve UX

client side error on getfollow

I'm running node 8.9.4, npm 5.6.0 on mac OS 10.12.6. Checking out master and running yarn install and yarn build in ui-src seems to work fine.

then I run hcadmin join . clutter and hcd clutter which shows me a DNA hash of QmUSHVAekeYGHoayHTbzwpRd8hR1gunpT4SRJGa4NaFRT2 and I can see my IP address listed in http://bootstrap.holochain.net:10000/QmUSHVAekeYGHoayHTbzwpRd8hR1gunpT4SRJGa4NaFRT2

When I start interacting with the app though I see client side errors in both Chrome and Firefox. I can set my handle ok and see the results reflected on the bootstrap server but the getFollow api call gives

{errorMessage: "uvarint: buffer too small", function: "getLinks", name: "HolochainError",…}
errorMessage
:
"uvarint: buffer too small"
function
:
"getLinks"
name
:
"HolochainError"
source
:
{column: "17", functionName: "doGetLink", line: "265"}

and when I go to the follow page it shows a blank screen and an error message in the browser console of

Follow.js:18 Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
    at Follow.js:18
    at Array.filter (<anonymous>)
    at e.value (Follow.js:17)
    at c (react-dom.production.min.js:130)
    at beginWork (react-dom.production.min.js:133)
    at o (react-dom.production.min.js:161)
    at a (react-dom.production.min.js:161)
    at u (react-dom.production.min.js:162)
    at _ (react-dom.production.min.js:169)
    at w (react-dom.production.min.js:168)

memory leak?

I installed everything and tested how things work.
For 2 hours I let things run in the background, then suddenly the memory usage of 'hcdev' increased to 14GB for each of the two 'clutter' processes and my 32 GB memory of my computer just got filled and it crashed.
What causes it?

clear and easy clutter install path(s)

As a new clutter user I want the install instructions to not confuse me, and have a very easy time following them while installing them so I can successfully install it.

Current release zip (Feb 13th) is missing the react ui-src folder, meaning the README instructions don't apply.

  • new clutter release zip
  • update readmes to clarify using the source vs. the release version

clutter ui builds in the repo?

Is there any reason not to include a UI build in the repo so that there are all the needed files in the ui directory?

This would mean that you can just clone the the repo and start running it without having to do npm stuff.

refactor

Make the code great again!
Include anchors.

feature: display both followers and following

When clicking on Follow Someone, let's include a list of who is following you, not just who you are following.

Either that or we add number/summary displays: Mews, Following, Followers under profile pic.

feature: post with local relevance

This is a feature request for Clutter users to be able to post (mews) with local relevance of:

  • street
  • 'Hood
  • City
  • Country
  • World

(as per the "New Post" screenshot on https://open.coop/2017/01/10/planet-open-source-operating-system-collaborative-sustainable-economy/ )

Thereby allowing followers to only retrieve mews which are relevant to them.
For example if @zippy has a party at his house tonight and posts an invite to all his Clutter followers it is not really relevant to those that are not in his city.
If every post (mew) was geo-tagged followers would be able to filter out mews which were not relevant to them (if they liked) in order to reduce noise.

`hcdev web` fails after a fresh clone because of `BasedOn` key in dna.json

Steps to reproduce:

git clone https://github.com/Holochain/clutter.git
cd clutter/ui-src
yarn install
yarn run build
cd ..
hcdev web

Output: web: error decoding DNA file /Users/michael/explore/clutter/dna/dna.json: json: cannot unmarshal object into Go struct field DNAFile.BasedOn of type hash.Hash

If I remove the "BasedOn" key at https://github.com/holochain/clutter/blob/develop/dna/dna.json#L15, I can run the app.

hcdev -v => hcdev version 0.0.5 (holochain 24)

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.