Build a Google Photos Clone with Next.js and Cloudinary

Build a Google Photos Clone with Next.js and Cloudinary - Tutorial

Рет қаралды 66,215

freeCodeCamp.org

Күн бұрын

Пікірлер: 41

@rezhabahari 7 ай бұрын

Thanks a lot, helped me with cloudinary implementation

@NurioonSoftware 6 ай бұрын

Nice video 👍

@nicholaswilliams9178 8 ай бұрын

This is gold

@vinaykumardevadiga385 5 ай бұрын

Did anyone get this error TypeError: Cannot read properties of undefined (reading 'height') at 1:10:47

@vinaykumardevadiga385 5 ай бұрын

Transformed image is not being uploaded on the main page, its visible in the cloudinary portal yet not working... can anyone help on this issue

@flamethrower883 3 ай бұрын

For some reason, when saving (overwriting original image), setting the invalidate parameter to true in the uploadOptions doesn't override the image caching mechanism of Next.js. I figured when the component unmounts and mounts again (going back to gallery after saving, and opening up the image again to view the saved changes), since we set the version's initial state to 1, it will proceed to show us the unmodified image that has since been cached (since opening that image). My solution is to make a global state for version (I used Zustand). Now, the version is saved globally and persists across multiple re-renders.

@N2NCars 6 ай бұрын

Only the search tab with filters are missing. Cool one

@mrjorgemonteiro 8 ай бұрын

Great video but i wonder why you did not include the Album, tag and the Dark option on it.

@colbyfayock 8 ай бұрын

simply just trying not to go way overboard in scope, though the way we handled tagging Creations can be easily applied to an albums mode. happy to answer any questions around that sort of thing

@marcelol2387 7 ай бұрын

A lot of Cloudinary and a little bit of Next.js

@derpythespy 8 ай бұрын

thought you could hide from us with the sneaky upload? think again! Thank you

@RideTheTeacups 8 ай бұрын

WOW!!! I was using cloudinary for my project, but clearly not anywhere near its full potential. This was fantastic; thank you. Now I feel like I need to refactor and clean up my main personal project.

@colbyfayock 8 ай бұрын

💯 tons of awesome feature. Hmu if you have any questions

@arkknight101 8 ай бұрын

Can you tell me how to install this on my pc, i am not a coder but loved this and want to use it

@colbyfayock 8 ай бұрын

@@arkknight101 hey you can find the instructions here: www.photobox.dev/getting-started however there's not really a way thats easy for a non-developer to use

@jeevangowda3309 8 ай бұрын

@@colbyfayock bro i am also doing a project on this can u help me with it if possible plz send the github link of our project

@SteelPROTOX 3 ай бұрын

will this work as project for university exam

@PetrandoRichard 3 ай бұрын

Why delete route uses POST? Should use DELETE instead..

@pradeeppanja1930 8 ай бұрын

28:04 Code shows an error how it is still able to upload ?

@colbyfayock 8 ай бұрын

hey which error are you referring to? not seeing what you mean from the timestamp

@pradeepCodes-ws9tt 8 ай бұрын

@@colbyfayock in the route.ts file after we make sign-cloudinary-params

@pradeeppanja1930 8 ай бұрын

If you can see after 20 seconds from the timestamp the route.ts shows an error what does that mean how it is still working?

@colbyfayock 7 ай бұрын

@@pradeeppanja1930 are you just referring to VS Code showing route.ts in red? i think my typescript engine was just being slow and didnt catch up by the time i navigated away. did you actually experience an error when trying this?

@pradeeppanja1930 7 ай бұрын

@@colbyfayock I am good now. However on handleOnSave I cannot understand why it is not refreshing lemme share you the code. async function handleOnSave(){ const url = getCldImageUrl({ width:resource.width, height:resource.height, src:resource.public_id, format:'default', quality:'default', ...transformations }) await fetch(url); const results = await fetch('/api/upload',{ method:'POST', body: JSON.stringify({ publicId: resource.public_id, url }) }) closeMenus(); discardChanges(); setVersion(Date.now()) invalidateQueries() console.log('Save is working') } Route.ts api/upload/ export async function POST(request : Request){ const {url,publicId} = await request.json(); const uploadOptions: Record = {}; if (typeof publicId === 'string'){ uploadOptions.public_id = publicId; uploadOptions.invalidate = true; }else{ uploadOptions.tags = [String(process.env.NEXT_PUBLIC_CLOUDINARY_LIBRARY_TAG)] } const results = await cloudinary.uploader.upload(url, uploadOptions); const response = new Response(JSON.stringify({ data: results }), { headers: { 'Content-Type': 'application/json', 'Cache-Control': 'no-store, max-age=0', // Add cache-control headers }, }); return response; } I tried to disable the cache with above no store but its still the same.