A full-stack clone of Instagram, allowing the user to interact with posts and other users.

Finstagram

A portfolio clone of Instagram.com
Explore the website »

About The Project

clicking the feature images below redirects you to that feature's location in the site

Back to top

Instagram is a well known website with a lot of interesting social media aspects, which presented challenges with redux state and database relationships. It was a good opportunity to show our ability to create a full stack website built after one of the most popular websites in the world.

Built With

Back to top

• AWS - Amazon Web Services
• PostgreSQL
• SQLAlchemy
• Flask
• React
• Redux

Usage

Back to top

Users can signup and login to use Finstagram, and can login as a demo user to experience the website quickly.

Once logged in, the user is directed to the Feed page, where logged-in users can view a feed of posts from users they follow, as well as their own posts.

Logged in users can add a new post, which appears at the top of the screen. Users can post images, gifs, or videos, as accepted file types. For posts a user owns, they can edit and delete the post. Users can also like and unlike a post.

Adding a post:

Editing a post:

Deleting a post:

Liking and unliking a post:

Users can add, edit, and delete a comment.

Adding a comment:

Editing a comment:

Deleting a comment:

Users can hover over the username or user image of a post's author to view that user's information. It also shows the following status of the logged in user in relation to the post author user.

View user hover card:

Users can also click on the likes count on any post to view which users liked that post. From here, users can see whether they're following anyone in this list, and follow/unfollow as they wish.

View post's liked users:

View posts from unfollowed users:

Once you follow a user, their posts will appear on the feed page

Newly followed users posts:

From any page where there are user posts or comments, you can click on a user's username to go to their profile page, which displays that user's number of posts, followers, and users followed.

User profile pages:

(add profile navigation gif)

Interesting Issues:

Redux Interactions With Follow State

Back to top

Issue: The explore page was based on a slice of state that held all of the user's posts of users that the current session user did not follow, while the feed page was based on a separate slice that held all of the user's posts of users that the session user does follow. This created an issue when following a user on the explore page, as the website would crash because it would be looking for a user in the non-followed user's posts slice after that user had been moved out of that redux slice of state. A similar issue would happen on the feed page when unfollowing a user.

Solution: A new slice of state had to be made that held all users that both the explore and feed pages depended their views on. That way, whether a user was being followed or not, their movement between the followed users slice of state and the non-followed users slice of state did not affect the rendering of each page. This taught us the importance of not only thinking of ways to organize redux state, but how information would be moved between slices of state based on user interaction. In the future, it is important to think of how state is malleable, and how to defensively code against changes in state.

Coordinating Feature Implementation With Multiple Collaborators

Back to top

Issue: Though it may seem simple, having multiple people work on a project in tandem created some interesting challenges when it came to maximizing the efficiency of our coding, while preventing each of us from stepping on the others toes when it comes to editing the same files.

Solution: Constant communication and planning helped us stay efficient so that we could each work on a separate feature of the website, and when we had to work on the same files/features, talking out how to organize merge conflicts helped enormously so that we could keep the ball rolling on coding out the project.

Features to Implement Next

Loading Time Efficiency

Back to top

Issue: As more posts, comments, likes, and users get added to the database, the amount of time it takes for the website to store new likes and comments and render that change on the frontend increases.

How I would do it: Currently, the redux thunk that adds these entities wait for the database to be updated before updating the redux store. The best solution would be to key into the specific post that is being liked/commented on, and change the redux store in parallel to the fetch to the database. That way, a user can see the result of their action immediately, instead of waiting for the database update to complete.

Contact

Back to top

Jason Cahela - LinkedIn

Alejandro C. Grant - LinkedIn

Josue E.J. Lugaro - LinkedIn

Original Project Repo: https://github.com/jcahela/Finstagram

Current Project Repo: https://github.com/MasterGrant137/Finstagram

Site: https://finstagram-1.herokuapp.com/