Dev Collab

Overview:

Dev collab is a networking tool for developers to connect with others, talk about their projects and collaborate all in one convenient place.

The Team:

Cainan Barboza

Cainan's Github
Role: Back-end Development

Micah Peterson

Micah's Github
Role: Front-End Development

Tools used in the project:

Languages:

• HTML
• CSS
• JavaScript

Other Tools:

• React
• Redux
• React-Bootstrap
• JSON Web Tokens (authentication)
• mongoDB (database)

Base Objectives:

• Landing page with explanation of site
• Profile page with information about the unique user
• Ability to edit profile information
• Create unique posts with tech, title and post text
• Ability to view others profile and follow them to connect

Flex Goals Completed:

• Provide universal login from anywhere
• Smoothen out navigation for natural user experience

Stretch Goals Future

• Ability to direct message followed users via socket server chat engine
• Ability to filter projects by tech used or text

Challenges & Solutions:

Some of the biggest challenges we faced with this project build included:

Challenge: React Lifecycle Methods

Solution: Understanding the flow of the lifecycle methods and how they are called is an interesting trait of doing a project in React. After much trial and error, we figured out that we were running several functions in the wrong portion of the cycle, causing functions that need not be called to be called during every re-render.

Challenge: Working with a React theme

Solution: Initially, we believed using a theme was going to make it much easier on front-end, but we found that as we tried to create our own unique components it became difficult to overwrite pre-existing properties on the components. But the theme did help provide consistency throughout the site.

Challenge: Functional or Class?

Solution: When creating a new React component, a developer has a relatively difficult choice to make. Should the component be functional or class-based? The answer is we still don't know. But we found that visually it was easier to read and navigate the code of a class component, but that it also lacked the simplistic natures of the useEffect function. Eventually we just decided that pages should be class-based and smaller components within the page should generally be functional.

Code Snippets:

The snippet below is of the function used to connect the redux global store (via Provider) to the 'props' object so that it can be used throughout the entire component.

const mapStateToProps = state => ({
    isAuthenticated: state.auth.isAuthenticated,
    post: state.post,
    user: state.auth.user,
    profileimg: state.profile.profile.profileimg
})

export default connect(mapStateToProps, {getPosts, addPost})(Posts)

Code for the profile image upload in the profile page user card header

    <CardHeader>
    <img
        alt="..."
        className="img-center img-fluid rounded-circle"
        style={{minHeight:'125px'}}
        // their uploaded profile image
        
        src={
        this.props.profile.profile.profileimg ?
        this.props.profile.profile.profileimg :
        "https://coursereport-s3-production.global.ssl.fastly.net/rich/rich_files/rich_files/5668/s300/social-media.png"
        }
        
    />
    <Row className="w-100 justify-content-center ml-0 mr-0 mt-1">
        <label 
            htmlFor="file" 
            style={{cursor:'pointer', color:this.state.hoverColor, fontSize:this.state.hoverSize}} 
            onMouseEnter={this.hoverEffect} 
            onMouseLeave={this.revert}
            >
            change profile photo
        </label>

        <Input type="file"
                name="file"
                id="file"
                style={{display:'none'}}
                placeholder="Upload an image"
                onChange={this.uploadImage}
        />
    </Row>

    <h4 className="title">{this.props.profile.profile.user.name}</h4>

    <h5 className="text-center"><i className="tim-icons icon-square-pin"></i>{this.props.profile.profile.location}</h5>

    <Row className="justify-content-center">
        <Link to="/edit-profile" ><Button ><b style={{color:'white'}}>Edit Profile</b></Button></Link>
    </Row>

    </CardHeader>

This snippet shows the action creator that fetches the user's profile image

export const addProfileImage = (data) => async dispatch =>{

    try {

        const res = await fetch(
            'https://api.cloudinary.com/v1_1/dnf1divya/image/upload',
            {
                method: 'POST',
                body: data
            }
        )
        const file = await res.json()
        console.log(file)
        const config = {
            headers: {
                'Content-Type': 'application/json'
            }
        }
        const response = await axios.put('/api/profile/upload', {file: file.secure_url}, config)
        console.log(response.data)
        dispatch({
            type: SET_PROFILE_IMAGE,
            payload: file.secure_url
        })

        dispatch(setAlert("Profile Image Added",'success'))

    } catch (error) {
        const errors = error.response.data.errors;
        if(errors){
            errors.forEach(error => dispatch(setAlert(error.msg, 'danger')))
        }
        dispatch({
            type: PROFILE_ERROR,
            payload: {msg: error.response.statusText, status: error.response.status}
        })
    }
}

Screenshots:

Creating a post

Posts displayed on profile and posts page

Profile information includes a bio, name, location, websites, company, skills and the user's posts