Enchanted by the limitless opportunities presented in all of Facebook's widgets + component based architecture, I chose to clone and redesign a social media website as a personal milestone project.
To understand how FB was constructed as I would be building with React components, I began with grayboxing the elements that made up the three major pages (landing, profile, feed) and breaking down what major data tables were necessary to hold relevant information before creating my own variations.
Cloning FB was probably an incredibly ambitious choice for my first fullstack application, but proved incredibly helpful in understanding React's modular component system as well as styling with so many disparate pieces.
The first challenge involved navigating the liberal combination of dropdowns and modals, such as when creating a post. Appearing on the newsfeed as well as profile pages, clicking the text input field would actually open a modal, which had to open and expand to fill the same space as existing posts as opposed to a free floating centered element.
I circumvented this with switch case components and event listeners that would check for their respective reference element as well as populating the component holding the modal to expand to the full width of the container holding posts.
let dropdown = null; switch (this.state.type){ case 'postComment': dropdown = (this.state.dropdown) ? <ul ref={this.node} className='postCommentDropdownContainer'> <li className='postCommentDropdownListItem' onClick={() => this.triggerPostCommentEditModal()}> <img className='postCommentIcon' src='/images/comment_edit.png'/>Edit...</li> <li className='postCommentDropdownListItem' onClick={() => this.deletePostComment()}> <img className='postCommentIcon' src='/images/comment_delete.png' />Delete...</li> </ul> : '' return dropdown; default: dropdown = (this.state.dropdown) ? <ul ref={this.node} className='dropdownContainer'> <li onClick={() => this.triggerEditModal()} className='dropdownListItem'>Edit Post</li> <div className='dropdownSpacer'></div> <li className='dropdownListItem' onClick={() => this.deletePost()}>Delete</li> </ul> : '' return dropdown; }
The modal itself follows a similar idea. As the post creation modal was rendered in different widths and positions on the profile and feed components, it was necessary to have those elements be controlled by the elements that contained them.
The solution I ultimately followed was to have the modal be returned and replace the placeholder when it was clicked:
returnCreate() { if (this.state.modal){ return <div className='postModal'> <CreatePostModal currentUser = {this.props.currentUser} hideModal = {this.hideModal} createPost = {this.props.createPost}/> </div> } else { return <div className='postNormal' onClick={() => this.showModal()}><PostCreateWidgetContainer /></div> } }
I also ended up recreating Facebook's icons as I went along, unsatisfied with the low resolution screenshots or inaccurate variations that were available to me, without really realizing how many unique designs there really were. There are.. so many..
