search

r-lee1 / scrollo

Scrollo is a full-stack web application inspired by Tumblr, a microblogging website that allows users to express themselves by creating content in the form of multimedia posts. This application is built using a React/Redux frontend, Ruby on Rails backend, and PostgreSQL database.
https://scrollo.herokuapp.com/#/
7 stars 0 forks source link

readme

Scrollo

Scrollo Live

Scrollo is a full-stack web application inspired by Tumblr, a microblogging website that allow users to express themselves by creating content in the form of multimedia posts. This application is built with React, Redux, Ruby on Rails, and PostgreSQL.

Features

Post Creation

Users can create posts of different types (text, photo, quote, link, audio, and video) from their dashboard. The user can select a post type from the post navigation bar and a post form that is tailored to that post type becomes available.

Show Code

```js

```


![post-form-demo](https://media.giphy.com/media/xUNd9K8IQikFkN7q8g/giphy.gif) Interaction with posts is protected so users have to be logged in.
Show Code

```js ``` ```js const Protected = ({ loggedIn, exact, path, component: Component }) => ( ( loggedIn ? : )} /> ); ```

#### Cloudinary Photo, audio, and video can be uploaded using the Cloudinary widget.
Show Code

```js postImage(url) { this.setState({ ["source"]: url }); } uploadImage(e) { e.preventDefault(); window.postImage = this.postImage.bind(this); window.cloudinary.openUploadWidget( window.cloudinary_options, function(errors, result){ window.postImage(result[0].url); } ); } ```

### Feed The feed is populated with the user's own posts and those of other users the current user is following. Actions available to the user on these posts change depending the authorship. Users can edit/delete their own posts through the feed. ![post-edit-demo](https://media.giphy.com/media/26wkG8Uj24rF7cc0w/giphy.gif)
Show Code

```js deleteButtonVisible() { if (this.props.currentUser.id === this.props.post.author_id) { return ( ); } else { return ( ); } } editButtonVisible(postType) { if (this.props.currentUser.id === this.props.post.author_id) { return ( ); } else { return (

{this.props.post.likes_count}

{this.toggleLikeButton()}
); } } ```

#### Follows Users can follow other users. Other users can be found under recommended blogs.
Show Code

```js class FollowUsersIndex extends React.Component { constructor(props) { super(props); } componentDidMount() { this.props.fetchFollowUsers(); } render() { return (

    RECOMMENDED BLOGS

    {this.props.followUsers.map( user => { return ;} )}
); } } ``` ```js makeFollow() { let followEntry = { "follower_id": this.props.currentUser.id, "followee_id": this.props.user.id }; this.props.createFollow(followEntry).then(this.props.fetchPosts); } ```

#### Likes Users can like other users' posts. The like counts on that post can be seen by everyone. ![post-like-demo](https://media.giphy.com/media/l3diP9PZZ0dAyLPby/giphy.gif)
Show Code

```js likePost() { if (!this.props.liked) { this.props.createLike(this.props.post.id); } else { this.props.deleteLike(this.props.post.id); } } ```

### Redux Integrated Redux architecture for reliable and efficient state management. Container components access the entire store state and select data that the connected component needs.
Show Code

```js const mapStateToProps = (state, ownProps) => { if (ownProps.match.path === "/dashboard/edit/text/:postId") { return ({ post: state.entities.posts[ownProps.match.params.postId], actionButton: "Edit" }); } else { return ({ post: {}, actionButton: "Post" }); } }; ```


Container components pass dispatching functions as props to the connected component. These functions will dispatch an action to trigger a state change.
Show Code

```js const mapDispatchToProps = (dispatch, ownProps) => { let actionPost = ownProps.match.path === "/dashboard/edit/text/:postId" ? updatePost : createPost; return { actionPost: (post) => dispatch(actionPost(post)) }; }; ```