My Pinterest clone - Pixterest!

Ok, my Pinterest clone is called Pixterest! and is ready for testing! :star_struck:

GitHub repository

1 Like

You are missing the .me part of your link.

1 Like

Ok, so did you actually look at the site?

May I suggest the following 2-line changes to the css file.

.w3-card-4 {
   padding: 0px;
   border-radius: 16px
}

Also, reduce the box-shadow spread from 10px to 5px.

That way, you get this nice rounded corners.

1 Like
  • I think the amount of pictures on a page could be more. You could indeed append more pictures on clicking the arrow as @camperextraordinaire suggested.

  • Not sure if I should be able to like my own pictures.

  • It feels a bit weird that the page reloads when you like something.

  • On really large screens you still only have 2 or 3 pictures in a row.

  • There is no space below the icon for more results. And it is not a perfect circle…

Thanks for the review. I was not sure what to do with the “more” link. Pinterest behaves like you describe but the postback was re-drawing the whole page which looks crap.
I should put proper paging with numbers in as this is what the behaviour is.
Now on the Todo list!
The heart I could remove in the unauthorised view but yes I could have a warning to log in to “like”. The star is a category indicator. All categories have different icons. I was going for a Panini stickers style.

Thanks for the tip. W3css comes with a few card styles but your tip is a good one, thanks. :+1:
https://www.w3schools.com/w3css/w3css_cards.asp

Thanks for looking. I was having problems with Masonry so was experimenting with fewer images. I scrapped Masonry in the end so this is why the limited number.
I agree, the postback when you click an image is annoying. I will look for a better way of doing that. Any idea why there are only 3 images on big screens? I put the meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0"> for mobile friendly view.

You are using percentages for the width.

Oh yes. Probably from the Masonry issues. I had them at fixed widths before. I can fix that, thanks :wink: :+1:

I added a media query for big screens.

1 Like

I’ve added the icons in the navigation so it is a bit clearer that there is a link with the top of the card icon and the category.
I think it looks better and doesn’t take up too much room.

Thanks again for the feedback. I have added a tooltip for the like button and got rid of paging altogether.
I am trying a “lazy loading” plugin instead.
Also, when you :heart: a pic it stays at the same page location instead of refreshing & returning the page top although the image zoom-in animation will probably annoy someone. :frowning:

https://fcc-pinterest-clone.glitch.me/