React Photo Gallery App Tutorial from Scratch | Use React, Node to upload, view and search images

In this react photo gallery app tutorial, we will build a photo gallery from scratch, using React, Node, and the Cloudinary service

🚨 LINKS:

🚨 Chapters:

0:00 What we'll build
0:36 Cloudinary account setup
5:57 React project setup
8:52 Setting up mock images response
11:02 Displaying image with CSS Grid and image upload
21:38 Create Node API & Get photos endpoint
31:38 Connect React frontend to Node API
37:23 Load more images
49:03 Search for images
1:11:31 Reset image search
1:13:26 Outtro

🚨 Come say Hello!

[nischaymehta]

One more exciting tutorial 😍. Can’t wait to check this out.

[DigitalSoap]

Was really waiting for your next vidoe...!

[lizzyblue]

This code doesn't run. Downloaded from your repo and did an npm install and included my own dot env values but I keep getting a 'unexpected token in json at position 0

[vidnchi]

Pls i am getting uncaught in promise unexpected token doctype is not valid json

[abbegherab]

Hi Chris,
I keep getting this error and i cant seem to solve it. Even looked at your source code. "Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0"

It all started when you added the new api.js and removed the import from api-mock i think.

[tunahantatli]

ERROR:unexpected token doctype is not valid json
THOSE STILL GETTING THIS PROBLEM!
After creating the .env file on the client side, click npm start and restart the react application. If .env is created while the react application is already running, it gives this error. When you close the application from the terminal and run it again, you will see that the problem is solved.

[Albatsuki]

How to make the images full size when you click them???

[carlosernestofz]

hi, thanks for this video. I am stock on minute 37 when you go to your localhost:3000 and make everything works . Did you run your npm start in client for it to work? i did that nad What i get is a white screen with failed to Fetch error. I have been looking at it for a while. I wonder if you have an idea what could it be ?

[jordanfoote]

I keep getting a 400 error when trying to use the GET method from postman. it says "illegal id"

[highplay]

at 37:00 do "export {getImages}" at last i api.js file in advance

[yogeshwaranp]

super helpful video, got to know more about the cluodinay APIs

[obi.]

how can i display 8 images on web page instead of all images