#friendex

Two weeks into the job search, and I finally took the time to look at my Google Analytics stats (I had embedded trackers in my three main projects, Friendex, Pixpy and Planarity, as well as my Portfolio site).

Interesting things I've noticed:

Twice as many people visited Friendex (111 sessions, 102 users), as compared to my portfolio page (65 sessions, 47 users)

Most recruiters are interested in seeing your work and what you can build, as opposed to just your description of yourself.

If you're going to put a project on the top line of your resume, make sure it's baller.

Despite all of the interactive functionality I built, most visitors only stayed on Friendex for approximately 34 seconds.

Don't bank on users actually testing your functionality, but make sure your project looks impressive from the get-go, and that the functionality that you built is obvious even if the user does not interact with it.

A few people tested out the posting and liking functionality on the Timeline (the landing page as soon as you login), but it looks like most people merely looked at the site without interacting with it too much

5 new accounts were created on Friendex including two that were made by friends (based on the account names)

* Although the vast majority of people will not test out your functionality, some people will test all of it. So make sure all of your functionality/features are rock solid! * Most people will just use the "Demo" button, but some people will create full profiles. So make sure there are no bugs in your Login process, and that the Login user flow is smooth. * One person tested the site quite thoroughly, uploading photos, making posts, as well as adding comments and likes. 4. Of those who visited Friendex, 71% merely looked at the login-screen before bouncing off. * Make sure your splash page is impressive and clearly conveys what you built 5. My portfolio had a much higher average session duration of almost 5 minutes, and visitors looked at approximately 4 pages per session. * If someone is interested enough to look you up and go to your portfolio page, then they will also take the time to read what you've written. So make sure your content is polished, clean, and conveys what you intend to portray about yourself. 6. Half the number of guests visited Pixpy, the second project on my resume (64 sessions, 54 users) as compared to Friendex, the first line on my resume (111 sessions, 102 users) * Friendex was the first line on my resume, whereas Pixpy was the second line * Pixpy was co-developed with Matt Corley, who also listed it on his resume (although also not as the first project) * Despite two people sending traffic to the site, only half the number of people visited Pixpy * Conclusion (reiteration from before): Make your first project baller. 7. Of those who visited Pixpy, people stayed on average for 1:10 minutes, twice as long as they stayed on Friendex (34 seconds) * Maybe people like looking at pictures of cute animals more than they enjoy interacting with an empty social networking site? * We also used a setTimeout for our Demo User login, to make it appear like the user is typing in their email and password in front of the user, before logging them in. This requires a set amount of time, so may have actually retained people's attention for longer (similar to how the spinning GIF makes you feel like you're not waiting as long when pages are loading). * Perhaps if someone has taken the time to look at more projects past the first one, they're interested enough to actual dig around your work. Hence, only the really interested people visit your second project 8. One person looked at my Github code for Friendex (and talked to me about it) * Keep your Github clean/polished/professional * Even if most people won't, assume someone will look at your code. Make sure you can explain all of the reasons you chose to design/code everything the way you did. 9. Views of Friendex seem to spike at the beginning of the week * So far, what I've noticed with regards to interviewing cadence, is that recruiters will reach out the most on Mon/Tues to schedule things, and then the rest of the week tends to fill up with phone calls, technical screens, and onsites. * Granted, this may be because of my own application cadence (we first began applying on a Mon, and then I finished App Academy's requirement of submitting 150 applications this past Saturday by sitting down and blitzing through 100. You can see the result of this by the sudden increase in Friendex views) * I also tend to be too busy when I'm running around prepping for interviews and commuting to onsites, to apply to more places, and weekends have been the best time to catch up, email people, and submit applications. So perhaps recruiters are merely responding to the timing of when I submitted an application to them. 10. I do not have any analytics tracking on my Tumblr, so don't worry that I'm watching you read this. But now I'm curious!

Photos

Site traffic by day for Friendex

Stats for Friendex after 2 weeks

Stats for Portfolio after 2 weeks

Friendex - W8D4

Cleaned up the Sign-up/Login Page

Form fields are highlighted in green/red depending on whether they have been filled in correctly

If the email & password combination do not currently exist in the database, a Modal pops up with the Sign-up Form

Tried using Bootstrap, then realized that I was already writing all of the logic on my own anyway and Bootstrap was interfering with a lot of my other styling, so ended up just writing it all myself

Added the ability to update your profile & background images by clicking on them when you're on your own profile page.

Refactored all image renders to pull pre-scaled versions of the images from Cloudinary to speed up load time

Refactored all images to render using a container, to guarantee that the image covers the entire area and does not get stretched

div.user-profile-img-container { height: 75px; width: 75px; display: inline-block; margin: 16px 16px 0 16px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .1); } .user-profile-img-container img { height: 100%; width: 100%; object-fit: cover; }

Added the functionality of having a photo pop up in a Photo Modal when you click on it in an album

This caused some issues with my original method of deleting a post (by clicking an X in the top-right corner of the photo in the album)

Redesigned to have a small "Remove Photo" button to the bottom-left of the photo when it's open in a modal

Only the user who posted a photo can delete it

Fixed Newsfeed - original method of pulling friends had a typo in it

Was pulling friend.id (the id of the friendships) rather than friend.friend_id (the user_id of the friend), which was causing the wrong posts to get pulled

Before the fix, Mark Z's page had mostly his own posts as well as some by Marc A, even after he had unfriended Marc A (original reason for noting the problem)

Friendex

Finished Likes

Can like& unlike a post from the Newsfeed

Can like& unlike a post from the Timeline

All posts display how many people like the post

The Like icon is highlighted in blue when the current user likes a post

Search Bar - Can search for other users by username (first & last name)

Full CSS for all features

Notes

Today I ran into one of the toughest bugs I've seen so far. The issue arose after I had completed the Search Bar and was miscellaneously testing previously built functionality. I noticed that although I could like/unlike posts that were already on the page, when I created a new post and tried to Like it, the count would jump to 2 Likes. When I clicked the button again to Unlike it, the count immediately dropped back down to 0. When I inspected the Post object in the Newsfeed Store, I found that even though the object was only passing through the Flux cycle once (I checked all milestones), in the _onDispatch response it would immediately jump from 0 --> 2 Likes. The two likes in the Newsfeed store were identical, which meant that somehow the like was getting pushed onto the array of post_likes twice. When I followed the debugger, it appeared to only push the object onto the list of Likes once, and then soon thereafter delved into internal Reactland.

I added console.log() statements to track the current status and number of likes, as well as following debuggers through the entire code. Kevin spent 1-2 hours with me trying to figure out the issue, before he had to leave.

There were a few minor issues I ran into along the way -- Javascript was not happy with defining const variables with the same name but in different scopes, and was not setting the values properly. So I had to use let to define the variable in an external scope, then just reassign the value within each if/else clause:

function _removeLike(like) { console.log("in _removeLike(like) in newsfeed_store.jsx"); console.log(like); let itemIdx = -1; let likeIdx = -1; let item = {}; if (like.image_id) { itemIdx = _findItem("image", like.image_id); if (itemIdx >= 0) { item = _newsfeed[itemIdx]; likeIdx = _likeIdx(item.likes, like); item.likes.splice(likeIdx, 1); _updateItem(item); } } else if (like.post_id) { itemIdx = _findItem("post", like.post_id); if (itemIdx >= 0) { item = _newsfeed[itemIdx]; likeIdx = _likeIdx(item.likes, like); item.likes.splice(likeIdx, 1); _updateItem(item); } } else if (like.friendship_id) { itemIdx = _findItem("friendship", like.friendship_id); if (itemIdx >= 0) { item = _newsfeed[itemIdx]; likeIdx = _likeIdx(item.likes, like); item.likes.splice(likeIdx, 1); _updateItem(item); } } }

Ultimately, the fundamental issue was that even when a user is on the Newsfeed page, the PostStore was still listening and responding to the actions made by the Dispatcher. And since I was passing objects around, which are mutable, when the Newsfeed Store received the Post and a Like, it would shovel the Like onto the list of post.likes. Then when the Post Store received the Post and Like, it would also shovel the same like onto the same post.likes array. When the Post object ultimately rendered it had two copies of the same Like in its likes array. When the user clicked to Unlike the post, the same thing would happen where the Newsfeed Store would remove one Like and the Post Store would remove the second Like, resulting in 0 total Likes.

The solution to this problem, was to add conditional logic to check whether that Like existing in the list of likes for a Post, before adding or removing it. I then only pushed the Like on if it was not already a part of the likes array.

This issue could also have been solved by saving the likes as an object with keys of user_id and values of the like object. Then you could simply update or delete the likes object by user_id in constant time. Because I wanted to ultimately/eventually include a list of usernames of the users who have liked a post, I had decided that it would be easier to pull those usernames if the likes were stored in an array (that way you could just take the first 1-2 likes & usernames, rather than having to figure out the user_ids and then pull them. After some quick Googling, I found the Object.getOwnPropertyNames(obj), which may have been far easier/simpler than keeping the likes in an array. The other difficulty I was running into in trying to pursue this other method (of saving each like as a key:value pair from user_id:like in the likes object), was the ability to dynamically set a key in Ruby. I was trying to use jBuilder, but even that was proving difficult. My first attempt work partially, but did not include any likes object at all when a post had no likes. This was raising errors when I then tried to add a new Like to a Post, since that post would not have a likes property to add to. I could have fixed this by checking whether it had a Likes property and adding one if it didn't, but at that point decided that just saving an array of likes wouldn't be that bad.

All told, I ended up spending 7-8 hours on solving this one bug (~5pm-12:30am, give or take). That isn't counting the time I spent switching my likes from being stored as an array to an object, back to an array again (which happened this morning). This may not have been my most fun night, but I definitely learned from it, and it's reassuring that I was able to figure it out essentially on my own.

Main learnings from today

Facebook is complicated and has a ton of features that interact with each other in unexpected ways

Keep track of what is mutable and keep in mind that Stores will still respond to Dispatches, even if their relevant components are not currently rendered

Debugging gets more difficult the more complex your code base is

Code gets complicated fast

Keep testing your code!!

Even though 2 weeks may not be enough time to do true Test Driven Development (coding an entire one-page app by yourself), keep testing all features at every stage of the process, to see how what you just built affected any of the previous features

Make sure to allot enough time to troubleshoot and debug at the end of the project before it needs to go live/be bug free.

Friendex - W9D3

Finished Likes

Can like & unlike a post from the Newsfeed

Can like & unlike a post from the Timeline

Can like & unlike a new friendship from the Newsfeed

All posts display how many people have liked the post

The Like icon is highlighted in blue when the current user likes a post

Search Bar - Can search for other users by username (first & last name)

When the current user clicks on a name/profile pic, they are redirected that that user's profile page, where they can "Add Friend"

Friendex - W8D2

Can comment on Posts

Style comments on posts

Can comment on Posts in PostIndex and have new comment immediately appear

Can comment on Posts in NewsfeedIndex and have new comment immediately appear

Notes

Be careful what you have listening to what, and what actions a component performs when it's about to receive props

Had a SessionStore listener for NewsfeedIndex

componentWillReceiveProps() would pull ProfileActions.fetchCurrentUserPRofile()

This in turn would update the Newsfeed store, which would pass more props, and which call the action again, and etc.

Modular code is much easier to work with

W9D1

Can upload photos to your Photo album and see uploaded photos in Photos tab.

Can visit other friends' photo albums, but cannot add images directly to their albums.

When there are no photos to display, displays "No photos to display" message.

Can click on "Photo" button to add a Photo Post - added to PostIndex immediately

Same post is added to NewsfeedIndex immediately when posting from the Newsfeed page

Cleaned up back-end to determine how to render IndexItems based on type (post, image, friendship)

Friendex

Tested and fixed Friendship Buttons

Dynamically display relevant "Add Friend", "Confirm"/"Delete Request", "Friends" button in Profile Header depending on current friendship between currentUser and currentProfile

Confirm / Delete Request - pass in "page" param to make sure the correct friend info is pulled & returned once friendship is updated (whether confirming from requestor's profile page or receiver's friends page)

Display Friend Requests only when a user is visiting their own page

Display "Remove Friend" button in FriendsIndex only when visiting own Friends page

Notes

You cannot make an :index route on a singular resource. Only the following come by default:

new

create

edit

update

show

destroy

Realized this when trying to write a route for Newsfeed - must use :show rather than :index

Make sure to specify your file types!!

Forgetting the .json.jbuilder file ending on view partials will not return anything when those views are rendered

Add Friendship Button - dynamically changes depending on current friendship status.

Friends page shows pending Friend Requests as well as current Friends with the option of removing Friends when a user visits their own page.