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

Learn how to use Next.js and Cloudinary to build a Google Photos Clone. Your app will be able to transform and enhance the images.
✏️ Colby Fayock created this course.
colbyfayock.com/
🔗 Starter Template: github.com/colbyfayock/demo-p...
🔗 Bonus Credits & Background Removals: cld.media/freecodecamp
🔗 Next Cloudinary: next.cloudinary.dev/
🔗 Photobox: www.photobox.dev/
Cloudinary provided a grant to make this course possible.
⭐️ Contents ⭐️
⌨️ (0:00:00) Intro
⌨️ (0:03:07) Creating a new Next.js app from a starter template
⌨️ (0:05:32) Installing & Configuring the Cloudinary Node.js SDK
⌨️ (0:10:00) Listing photos from Cloudinary
⌨️ (0:15:07) Optimized & Responsive Images with Next Cloudinary
⌨️ (0:23:29) Uploading Images with the CldUploadButton
⌨️ (0:32:24) Passing Server Data to the Client with Tanstack Query
⌨️ (0:39:58) Creating a custom hook to manage resource requests
⌨️ (0:43:53) Optimisticly updating UI on Upload using Tanstack Query
⌨️ (0:52:18) Tagging Images & Fetching Images by Tag
⌨️ (0:55:33) Optimizing Server to Client resource and request management
⌨️ (1:01:55) Creating dynamic routes for viewing individual images
⌨️ (1:11:01) Using AI to Improve, Restore, and Remove Backgrounds from Images
⌨️ (1:28:32) Adding animated loading placeholders for images
⌨️ (1:34:33) Dynamically Cropping & Resizing images to different aspect ratios
⌨️ (1:46:48) Customizing images with filters and effects
⌨️ (1:55:23) Saving and updating an image with applied transformations and effects
⌨️ (2:11:46) Refreshing and updating UI state on save
⌨️ (2:19:14) Saving an image as a copy
⌨️ (2:23:14) Deleting images
⌨️ (2:30:04) Invalidating Tanstack Query tags on change
⌨️ (2:33:01) Adding image resource metadata to info panel
⌨️ (2:37:32) Setting up a Next.js loading UI for React Suspense streaming
⌨️ (2:42:13) Adding loading indicators to homepage gallery
⌨️ (2:43:08) Creating a collage from multiple images
⌨️ (3:06:44) Saving collage creations to library
⌨️ (3:13:30) Generating Ken Burns style zoom animations from images
⌨️ (3:17:50) Stylizing images with Color Pop
⌨️ (3:29:46) Optimizing Creation generation and UI
⌨️ (3:34:29) Creating new server route of only stylized Creations
⌨️ (3:39:05) Outro
🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
👾 Oscar Rahnama
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

Пікірлер: 34

  • @themesongasker
    @themesongasker19 күн бұрын

    Thanks a lot, helped me with cloudinary implementation

  • @RideTheTeacups
    @RideTheTeacupsАй бұрын

    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

    @colbyfayock

    Ай бұрын

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

  • @arkknight101

    @arkknight101

    Ай бұрын

    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

    @colbyfayock

    Ай бұрын

    @@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

    @jeevangowda3309

    Ай бұрын

    @@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

  • @mrjorgemonteiro
    @mrjorgemonteiroАй бұрын

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

  • @colbyfayock

    @colbyfayock

    Ай бұрын

    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

  • @nicholaswilliams9178
    @nicholaswilliams9178Ай бұрын

    This is gold

  • @derpythespy
    @derpythespyАй бұрын

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

  • @marcelol2387
    @marcelol238726 күн бұрын

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

  • @jiyan4700
    @jiyan4700Ай бұрын

    Please mevn stack tutorial.

  • @itxmeJunaid
    @itxmeJunaidАй бұрын

    👍

  • @user-bp6yh2ft7s
    @user-bp6yh2ft7sАй бұрын

  • @JawaCodePro
    @JawaCodeProАй бұрын

    👍🏻👍🏻👍🏻

  • @sunnatillocoder
    @sunnatillocoder21 күн бұрын

    23:22

  • @Jobyx20
    @Jobyx20Ай бұрын

    the narrator guy is cute

  • @RAUSHANKUMAR-iq4yj
    @RAUSHANKUMAR-iq4yjАй бұрын

    8th comment

  • @pradeeppanja1930
    @pradeeppanja1930Ай бұрын

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

  • @colbyfayock

    @colbyfayock

    Ай бұрын

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

  • @pradeepCodes-ws9tt

    @pradeepCodes-ws9tt

    Ай бұрын

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

  • @pradeeppanja1930

    @pradeeppanja1930

    Ай бұрын

    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

    @colbyfayock

    Ай бұрын

    @@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

    @pradeeppanja1930

    Ай бұрын

    @@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.

  • @vincenzopranicci3422
    @vincenzopranicci3422Ай бұрын

    9th. Best comment ever

  • @mkay_zw8276
    @mkay_zw8276Ай бұрын

    1st

  • @pradeepCodes-ws9tt
    @pradeepCodes-ws9ttАй бұрын

    I am sorry but the face cam coming again and again is really annoying.

  • @smartdriver2990
    @smartdriver2990Ай бұрын

    First

  • @gopuadks
    @gopuadksАй бұрын

    First comment

  • @Hasan-is7si4ye9z
    @Hasan-is7si4ye9zАй бұрын

    1st comment

  • @itxmeJunaid
    @itxmeJunaidАй бұрын

    👍

  • @oxnull738
    @oxnull738Ай бұрын

    1st