MasterGrant137 / Finstagram

This project is a full-stack clone of Instagram, allowing the user to interact with posts and other users. Read the README for more information!

Home Page:

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool



A portfolio clone of
Explore the website »

Table of Contents
  1. About The Project
  2. Usage
  3. Interesting Issues
  4. Features to Implement Next
  5. Contact

About The Project

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

Back to top Product Name Screen Shot

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


Back to top

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

Product Name Screen Shot Product Name Screen Shot

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.

Product Name Screen Shot

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:

Product Name Screen Shot

Editing a post:

Product Name Screen Shot

Deleting a post:

Product Name Screen Shot

Liking and unliking a post:

Product Name Screen Shot

Users can add, edit, and delete a comment.

Adding a comment:

Product Name Screen Shot

Editing a comment:

Product Name Screen Shot

Deleting a comment:

Product Name Screen Shot

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:

Product Name Screen Shot

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:

Product Name Screen Shot

Over on the Explore page, users can view posts from users they don't follow, and interact with these posts like on the Feed page.

View posts from unfollowed users:

Product Name Screen Shot

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

Newly followed users posts:

Product Name Screen Shot

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.


Back to top

Jason Cahela - LinkedIn

Alejandro C. Grant - LinkedIn

Josue E.J. Lugaro - LinkedIn

Original Project Repo:

Current Project Repo:



This project is a full-stack clone of Instagram, allowing the user to interact with posts and other users. Read the README for more information!


Language:Python 60.4%Language:CSS 36.9%Language:HTML 1.4%Language:Dockerfile 0.7%Language:Mako 0.6%Language:Shell 0.1%