Summary
Keywords
Full Transcript
#typescript #nextjs #tailwindcss In this video, we will build a photography portfolio from scratch with Next.js, TypeScript, and TailwindCSS. In it, you'll learn things like: - How to plan out a real-world project - How to make your images load blazingly fast with Next.js Image - How to build a Masonry grid - How to build a Lightbox gallery - Real-world refactoring process - Deploying your project to Vercel - Pulling in data from an external API (Unsplash) - Using Next.js ISR Github Repo: https://github.com/zachgoll/photography-portfolio-tutorial Chapters: 0:00 Prerequisites, outline of video 8:01 Finding a design to use! 10:38 Gather project requirements 23:56 Setup Next.js, TypeScript, TailwindCSS 36:20 Setup Github repo, deploy to Vercel 48:20 Build the UI layout 1:25:24 Build Masonry grid of images 1:48:19 UI improvements 1:55:25 Add Next.js Font component (Google Fonts) 2:08:24 Optimizing images with Next.js Image component 2:34:22 Build the Lightbox (full screen image viewer) 2:59:50 Connect project to Unsplash API for dynamic photos 3:51:45 Generate LQIPs for remote Unsplash images in getStaticProps 4:26:43 Refactor our project to make it more maintainable (real-world scenario!) 4:43:49 Implement incremental static regeneration (ISR) with Next.js 5:02:06 Future improvement ideas and next steps Design inspiration: https://dribbble.com/dennissnellenberg Image Credits: There are lots of images from Unsplash in this project. I have done my best to credit those used, but unfortunately due to the dynamic nature of the API wasn't able to cover them all. Happy to add more, just leave a comment on the video! - https://unsplash.com/@silasbaisch?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText - https://unsplash.com/@christoffere?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText - https://unsplash.com/@frankiefoto?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText - https://unsplash.com/@sotti?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
