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

Related tags

CMSFinstagram
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/

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
Django CMS Project for quicksetup with minimal installation process.

Django CMS Project for quicksetup with minimal installation process.

Dipankar Chowdhury 3 Mar 24, 2022
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

295 Oct 16, 2022
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

28 Dec 21, 2022
Random tarot card generator + rudimentary Django CMS

TAROT JUICER This is a rudimentary Django-based CMS which dynamically presents tarot-related content placed onto unconventional but familiar contexts

Kyle Rafa Lazaro 7 Apr 26, 2022
CSM: Construction Safety Management system

CSM: Construction Safety Management system 1. 서비스 소개 개요: 공사현장에서의 최적의 안전진단기술을 통한 고도화된 시스템으로 개선하고자 함 목표: 안전 관련 주요 시각데이터를 Cross-Domain으로 활용하여 통합 안전 관리기술의

5 Jul 29, 2022
A python open source CMS scanner that automates the process of detecting security flaws of the most popular CMSs

CMSmap CMSmap is a python open source CMS scanner that automates the process of detecting security flaws of the most popular CMSs. The main purpose of

RazzorBack 1 Oct 31, 2021
E-Commerce Platform

Shuup Shuup is an Open Source E-Commerce Platform based on Django and Python. https://shuup.com/ Copyright Copyright (c) 2012-2021 by Shoop Commerce L

Shuup 2k Jan 07, 2023
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

Mirumee Labs 17.8k Jan 07, 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 02, 2023
Ticket shop application for conferences, festivals, concerts, tech events, shows, exhibitions, workshops, barcamps, etc.

pretix Reinventing ticket presales, one ticket at a time. Project status & release cycle While there is always a lot to do and improve on, pretix by n

pretix 1.3k Jan 01, 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 07, 2023
A course management web application

umber a course management web app built with python Flask, sqlite3, and git. installation Tested on Ubuntu 18 with python 3.5. # -- Install the system

Jim Mahoney 6 Jun 03, 2022
A full stack e-learning application, this is the backend using django restframework and docker.

DevsPrime API API Service backing client interfaces Technologies Python 3.9 : Base programming language for development Bash Scripting : Create conven

Nnabue Favour Chukwuemeka 1 Oct 21, 2021
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
Link aggregator community organised by tags in python3/django3 + sqlite3.

sic Link aggregator community organised by tags in python3/django3 + sqlite3. Public instance at https://sic.pm and Tor hidden service.

Manos Pitsidianakis 97 Dec 30, 2022
CMS for everyone, easy to deploy and scale, robust modular system with many packages.

Django-Leonardo Full featured platform for fast and easy building extensible web applications. Don't waste your time searching stable solution for dai

97 Nov 17, 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
The lektor static file content management system

Lektor Lektor is a static website generator. It builds out an entire project from static files into many individual HTML pages and has a built-in admi

Lektor CMS 3.6k Dec 29, 2022
VaporCMS - The greatest content management system that will never exist

The greatest content management system that will never exist Overview WordPress is a huge success but could it be done better? Maybe being mo

Andrew Dailey 4 Jan 06, 2022
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 08, 2023