Nextjs Server Actions Unsplash Clone, Image Gallery | MongoDB, Pure CSS, Next-Auth, Cloudinary

Опубликовано: 02 Январь 2025
на канале: Dev AT

72,677

568

📚 In this video I'm using next version 13.4.9 and [email protected] and everyone can update to next.js 14, (next.js 14 still has a error when using 'go back' on browser)
NextJS 13, 14 Image Gallery, Unsplash Clone using MongoDB(mongoose) + Nextjs Server Actions + Pure CSS + Next-Auth + Cloudinary

Demo: https://next-image-gallery-devat.verc...
📚 Source Code:   / nextjs-project-111406292
📚 Source Code:    / @devathtml
📚 Source Code: https://buymeacoffee.com/qk1dkys/next...
📚 Link Data: https://github.com/devat-youtuber/nex...

📚 VScode Extensions:
ES7+ React/Redux/React-Native snippets
Community Material Theme
Material Icon Theme

📚 Materials/References:
Server Actions:    • Learn Next.js 14 Complete Course 2024...
NextAuth:    • Next-Auth v4 with Nextjs Server Actio...
Upload Photos:    • NextJS Server Actions Upload Image Fi...
SEO:    • Next.js SEO Optimization | Get your w...
Image Optimization:    • Next.js Image Optimization | Next.js ...
Infinite Scrolling Pagination:    • Two Ways Implement Infinite Scrolling...

🌎 Find Me Here:
Mail: [email protected]
Github: https://github.com/devat-youtuber
Codepen: https://codepen.io/tuan-anh-the-decod...

#devat #reactjs #nextjs
00:00 - Demo
03:08 - Setup NextJS
08:22 - Setup Database
16:14 - Next Auth
35:53 - NavBar
47:12 - Search Form
52:09 - Header
Upload Page
57:47 - Upload Form
01:12:01 - Upload Card
01:39:05 - Handle Upload Photo
02:05:51 - Loading
Home Page
02:11:40 - Get All Public Photos
02:20:40 - Error
02:22:24 - Gallery + PhotoCard
02:36:52 - Download Image
02:40:28 - Infinite Scrolling Pagination
02:56:09 - Favorite Photo
Profile Page
03:00:48 - Profile Info
03:16:18 - Profile Update User
03:39:29 - Profile Follow User
04:07:03 - Profile Menu
04:20:19 - Profile Gallery
04:23:31 - Next-Auth Middleware
04:28:11 - Fix Errors
04:31:55 - Edit + Delete Photo
Search Page
04:43:00 - Setup Mongodb Atlas
04:46:43 - Search Menu
04:56:50 - Search Gallery + Search Users
Photo Details Page
05:01:34 - Photo Compoment
05:20:49 - Photo Page (getPhotoById)
05:27:24 - Next, Prev Photo
05:34:33 - Deploy Vercel