Skip to content

Latest commit

 

History

History
90 lines (77 loc) · 5.79 KB

README.md

File metadata and controls

90 lines (77 loc) · 5.79 KB

Instagram Clone

preview picture instagram clone

Video overview: https://youtu.be/ir6Q6OM3SX4

Live demonstration: https://instopound.herokuapp.com

backend repo can be found here: https://github.com/welschmoor/instaclone-nc

(German) Ich habe viel Code nicht gelöscht, weil das ein Lernprojekt ist.

Functionality

You can:

  • register/login (authentication using JWT tokens)
  • upload images, edit image description
  • add/remove comments on videos
  • edit profile avatar
  • follow/unfollow users
  • create your personalized feed with pictures from people (or dogs) you follow. On instapound you follow dogs, in real life dogs follow YOU!
  • dark mode - choice remembered by the browser.

Fail

  • I have failed to implement optimistic response, because I that requires me to redo all backend and have the resolvers return the Comment, Photo, User instead of a simple Boolean. (I fixed it, see my blog post: https://dev.to/welschmoor/optimistic-ui-with-graphql-in-apollo-e87)
  • I failed to implement real-time UI updates for certain components which require loops. I will try it again later. Woo hoo I managed to implement real-time UI updates after 3 days of struggle https://dev.to/welschmoor/optimistic-ui-with-graphql-in-apollo-e87
  • Need help here! I failed to implement react router scroll restoration. When I go back from a single picture view, the scroll position I had previously is not remembered and window.scrollTo was of no help, because it scrolls before data loads. Solution would be to implement single view ABOVE the picture feed, like a modal.
ToDo

  • (done with fetch queries policy, thanks Kalle) in Login handler change the page refresh. Maybe run useUserHook in App.js to solve old cache not updating?

  • (done) fix background color not reaching all the way down (min height: 100vh would be the fix)

  • (done) empty feed message

  • (done with cache-and-network policy)after unsubbing from person, we still see his pics in our feed, so fe need to either evict cache or modify it. I could refetchQueries the seeProfile. I ended up clearing cache with useEffect each time I am when visiting feed. I am not sure what's the best way.

  • I was not able to implement input.focus() by using ref={inputRef}, the focus taking works, but the form submit function does not run. NO IDEA WHY. It may be because I use react-hook-form.

  • (not necessary)!!! change the height of grid pictures in profile view!

  • Redo: Continues loading. Implement remembering the page after we leave the page. Ok I've implemented it with: cache-and-network policty of the FEED query. Now Maybe remember the scroll position and scroll the page to that point?

  • (done) FIX Profile page not rerendering after deleting picture through Modal

  • if user goes to pic which does not exist, display a message that the pic does not exist (if for example data is empty)

  • add some hover effect (like show icons or something) for grid pics

  • styled the modal form better!

  • (done) change the default avatar pic (make it grey BG or something)

  • picModal is not scrollable when the pic is too tall in narrow mobile view

  • (done) use the efficient hook instead for scrolling

  • (done) add comment added message when adding from feed view.

  • implement favorites list

  • (done) implement change avatar

  • (done) implement change picture description

  • fix "load more" button, but the scroll and the % operator

  • (done) fix dark mode change not working when logged out

  • (done) fix comment added message being in the wrong spot. (add relative somewhere)

  • (done) Add back-arrows for closing the picModal!

  • (edit description done, bio not yet) tomorrow add edit description and edit bio (maybe even through modal.)

  • Maybe remove modal wrapper and give its properties to Grid?

  • (done) Dark Mode for login and signup! And for Upload modal duh

  • (done) Deploy app

  • Scroll is not remembered after visiting SinglePic

  • (done) add cleanup to all useEffect

  • (done) remove upload modal functionality when logged out!

  • (done) make home component refetch (cache-network) users!!! otherwise they don't appear after sign up

  • (done) add helmet title everywhere

  • implement messaging

  • create skeleton

  • (done) add default description for photo caption

  • (done, thanks @angelxv01) fix heroku not showing a user directly (direct url to profile)

  • (done) create delete account functionality

  • Would it be better to split toggleLike in two different resolvers? (no)

  • (done) fix vertical line through avatar pic

  • ask someone about the real-time updates (cache and whatnot).

  • (done my own way) implement optimistic mutations

  • (done) fix edit caption icon (position absolute!)

  • hide Load more pictures button when there are only 4 pictures! (but I would need to .count() pictures for that because we don't know how many more are available)

  • (done) fix login/signup screen showing uneven change in color when changing theme (only Firefox)

  • (done) does not work well on mobile, everything is wider than it should be. (probably min-width settings)

  • /hashtag and /search dont have any like handlers implemented!

  • icons are crooked after navbar thins

  • create a mirror-link on heroku just in case

  • (done) fix avatar pics that are not square appearing stretched

  • fix pic comments line height. Other than that, I tested everything, works great!

  • (done) make it impossible to submit commment when logged out!

  • (done) same for likes!!!

  • (done bug number 100) redo pagination! It sucks! Liking a post in a feed removes fetchMore results

  • adding comment also breaks fetchMore position (back to 4)

  • try modifying fetchMore with this: apollographql/apollo-client#7490

MISC

I left a lot of commented code, I did not want to remove it (it's a learning project). Also many unused vars (they will be removed when it goes to "production")