LinkU is a clone of LinkedIn, the online service used for professional networking. In LinkU, users can network with other professionals by sharing their information on profile and post/comment on newsfeed.
Techs Used: JavaScript, React, Redux, HTML, CSS, jQuery, Rails, JBuilder, PostgreSQL
Live Site: LinkU
- Frontend: React/Redux
- Backend: Rails
- Style: SCSS
- Database: PostgreSQL
- Image Upload: AWS
Users can create an account with basic information. Upon logging-in users have access to additional features such as creating profile, posting, and adding networks.
On profile page, users can create or edit their user information, goal, experience, and education.
Users can write posts on the live feed page. Other users can see the post and write a comment on it.
To best practice object-oriented programming, every section of profile page is in its own container.
class Profile extends React.Component{
constructor(props){
super(props);
};
componentDidMount(){
this.props.getUsers();
}
render(){
return(
<div className='profile-div'>
<section className='sub-section user'>
<UserIntro />
</section>
<section className='sub-section about'>
<AboutIndexContainer />
</section>
<section className='sub-section experience'>
<ExperienceIndexContainer />
</section>
<section className='sub-section education'>
<EducationIndexContainer />
</section>
</div>
)
}
}
Modal.jsx mananges every modal case effectively.
const Modal = (state) => {
const modal = state.modal;
if (!modal) return null;
let component;
switch(modal){
case 'createEducation':
component = <CreateEducationForm />;
break;
case 'editEducation':
component = <EditEducationForm />;
break;
case 'createExperience':
component = <CreateExperienceForm />;
break;
case 'editExperience':
component = <EditExperienceForm />;
break;
case 'createAbout':
component = <CreateAboutForm />;
break;
case 'editAbout':
component = <EditAboutForm />;
break;
case 'editUserIntro':
component = <UserIntroForm />;
break;
case 'createPost':
component = <CreatePostForm />;
break;
case 'editPost':
component = <EditPostForm />;
break;
default:
return null;
}
return (
<div className='modal-div'>
<div className='modal-component-div' onClick={e => e.stopPropagation()}>
{ component }
</div>
</div>
);
}
- Likes
- Search Bar
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent