scrollo

所属分类:PostgreSQL
开发工具:JavaScript
文件大小:155KB
下载次数:0
上传日期:2023-01-19 06:27:15
上 传 者sh-1993
说明:  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.)

文件列表:
Gemfile (1962, 2021-06-18)
Gemfile.lock (5382, 2021-06-18)
Rakefile (227, 2021-06-18)
app (0, 2021-06-18)
app\assets (0, 2021-06-18)
app\assets\config (0, 2021-06-18)
app\assets\config\manifest.js (101, 2021-06-18)
app\assets\images (0, 2021-06-18)
app\assets\images\.keep (0, 2021-06-18)
app\assets\images\if_Smiley_34616.png (11033, 2021-06-18)
app\assets\javascripts (0, 2021-06-18)
app\assets\javascripts\api (0, 2021-06-18)
app\assets\javascripts\api\follows.coffee (211, 2021-06-18)
app\assets\javascripts\api\likes.coffee (211, 2021-06-18)
app\assets\javascripts\api\posts.coffee (211, 2021-06-18)
app\assets\javascripts\api\sessions.coffee (211, 2021-06-18)
app\assets\javascripts\api\users.coffee (211, 2021-06-18)
app\assets\javascripts\application.js (714, 2021-06-18)
app\assets\javascripts\cable.js (360, 2021-06-18)
app\assets\javascripts\channels (0, 2021-06-18)
app\assets\javascripts\channels\.keep (0, 2021-06-18)
app\assets\javascripts\follows.coffee (211, 2021-06-18)
app\assets\javascripts\static_pages.coffee (211, 2021-06-18)
app\assets\stylesheets (0, 2021-06-18)
app\assets\stylesheets\api (0, 2021-06-18)
app\assets\stylesheets\api\follows.scss (183, 2021-06-18)
app\assets\stylesheets\api\likes.scss (181, 2021-06-18)
app\assets\stylesheets\api\posts.scss (181, 2021-06-18)
app\assets\stylesheets\api\sessions.scss (184, 2021-06-18)
app\assets\stylesheets\api\users.scss (181, 2021-06-18)
app\assets\stylesheets\application.css (744, 2021-06-18)
app\assets\stylesheets\dashboard.css (77, 2021-06-18)
app\assets\stylesheets\docs (0, 2021-06-18)
app\assets\stylesheets\docs\SPECS.txt (38, 2021-06-18)
app\assets\stylesheets\followusers.css (1254, 2021-06-18)
app\assets\stylesheets\main.scss (0, 2021-06-18)
app\assets\stylesheets\post.css (4473, 2021-06-18)
... ...

# 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

```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)) }; }; ```



近期下载者

相关文件


收藏者