matthieulemoine/open-image-feed

A open source self-hosted real-time image feed.

Open Image Feed

A open source self-hosted real-time ⚡ image feed.

Description 📄

Open Image Feed's goal is to provide a ready to run image feed which can be hosted on any server or computer.

What is an image feed ?

You surely know some image feeds like 9GAG. The idea behind a image feed is to provide an easy way for users to share an image (which can be animated) and to comment other users' posts.

How OIF differs from others image feeds ?

• Open source :
  • Everyone can contribute
  • Everybody have free access to it.
• Self-hosted 🌐 :
  • You need to install it on a server to make your instance accessible for others to use
  • You keep control of your data
  • You can deploy as many instances of OIF that you want : an instance for your work place 🏢, another for your friends or familly 🏠...
• Real-time ⚡ :
  • Real-time loading of new posts / comments / likes
  • Real-time reloading of updated posts / comments / likes

Where can i find a live example ?

You can find one at https://oif.matthieulemoine.com.

Please do not hesitate to sign up and post some content.

Functionalities 📘

• Authentication 🔒
• User profile 👨 👩
• Posts with image and title
• Comments ✏️
• Likes 👍
• Infinite scroll loading
• Real-time ⚡ update thanks to the power of RethinkDB & socket.io

Mobile app 📱

Open Image Feed, it's also a mobile app powered by React Native. The OIF mobile app is still on alpha stage, some key features are missing and have only been tested on Android.

This mobile app will allow users to connect to several instances of OIF and to receive push notifications on new post/like/comment.

Install 🔌

Install Node.js

You can find the installation instructions for your OS/distrib in Node.js official documentation.

Install RethinkDB

You can find the installation instructions for your OS/distrib in RethinkDB official documentation.

Install dependencies & build

npm i
npm run build

Run 🏃

npm start

Configuration

Open Image Feed uses environment variables to configure rethinkdb access :

Environment variable	Default value
RETHINKDB_HOST	localhost
RETHINKDB_PORT	28015
RETHINKDB_DB	openImageFeed
RETHINKDB_USER	empty
RETHINKDB_PASSWORD	empty

Tooling 🔧

• React
• Redux
• Material Design Lite
• Node.js
• Express
• RethinkDB
• Thinky
• Socket.io
• Webpack
• Jest
• Enzyme
• React Native

Need help or found a bug ❓

Do not hesitate to open an issue.

Contribute 📝

Feel free to contribute. Every contributions are welcome. Please read the contribution guidelines first.

open-image-feed's Issues

Add search

Implements search by title.

Store session info

For now, we have to login each time we refresh the page.
We need to find a way to store session data on client-side.

Add a default first card

Support Image URL

Post sort

Use env variables instead of config file

Replace server/config.json by env variables.

Fix on drag over style

Feed notifications

Display a message when new posts are available.

Like functionnality

• display likes count / list
• like a post

Example / Demo Page is broken

The Demo page linked in the readme.md Seems broken. I get a HTTPS warning followed by a 502 by nginx.

Use lazy loading

Implements lazy loading on Feed, Activity Feed and Comments.

Trouble installing

Hi,
I am trying to install and when I run npm run build I have this error message :

ERROR in ./common/actions/posts/posts.js
Module not found: Error: Cannot resolve module 'socket.io-client/socket.io' in /var/lib/oif/open-image-feed/common/actions/posts
 @ ./common/actions/posts/posts.js 219:191-228

I tried to find a solution but I failed (I am new to nodeJS).
My system is debian jessie (8).
Thanks

Feed infinite scroll

Add upvotes

Add a comment module

Gif support

Comments management

• Front :
  • display comments
  • create comment
  • update comment
  • delete comment
• Back
  • list comments
  • persist/update comment
  • delete comment

Add error messages on bad requests

I tried running master branch index.html page missing

Add activity feed

Links in Activity Feed

Post filter

Add Gif support

Rewrite

Rewrite using :

• Horizon
• React / Redux