Git Product home page Git Product logo

nextjs-image-gallery-ninja's Introduction

Next.js Image Gallery

With Tailwind CSS, TypeScript & Zod

In this series, we’ll build a searchable Next.js Image Gallery with the Next.js App Directory, Tailwind CSS, TypeScript and Zod.

Next.js Image Gallery

Lesson Help

If you get stuck on any lesson in the series, (1) navigate to the course branch for your current lesson and (2) view or (3) download the code for more help.

Preview of downloading code in github

Prerequisites

In this series, I’ll assume you know the fundamentals of Next.js, TypeScript, and Tailwind CSS. If you need help, see the Net Ninja’s introductory series on each of those topics.

💻 You will need:

  • Node.js (npm / npx)
  • Next.js
  • Pexels API Key

🚀 Create .env.local file

Create a .env.local file to store your API key. Example below:

PEXELS_API_KEY=your-API-key-value

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

📚 References

Author Links

👋 Hello, I'm Dave Gray.

👉 My Courses

✅ Check out my YouTube Channel with hundreds of tutorials.

🚩 Subscribe to my channel

☕ Buy Me A Coffee

🚀 Follow Me:

🎓 Academic Honesty

DO NOT COPY FOR AN ASSIGNMENT - Avoid plagiarism and adhere to the spirit of this Academic Honesty Policy.

nextjs-image-gallery-ninja's People

Contributors

gitdagray avatar

Stargazers

Arifa Eva Celinia Candra avatar mundane avatar Dev Mukherjee avatar hbela avatar Digitl Alchemyst avatar elysiumspark avatar John Polinski avatar Hadid Garcia avatar avatar hamed ben kora avatar swamydyapa avatar Saadi Sidali avatar Tawsif Haque avatar haohao2021 avatar Igor Tadić avatar Sahand Ghorbani avatar Ong Riverine avatar MOISES SANABRIA avatar avatar Henry Babbage avatar Joshua Edo avatar Asher avatar Yasuji Mendel Nakanishi avatar Osama Mehifoodh avatar Jan avatar Jorne Saenen avatar Amit Friedberg avatar thanhnguyenNG avatar Siddiq Ahmed avatar TalhaKhan avatar avatar Muraya avatar

Watchers

avatar avatar

Forkers

samigroup foumez saadisidali ttlaare maryfvieira ryanhell whyte25

nextjs-image-gallery-ninja's Issues

Error message on Lesson #9 : "Property 'width' does not exist ... "

Lesson #9 - I have this error on the line "const widthHeightRatio = photo.height / photo.width "

Property 'width' does not exist on type '{ id: number; height: number; url: string; src: { large: string; }; alt: string; blurredDataUrl?: string | undefined; }'.ts(2339)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.