说明: Scrollo是一个受汤博乐启发的全栈web应用程序,汤博乐是一个允许用户表达自己想法的微博网站... (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.)
# Scrollo
[Scrollo Live](https://scrollo.herokuapp.com/#/signup)
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
### 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
{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
### 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
Container components pass dispatching functions as props to the connected component. These functions will dispatch an action to trigger a state change.
Show Code