shorttompkins / mrw.lol Goto Github PK

Create the React component that supports the user uploading an image.

The form should include the following fields:

• File browse dialog input
• External URL input
• Tags (single words, space separated)

The taggle input field grows in height and the current tag is always on its own line (which is annoying from a UX standpoint). Need to figure out how to fix this!

Automated unit tests for both server and client portions.

For classes, would eliminate the use of myMethod = () => {} to autobind the method to this

https://github.com/andreypopp/autobind-decorator

Like /giphy tag

Should we integrate basic custom comments into the app?

Currently multer is being used to store the images directly on the FS for the server.

Should really be moving them to S3 instead.

Show images listed by userid

Show a unique list of the users tags (linking to search by each)

Lets take the repo and expand on it by creating a real-world application. Lets build apon imgPloadr by creating a website that allows users to register/login (using social network authentication i.e. Twitter/Facebook) and upload and tag a collection of gifs. Users can also browser other users gifs (by tag) and like them to add a copy to their own collection.

List latest images on the homepage (not by user).

The Image uploader react component should hit the server API endpoint that handles the actual uploading of the image file and inserting the records into the data store.

• Download the image from external URL if provided instead
• Upload the attached file if the user did attach a file
• Create a new Image model and save reference to uploaded filename
• Create a new UserImage model and assign the new image id, the uploading user id, and the provided tags

Bonus:

• It would be awesome of the uploaded images are saved directly to S3, even if its pass thru via the node server first.

Implement new relic so that outages and errors can be properly captured.

Currently the project is setup to be a blog.

Should be converted to be the official home for MRW.

Homepage should be the single React app. Additional pages can be
for basic content (about, FAQ, etc, etc).

Get Bootstrap integrated so the design can slightly start to come together.

Currently the list view will just retrieve all images.

Obviously we need to paginate this data once more images start getting loaded in (and more users etc).

The meta tag for og:image-url needs to be rendered by the server, so that implementations like slack can get it from snagging the meta data (since slack wont render the react portion of the app)

This is so that a simple url link can be pasted into Slack and the image will appear correctly.

Present a user settings screen that allows:

• Display Name (i.e. username in url paths etc)
• Email address (for twitter users)
• Avatar (change from default pulled from their social login

Look into using React on the server side to render screens and serve up rendered HTML before forcing the client side app to do its thing.

• On the homepage, the main search should search all images by tag.
• On a users homepage, the main search should search the users image by tag.

Create the necessary mongoose models for uploaded images.

• Image model
  • Original uploader (userid)
  • Filename
• UserImages collection
  • User (userid)
  • Image (imageid)
  • Tags (collection)

Setup the webpack build process (replacing Gulp).

Create Docker containers for the app to reside in. Test with pushing to DigitalOcean.

Take an existing image, and quickly add it to your own collection.

Link to the Add Image screen with the image portion prefilled, and focus on the tags field as all the user needs to do is tag (prefill the tag with the images tags too)

On the unique image screen, display a list of the tags associated with the image (for every user that has tags assigned to the image)

Create Login component allowing the user to register a new username/password or use Social Networks to login (Twitter, Facebook, Google).

The taggle input field grows in height and the current tag is always on its own line (which is annoying from a UX standpoint). Need to figure out how to fix this!

Support Passport to allow users to login/register using social networks (Twitter, Facebook, and Google to start).

[ ] Implement Passport and Social plugins (npm)
[ ] Create mongoose User model (server)

http://mherman.org/blog/2015/09/26/social-authentication-in-node-dot-js-with-passport/#.Vgb683fzt7g.linkedin

http://sean.is/poppin/tags