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

Related tags

CMS Finstagram
Overview

Logo

Finstagram

A portfolio clone of Instagram.com
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

Usage

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.

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/

You might also like...
Ella is a CMS based on Python web framework Django with a main focus on high-traffic news websites and Internet magazines.

Ella CMS Ella is opensource CMS based on Django framework, designed for flexibility. It is composed from several modules: Ella core is the main module

A modular, high performance, headless e-commerce platform built with Python, GraphQL, Django, and ReactJS.
A modular, high performance, headless e-commerce platform built with Python, GraphQL, Django, and ReactJS.

Saleor Commerce Customer-centric e-commerce on a modern stack A headless, GraphQL-first e-commerce platform delivering ultra-fast, dynamic, personaliz

🐰 Bunnybook 🐰 A tiny social network (for bunnies), built with FastAPI and React+RxJs.
🐰 Bunnybook 🐰 A tiny social network (for bunnies), built with FastAPI and React+RxJs.

🐰 Bunnybook 🐰 A tiny social network (for bunnies), built with FastAPI and React+RxJs. Click here for live demo! Included features: 💬 chat 🔴 online

An open source CMS, in python and integrable in Django

Python CMS based on the Django Framework

Simple yet powerful and really extendable application for managing a blog within your Django Web site.

Django Blog Zinnia Simple yet powerful and really extendable application for managing a blog within your Django Web site. Zinnia has been made for pub

django blog - complete customization and ready to use with one click installer

django-blog-it Simple blog package developed with Django. Features: Dynamic blog articles Blog pages Contact us page (configurable) google analytics S

 ConnectLearn is an easy to use and deploy Open-Source Project meant to make it easier for the right students to find the right teachers online.
ConnectLearn is an easy to use and deploy Open-Source Project meant to make it easier for the right students to find the right teachers online.

ConnectLearn ConnectLearn is an easy to use and deploy Open-Source Project meant to make it easier for the right students to find the right teachers o

Django e-commerce website with Advanced Features and SEO Friendly
Django e-commerce website with Advanced Features and SEO Friendly

MyTech® - Your Technology Django e-commerce website with Advanced Features and SEO Friendly Images and Prices are only used for Demo purpose and does

Library Management system designed for managing and operating various aspects of a library
Library Management system designed for managing and operating various aspects of a library

Proposal This proposal is written to clarify the project work of Information Systems, assigned to us as an individual task in order to tackle the case

Owner
Alejandro Carrizosa Grant
I treat code like I do any of my crafts: dedication to learn, willingness to struggle, and patience in the process. See my bio or README for ways to connect!
Alejandro Carrizosa Grant
Python scripts to interact with the CakeCMS API.

Python scripts to interact with the CakeCMS API. Installation of the python module Prerequisites The cakecms module has to be installed first. Install

Fabian Thomas 3 Jan 31, 2022
Backend routes and database for an abstract theoretical app that relates a database of courses, users, and assignments.

Backend routes and database for an abstract theoretical app that relates a database of courses, users, and assignments.

Sean Wiesner 0 Dec 27, 2021
Journey is a journaling app where users can create their own journal and entries in it!

Journey is a journaling app where users can create their own journal and entries in it!

Hieu Ma 8 Dec 12, 2021
A curated list of awesome packages, articles, and other cool resources from the Wagtail community.

Awesome Wagtail A curated list of awesome packages, articles, and other cool resources from the Wagtail community. Wagtail is a Python CMS powered by

Springload 1.7k Jan 3, 2023
A Django content management system focused on flexibility and user experience

Wagtail is an open source content management system built on Django, with a strong community and commercial support. It's focused on user experience,

Wagtail 13.8k Jan 1, 2023
wger Workout Manager is a free, open source web application that helps you manage your personal workouts, weight and diet plans and can also be used as a simple gym management utility.

wger (ˈvɛɡɐ) Workout Manager is a free, open source web application that helps you manage your personal workouts, weight and diet plans and can also be used as a simple gym management utility.

wger Project 2k Dec 29, 2022
A Django-based CMS with a focus on extensibility and concise code

FeinCMS - An extensible Django-based CMS When was the last time, that a pre-built software package you wanted to use got many things right, but in the

FeinCMS 847 Jan 7, 2023
Kotti is a high-level, Pythonic web application framework based on Pyramid and SQLAlchemy. It includes an extensible Content Management System called the Kotti CMS.

Kotti Kotti is a high-level, Pythonic web application framework based on Pyramid and SQLAlchemy. It includes an extensible Content Management System c

Kotti 394 Jan 7, 2023
The easy-to-use and developer-friendly CMS

django CMS Open source enterprise content management system based on the Django framework and backed by the non-profit django CMS Association. Get inv

django CMS Association 9.1k Jan 4, 2023
The easy-to-use and developer-friendly CMS

django CMS Open source enterprise content management system based on the Django framework and backed by the non-profit django CMS Association. Get inv

django CMS Association 9.1k Jan 8, 2023