Instashow: A Python repository from MDasch22

Developer: Michael Dasch

Project Advisor: Vlad Radovanovic

Explore the docs to see how to get started --->

Screenshots from live site

Overview

Instashow, is an Instagram clone that was designed for the sole function to replicate the well known site today, Instagram.

What Instashow Offers

Instashow offers user interaction via Instashow posts, comments, follows, and likes
Users will have acces to an evergrowing library of pictures that users across the nation post!
Users will have the ability to post new pictues to the site as well as post new comments to a particular picture.
Users will have the ability to follow other users allowing the current user to see all of the their followed post's.

Technologies Used

With the given task, here are a list of technologies that were used in order to complete this projects.

Hosting

Heroku

Front End

Backend

Features

Here are some of the features Instashow has to offer...

Posts

With the posting system, users that are registered and logged in will be have access to creating a new post. When clicking on tht create post button the user will be prompted to a new screen with there they will be able to create they new post. AWS has been implemented in order to give the user more acces when selecting an image (valid images include, "jpg", "jpeg", and "png"). The user will also have the ability to view all post by all users on the explore page for more user interaction. The users home feed will be filter post strictly based on the current users following. With posts that were created by the current user, will have the ability to be edited if there was a slight error in the inital posting. Lastly, users will have the ability to delete a post from the database if they so please. There is no limit to the amount of post a user can create so I encourage you to post to your hearts desire!

Comments

If users are registered and logged into the site, they will have the ability to leave their comments onto a particular post. Comments are a way to interact with the users post as well as other users on the site. When clicking on a particualr post, you will be brought to that singular post's page where you will see all the comments related to that particular post. If a user does decide to leave a comment, they will also have the ability to edit and delete that comment if they so please.

Followers

Users that register will be prompted to a home page displayed the "Demo/Instashow" users post information. Only until the user actually followers a user, will the users feed change based on who they follow. Following a user gives the current user the ability to interact with other users that they so please. Once following a user, your user feed will only display post's from only users you follow. This gives the current user a litle sense of customization in what they do and dont get displayed. Users will also have the ability to remove a follower if they so please, removing all post on their feed pertaining to that specific user.

Likes

Likes are a feature only accesible to users that are logged in. With each post that is created, a liking system will also be created with that post. Likes are a way for the user to interact with that particular post. Liking a picture is as simple as it sounds. A counter keeps track of all likes on a particular post and can be displayed by either going to that single post or by hovering over them in the explore page.

Challenges Faced

With this being the Capstone of the App Academy curriculum, I felt a sense of pressure that I had not felt in any of the previous projects. This was a big project to me in many ways. Only learning python for about 4 weeks we were tasked with building an entire database with information that we had only just learned. Stress was a big challenge that was faced during this project time. Adding to that, having two weeks to complete this project was also an awesome expierence because I really felt that I could explore new things that I had maybe been to scared to try my first couple projects. With that being said here are two challenges that I faced along the way and how I was able to overcome them.

Understanding SQLAlchemy was a big challenge for me personally. The main problem was learing the overall syntax and how to properly interact with my database when building it from the group up. There were many database drops/ resets but with alittle time, youtube videos, and reading the documentation I was able to get a grasp on what exactly I was doing and how I was doing it. I think the biggest challenge was just learning the overall workflow and syntax. With anything, it just takes alittle time.
Code Block - I really felt a sense of code block and just burnt out of code at times during this project. We had just got done with a group project and as soon as we were finished presenting, it was right back to the drawing board... only this time solo. As excited as I was personally to get going, there was with out a doubt a feeling of being burnt out. It took a day or two to really shake off that feeling and put my head down to get to work but as the workflow started to pick up so did my mental. The more the project came to live, the more excited I was to keep coding.

Code Snippets

Follow/Unfollow Button

const follow = async(e) => {
  e.preventDefault()
  setUserFollowing(true)
  const newFollow = await dispatch(thunkFollow(userId))
  if(newFollow){
    if(newFollow.username === username) {
      dispatch(thunkGetUser(username))
    }
    if(sessionUser.username === username){
      dispatch(thunkGetUser(username))
    }
  }
}

const unfollow = async(e) => {
  e.preventDefault()
  setUserFollowing(false)
  const removeFollow = await dispatch(thunkUnfollow(userId))
  if(removeFollow){
    if(removeFollow.username === username){
      dispatch(thunkGetUser(username))
    }
    if(sessionUser.username === username) {
      dispatch(thunkGetUser(username))
    }
  }
}

Updating Profile Picture

 const onSubmit = async(e) => {
  e.preventDefault()
  setSubmitted(true)
  const formErrors = []

  const formData = new FormData();

  formData.append('image', image)

  const response = await fetch(`/api/users/profile/${id}/profileImg/edit`, {
    method: 'POST',
    body: formData,
  });

  const new_image = await response.json();

  if(new_image && new_image.errors === undefined) {
    dispatch(setUser(new_image))
  }
  else if (new_image.errors) {
    formErrors.push(new_image.errors)
  }
  else {
    formErrors.push('Something went wrong, please try again! ')
  }
  if(formErrors.length) {
    setErrors(formErrors)
  }
}

MDasch22/Instashow