[#2PlaysAMonth]: Image Gallery - Create a responsive image gallery by using the free Unsplash API #974

siddhantsiddh15 · 2023-02-16T13:40:19Z

First thing, PLEASE READ THIS: ReactPlay Code Review Checklist

Description

The project contains use of Unsplash API, which is fetched using axios and then populated in the Photo Component.

Following things have been used in this project:

useState
useEffect
React Form
Component Refactoring
Material UI icon
Axios npm module
CSS Grid
Infinite scroll functionality(This feature is still not showing the react play app but is working on local file system. I am working on it)

The app is responsive and redirects to the individual images and profiles when clicked on it.

Fixes #910

Type of change

New feature (non-breaking change which adds functionality)

How Has This Been Tested?

To see working of the app repeat the following

Go to the app. Some images are loaded on the screen by default
Search for any keyword. The screen will update with new images.
Hover over any image, the cursor will turn to pointer.
On clicking any image, the page will re direct to that image.
On hovering, the profile name, likes will come in front of the image. On clicking the profile photo, the profile of the image contributor will open
The page on scrolling down should show more images.

Checklist:

I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
I have made corresponding changes to the documentation
My changes generate no new warnings
Any dependent changes have been merged and published in downstream modules

Screenshots or example output

… infinite scrolling functionality

This project contains the following principles of React 1. useState 2. useEffect 3. promise handling using async await 4. react form Following things have been used while making this project 1. API handling from unsplash 2. Grid 3. Individual components (SearchBar can be reused separately) 4. Have implemented the infinite scrolling where the images array are populated once we scroll to the bottom of the page 5. Have used the Material UI icon for search bar The project is responsive as well. Following things are pending and trying to figure out the reason for the same 1. Infinite scrolling is working on local system but when same code is being used in React play it is not working 2. Will try to add React-Router and Redux functionaly for state management.

vercel · 2023-02-16T13:40:23Z

@siddhantsiddh15 is attempting to deploy a commit to a Personal Account owned by @reactplay on Vercel.

@reactplay first needs to authorize it.

github-actions

Hello! Thank you for your contribution 😊.
Please reference the issue number in the description if you are fixing a bug.
If you are implementing a feature request, please check with the maintainers that the feature will be accepted first.
Stale Marking : After 30 days of inactivity this PR will be marked as stale PR and it will be closed and locked in 7 days if no further activity occurs.

Sachin-chaurasiya · 2023-02-16T14:48:39Z

@siddhantsiddh15 , Thanks for the PR.

I would request you change the PR title to "[#2PlaysAMonth]: Image Gallery - Create a responsive image gallery by using the free Unsplash API"

and the second thing is to link your PR with the issue by adding the below line in the PR description.

Example:

Fixes #910

vercel · 2023-02-16T14:48:49Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
react-play	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 5, 2023 at 7:28PM (UTC)

siddhantsiddh15 · 2023-02-16T15:04:45Z

Greetings,

I have updated the pull request name and linked the issue with the issue number

Thanks

Sachin-chaurasiya · 2023-02-16T15:22:28Z

@siddhantsiddh15 , Please format and lint the code by following this guide.
https://github.com/reactplay/react-play#format-the-code

siddhantsiddh15 · 2023-02-16T18:34:11Z

Greetings

Have formatted the code as per the guidelines as mentioned here https://github.com/reactplay/react-play#format-the-code and then pushed the code in the branch.

Thanks

atapas

@siddhantsiddh15 Review comments

also please record your demo on stackstream and add the link by editing your play. Thanks

atapas · 2023-02-17T06:02:51Z

src/plays/image-gallery-using-unsplash-api/styles.css

@@ -0,0 +1,113 @@
+/* enter stlyes here */
+* {


Please do not override the styles this way. Add a unqie class name in front of all the styles in all the CSS files so that the override changes are less.

You can add an additional style name here and use that to prefix all styles in all CSS files.

// src/plays/image-gallery-using-unsplash-api/ImageGalleryUsingUnsplashApi.js

<div className="play-details-body">

siddhantsiddh15 · 2023-02-18T05:49:22Z

src/plays/image-gallery-using-unsplash-api/styles.css

@@ -0,0 +1,112 @@
+/* enter stlyes here */
+.body {


Have made changes here. Earlier it was *{ padding: 0;
margin: 0;
font-family: 'IBM Plex Sans', sans-serif;
background-color: whitesmoke;
} .

Now it is under a className body.

The class name should prefix all the styles in the CSS file.

atapas · 2023-02-18T15:37:41Z

@siddhantsiddh15 Kindly resolve the merge conflict

atapas · 2023-02-18T15:40:19Z

src/plays/image-gallery-using-unsplash-api/ImageGalleryUsingUnsplashApi.js

+        <PlayHeader play={props} />
+        <div className="play-details-body">
+          {/* Your Code Starts Here */}
+          <div className="body">


I would certainly change the class name from body to something more unique :) How about unsplash-ig?

atapas · 2023-02-18T15:40:49Z

src/plays/image-gallery-using-unsplash-api/styles.css

@@ -0,0 +1,112 @@
+/* enter stlyes here */
+.body {


The class name should prefix all the styles in the CSS file.

…dhantsiddh15/react-play into unsplash-api-siddhantsiddh15 Changed the className from .body to .unsplash-image-gallery-body

siddhantsiddh15 · 2023-02-18T18:43:09Z

These errors are not in my edited files, what can I do to run the react play?

atapas · 2023-02-20T02:15:54Z

@siddhantsiddh15 Catch me up on Discord today to close it.

siddhantsiddh15 · 2023-02-24T10:40:23Z

Hello Tapas,
I have screen recorded and uploaded the video here for https://react-play-git-fork-siddhantsiddh15-unsplash-8f3010-reactplayio.vercel.app/ . The website is responsive and is working correctly, I don't know what more to change now.

Thankyou

atapas · 2023-02-26T07:33:28Z

@siddhantsiddh15 almost there..

please add a cover image

Also edit your play from localhost and add the stream recording.

Ping where when you done, will merge it.

atapas · 2023-02-28T05:17:32Z

@siddhantsiddh15 let us know when done

…dhantsiddh15/react-play into unsplash-api-siddhantsiddh15 Added the cover image

siddhantsiddh15 · 2023-02-28T06:39:28Z

Have added the cover image.

atapas · 2023-02-28T06:54:06Z

Have added the cover image.

Thanks!

The cover image should be in KBs, please reduce the size.
Also confirm that your demo recording has been added to the play by editing it.

siddhantsiddh15 · 2023-02-28T07:39:44Z

Greetings,

I have not added the demo recording in the Play. I have updated the size of the cover.png to 135 kb.

Regards

atapas · 2023-02-28T08:04:27Z

Greetings,

I have not added the demo recording in the Play. I have updated the size of the cover.png to 135 kb.

Regards

Can you please add the demo recording too.. then its al done.

siddhantsiddh15 · 2023-02-28T10:16:34Z

Cannot do it. Having difficulty. Can we skip the recording portion?

atapas · 2023-02-28T10:25:27Z

Cannot do it. Having difficulty. Can we skip the recording portion?

Ok, no worries, no pressure. It's still valuable to get your work in.

I am just curious about what kind of issues you are facing. If you can post about it in our Discord, I may try the resolution.. In fact, you can add the recording after merge too...(before 5th March)

siddhantsiddh15 · 2023-03-01T09:36:02Z

I am having slow internet connection due to the place I have travelled to, recording is a big file to upload.
I will try to upload the video if I get any broadband connection.

koustov · 2023-03-03T05:54:47Z

Hey @siddhantsiddh15 , this play looks cool. I will be waiting for the video link to updated before merging it to production branch

siddhantsiddh15 · 2023-03-03T09:05:10Z

Okay, will update it by tonight.

siddhantsiddh15 · 2023-03-03T18:07:39Z

Hey @siddhantsiddh15 , this play looks cool. I will be waiting for the video link to updated before merging it to production branch

I have uploaded here the updated video of the play. I have checked the responsiveness and working of my play. The delay from my side was unwanted, I have uploaded the video as soon as I got good internet connection.

koustov · 2023-03-05T07:41:38Z

Hey @siddhantsiddh15 , this play looks cool. I will be waiting for the video link to updated before merging it to production branch

I have uploaded here the updated video of the play. I have checked the responsiveness and working of my play. The delay from my side was unwanted, I have uploaded the video as soon as I got good internet connection.

Well the video should be on https://stack-stream.com/

I can get this play merged if everything is ok however please record a stackstream video before EOD

koustov · 2023-03-06T07:05:34Z

@atapas you need to unblock in order to merge this PR
@siddhantsiddh15 please record demo on stackstream

siddhantsiddh15 added 4 commits February 16, 2023 13:48

Successfully created an image gallery which uses unsplash API and has…

591be31

… infinite scrolling functionality

Some files were being asked to be stashed

f3a9a9e

Installed material-ui/icons and changed styles.css a little

a38ad8b

siddhantsiddh15 requested review from atapas and koustov as code owners February 16, 2023 13:40

github-actions bot reviewed Feb 16, 2023

View reviewed changes

Sachin-chaurasiya assigned siddhantsiddh15 Feb 16, 2023

Sachin-chaurasiya added #2PlaysAMonth #2PlaysAMonth Event waiting for reviewers labels Feb 16, 2023

vercel bot deployed to Preview February 16, 2023 14:54 View deployment

siddhantsiddh15 changed the title ~~Unsplash api siddhantsiddh15~~ [#2PlaysAMonth]: Image Gallery - Create a responsive image gallery by using the free Unsplash API Feb 16, 2023

Ran npm lint and npm format command

e2f8ad1

atapas requested changes Feb 17, 2023

View reviewed changes

vercel bot deployed to Preview February 17, 2023 06:05 View deployment

formatted the styles.css

7bac98a

siddhantsiddh15 commented Feb 18, 2023

View reviewed changes

atapas requested changes Feb 18, 2023

View reviewed changes

siddhantsiddh15 and others added 3 commits February 18, 2023 22:29

Merge branch 'main' into unsplash-api-siddhantsiddh15

174a96a

changed the className from .body to .unsplash-image-gallery-body

b13a13e

Merge branch 'unsplash-api-siddhantsiddh15' of https://github.com/sid…

15315a1

…dhantsiddh15/react-play into unsplash-api-siddhantsiddh15 Changed the className from .body to .unsplash-image-gallery-body

Merge branch 'main' into unsplash-api-siddhantsiddh15

79e9d4b

siddhantsiddh15 added 2 commits February 28, 2023 11:59

added the cover image

70ed2f6

Merge branch 'unsplash-api-siddhantsiddh15' of https://github.com/sid…

aced7cf

…dhantsiddh15/react-play into unsplash-api-siddhantsiddh15 Added the cover image

added cover.png of size 135 kb

484c6a0

Merge branch 'main' into unsplash-api-siddhantsiddh15

c96f345

vercel bot deployed to Preview February 28, 2023 14:41 View deployment

Merge branch 'main' into unsplash-api-siddhantsiddh15

d7b1bb5

vercel bot deployed to Preview March 3, 2023 04:21 View deployment

siddhantsiddh15 and others added 2 commits March 4, 2023 18:48

Merge branch 'main' into unsplash-api-siddhantsiddh15

441d535

Merge branch 'main' into unsplash-api-siddhantsiddh15

9f4a2ba

vercel bot had a problem deploying to Preview March 5, 2023 07:40 Failure

Merge branch 'main' into unsplash-api-siddhantsiddh15

441229e

vercel bot deployed to Preview March 5, 2023 19:28 View deployment

atapas approved these changes Mar 8, 2023

View reviewed changes

atapas merged commit 4cdcf31 into reactplay:main Mar 8, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[#2PlaysAMonth]: Image Gallery - Create a responsive image gallery by using the free Unsplash API #974

[#2PlaysAMonth]: Image Gallery - Create a responsive image gallery by using the free Unsplash API #974

siddhantsiddh15 commented Feb 16, 2023 •

edited

Loading

vercel bot commented Feb 16, 2023

github-actions bot left a comment

Sachin-chaurasiya commented Feb 16, 2023

vercel bot commented Feb 16, 2023 •

edited

Loading

siddhantsiddh15 commented Feb 16, 2023

Sachin-chaurasiya commented Feb 16, 2023

siddhantsiddh15 commented Feb 16, 2023

atapas left a comment

atapas Feb 17, 2023

siddhantsiddh15 Feb 18, 2023

atapas Feb 18, 2023

atapas commented Feb 18, 2023

atapas Feb 18, 2023

atapas Feb 18, 2023

siddhantsiddh15 commented Feb 18, 2023

atapas commented Feb 20, 2023

siddhantsiddh15 commented Feb 24, 2023 •

edited

Loading

atapas commented Feb 26, 2023

atapas commented Feb 28, 2023

siddhantsiddh15 commented Feb 28, 2023

atapas commented Feb 28, 2023

siddhantsiddh15 commented Feb 28, 2023 •

edited

Loading

atapas commented Feb 28, 2023

siddhantsiddh15 commented Feb 28, 2023

atapas commented Feb 28, 2023

siddhantsiddh15 commented Mar 1, 2023 •

edited

Loading

koustov commented Mar 3, 2023

siddhantsiddh15 commented Mar 3, 2023

siddhantsiddh15 commented Mar 3, 2023 •

edited

Loading

koustov commented Mar 5, 2023

koustov commented Mar 6, 2023

[#2PlaysAMonth]: Image Gallery - Create a responsive image gallery by using the free Unsplash API #974

[#2PlaysAMonth]: Image Gallery - Create a responsive image gallery by using the free Unsplash API #974

Conversation

siddhantsiddh15 commented Feb 16, 2023 • edited Loading

Description

Type of change

How Has This Been Tested?

Checklist:

Screenshots or example output

vercel bot commented Feb 16, 2023

github-actions bot left a comment

Choose a reason for hiding this comment

Sachin-chaurasiya commented Feb 16, 2023

vercel bot commented Feb 16, 2023 • edited Loading

siddhantsiddh15 commented Feb 16, 2023

Sachin-chaurasiya commented Feb 16, 2023

siddhantsiddh15 commented Feb 16, 2023

atapas left a comment

Choose a reason for hiding this comment

atapas Feb 17, 2023

Choose a reason for hiding this comment

siddhantsiddh15 Feb 18, 2023

Choose a reason for hiding this comment

atapas Feb 18, 2023

Choose a reason for hiding this comment

atapas commented Feb 18, 2023

atapas Feb 18, 2023

Choose a reason for hiding this comment

atapas Feb 18, 2023

Choose a reason for hiding this comment

siddhantsiddh15 commented Feb 18, 2023

atapas commented Feb 20, 2023

siddhantsiddh15 commented Feb 24, 2023 • edited Loading

atapas commented Feb 26, 2023

atapas commented Feb 28, 2023

siddhantsiddh15 commented Feb 28, 2023

atapas commented Feb 28, 2023

siddhantsiddh15 commented Feb 28, 2023 • edited Loading

atapas commented Feb 28, 2023

siddhantsiddh15 commented Feb 28, 2023

atapas commented Feb 28, 2023

siddhantsiddh15 commented Mar 1, 2023 • edited Loading

koustov commented Mar 3, 2023

siddhantsiddh15 commented Mar 3, 2023

siddhantsiddh15 commented Mar 3, 2023 • edited Loading

koustov commented Mar 5, 2023

koustov commented Mar 6, 2023

siddhantsiddh15 commented Feb 16, 2023 •

edited

Loading

vercel bot commented Feb 16, 2023 •

edited

Loading

siddhantsiddh15 commented Feb 24, 2023 •

edited

Loading

siddhantsiddh15 commented Feb 28, 2023 •

edited

Loading

siddhantsiddh15 commented Mar 1, 2023 •

edited

Loading

siddhantsiddh15 commented Mar 3, 2023 •

edited

Loading