devalien / dripr-ui

dripr.io interface

Dripr UI

https://dripr.io Dripr is a screenshot/file sharing platform, similar to cloudapp. This is a universal (isomorphic) web application usign some cool features.

What's under the hood?

Basically a React app which connects to some APIs (node.js). When a file is uploaded it gets stored in Amazon AWS s3, then there's some Amazon AWS Lambda running to do some tasks, like resizing an image for example. In front of s3 there is cloudfront (cdn).

There's also a desktop app where you can see your uploaded files and take screenshots which will be directly uploaded.

Features

• Upload Images
• Upload Videos
• Upload Code (Paste)
• Upload a Link, a redirect will be made, so you can keep track of the visits
• Upload text, text will be displayed in a nice way
• Login (via facebook) to store everything you upload

We used

• React
• Redux
• React Router
• Babel
• Webpack

Usage

** Copy configuration files **

Copy /config/default.json to /config/development.json. Change it with the desired values

Start the development server

The server will run on localhost:4000.

$ npm run dev

or

$ npm run devw

on Windows

Build source files

Compiles JavaScript files with JavaScript and extracts CSS files from JavaScript.

$ npm run build

Start the production server

$ npm start

Run ESLint

$ npm run eslint

Run JSCS

$ npm run jscs

License

MIT

dripr-ui's Issues

Cannot send empty text

At the moment, many texts are sent empty, we have to avoid this

Views counter double each refresh

Looking at this link: https://dripr.io/file/rJyIa_omg
Every time you refresh the page, the counter add 2 visits each time.

Pagination on scroll

An "infinite scrolling" pagination option would be nice to have on the List component. We can't develop that if the api endpoint /files doesn't support pagination. Does it? If yes, how?

Add comments to files

Give the possibility to comment a file

Move config vars to config files

Move config vars to config files, as far as I can remember there's the * google analytics* one, and probably remove the configs from codebase, let's leave just the default one.

Ability to delete images

It would be nice if I could delete my images from dripr.io/list, a small "x" and a confirmation message should suffice.

Can't run it on Windows

Can't run it on Windows. Probably because of the SET NODE_ENV variable on the script

Node version 5.5
Windows 7

Add meta data infos

I want to add meta data infos, this is importan for when we share the links through facebook/twitter etc, at the moment we do not display anything and it is kind of bad.

https://moz.com/blog/meta-data-templates-123

Rebuild css

I think dripr should use a framework, it is easier to make it mobile frienldy and there's not a mess. I think I will try bulma.io but it is huge, I will see if I can slim it down
This would solve #4

http://bulma.io

Custom cut works only on primary screen

Hi,

first of all good job; never thought this could have been done with nodejs.
I have a problem tho: the custom cut works only on primary screen.

Operating system: Win 7, 64bit

Implement shouldComponentUpdate

Implement shouldComponentUpdate:

https://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate

Add pro tips

We need to add a way to write down protips like this: https://dripr.io/file/Ekb4Warie

change drop area, when file is on top

At the moment when a file is being dropped in the area, the area does not change, it does not give feedback of what you are doing

Mobile friendly version

I'd really love to have a mobile friendly version for when people send me pictures on my phone and I have to open them with my mobile browser

DNS for www.dripr.io

Set DNS information for www.dripr.io domain.

Google Fonts over HTTPS

You can change the URL stylesheet for Google Fonts from HTTP to HTTPS.

Mixed Content: The page at 'https://dripr.io/' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css?family=Open+Sans:400,700'. This request has been blocked; the content must be served over HTTPS.

Standalone React Component - NPM package

Hi @DevAlien nice project you have :) maybe you can create a standalone React component to use the dripr.io api.

• NPM package name: react-dripr
• Install with npm install react-dripr

and use it like:

import React from 'react';
import ReactDOM from 'react-dom';
import Dripr from 'react-dripr';

ReactDOM.render(
    <Dripr 
        apiKey="__dripr.io-apiKey__"
        placeholder="Click or Drag files here" 
        onSuccess={callback(fileObj)} />,

    document.querySelector('.app')
);

Let me know and I can help you :)

Notification message for 0 files

After a new user signup, there must be a notification message "You have 0 files. We suggest to upload new files."

https://dripr.io/list

Image tagging

I'd love to be able to assign tags to my images and then have the ability to search my images with one or more tags.

There is also the possibility to add the "flag as public" function and allow people to search public images using tags.

Add linux support

I want it for my Linux laptop, it will be so cool!