Welcome to OurSpace!

View the Live site here!

Ourspace is a full stack web application modeling Facebook. Users have the ability to signup and login. A signed in user has the ability to create posts, view the posts of the community on Ourspace, like posts and comments, add friends, and create a custom profile page.

The framework of the website is built on Rails with ActiveRecord preventing n + 1 queries to the database. I used PostgreSQL as the database stroage and AWS S3 to store the images for posts and user profiles. The frontend uses React and Redux to allow this single-page app to reload only the components which have changed, rendering efficiently.

Technologies

• Ruby on Rails
• React.js
• Redux.js
• Node.js
• PostgreSQL
• Webpack
• Amazon AWS S3
• jbuilder

Features

User Auth

Users will see which fields are incorrect upon improper signup or login.

// signup_form.jsx

render(){
    const {first_name, last_name, email, password, gender, birthday} = this.props.errors; // Retrieved from the container component which recieves errors from the backend
    
    const fnameErr = !!first_name ; // Holds the value of whether or not there an error for the firstname input feild
    
    const firstNameError = first_name ? <div className="fname-err"> {"First Name " + first_name[0]}</div> : ''; 
    // holds information of what will display is the first name input reveives an error
    
    return(
    // Inside return function:
    
        <input type='text'
        onChange={this.update('first_name')}
        value={this.state.first_name}
        placeholder="First Name"
        className="signup-input-fname"
        style={fnameErr ? {border:' thin solid red'} : {} } />
        
        {firstNameError}
        // This is the code we wrote above written in React/jsx to render dynamically    
        )
    }

Creating Posts

Users can create posts with images and a caption.

• When users click the create post icon, a modal opens and auto focuses on the input field.

Editing Profile Page / Dynamic Rendering

Users can fully edit their Profile Page.

• If a user doesnt have a bio, a placeholder instructs the user to click the bio button to add one.

However, as you may assume, these edit buttons only appear if the profile page being viewed is the Currrent User's profile page.

Here's a snippit from the profile.jsx file:

{user.id === currentUser.id ? 
<div className='edit-photos-holder'>
    <form className='add-cover-photo' onClick={this.props.openUpdateCoverPhoto}>
        <label className='add-cover-photo-label'>
            <MdPhotoCamera />
            Add Cover Photo
        </label>
    </form>
    <div className='add-profile-picture' onClick={this.props.openUpdateProfilePhoto}>
        <MdPhotoCamera />
    </div>
</div>
:
''
}

The user object on the first line is selected from the url specifiing the id of the user in the profile container. From there, buttons allowing edits conditionally render depending on if the profile page being viewed is the same as the currentUser's id. A user can add their Bio, Birthday, Occupation, Gender, Location, and much more.

Adding and Removing Friends

Users can send, accept, and deny friend requests, along with adding and removing friends they encounter through the home page/ postIndex page.

// friendship_reducer.js

    case RECEIVE_FRIENDSHIP:
            let id2 = action.friendship.id + 1;
            let friendship2 = {
                id: id2,
                user_id: action.friendship.friend_id,
                friend_id: action.friendship.user_id,
                created_at: action.friendship.created_at
            }
            newState[action.friendship.id] = action.friendship;
            newState[`${id2}`] = friendship2;
            return newState;

To quickly view these features, use the two Demo accounts that are easily accessable on the login page.