Your Developer Portfolio NEEDS a Project like THIS

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
In today's job market, your Developer Portfolio NEEDS a Project like THIS... This Next.js tutorial gives a walk-through of a simple project type that is becoming mandatory in the modern web dev job market.
💖 Support me on Patreon ➜ / davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Complete Next.js Developer: bit.ly/CompNextJSDev
- Advanced React: bit.ly/AdvReactDev
- Junior to Senior Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ bit.ly/3nGHmNn
📬 Course Updates ➜ courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ / discord
☕ Buy Me A Coffee ➜ www.buymeacoffee.com/davegray
🔗 Source Code Example: github.com/gitdagray/nextjs-a...
🔗 My Next.js Videos: • Next.js Tutorials for ...
👇 Follow Me On Social Media:
GitHub: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Your Developer Portfolio NEEDS a Project like THIS
(00:00) Intro
(00:09) Welcome
(00:32) Project Discussion
(01:17) Start a New Project
(02:08) Add Dependencies
(02:29) AI Route Handler
(05:19) OpenAI API Key & Environment Variable
(07:42) Chat Component
(11:40) Test the Application
(13:14) Styled Example
(16:19) Expand on this Project
📚 Tutorial References:
🔗 Next.js: nextjs.org
🔗 Vercel AI SDK: sdk.vercel.ai/docs
🔗 OpenAI: openai.com/
🔗 shadcn/ui: ui.shadcn.com/
🔗 Next.js Light & Dark Modes: www.davegray.codes/posts/ligh...
Was this tutorial about a Next.js developer portfolio project helpful? If so, please share. Let me know your thoughts in the comments.
#developer #portfolio #project

[@macieja92]

15:00 you can just use flex-direction: 'column-reverse' and it will make you stick to the bottom while the new message will be streaming, there's no need for any hooks to achieve that

[@bilalillahi6347]

which one is better.

[@macieja92]

@@bilalillahi6347 well, I use CSS solution because then there’s no need to use JS

[@TyronneRatcliff]

AI is a disruptive technology we can't ignore as developers. Excited about the future of AI & web developement. Love your tutorials!

[@DaveGrayTeachesCode]

Right on! 🤘

[@user-fz9hg8rv6q]

thank you so much Dave, it was so helpful.

[@markgesaka8836]

This is very helpful Dave, Thank You So Much!

[@DaveGrayTeachesCode]

Glad it was helpful!

[@chouaibdjerdi9092]

Great Content Keep on Making Such High Quality Next.js tutorials

[@DaveGrayTeachesCode]

Thanks!

[@user-zg5jq8ro4w]

Thanks for making such a wonderful video.

[@Leesdjo]

Thank you so much for the wonderful tutorial. love your contents

[@DaveGrayTeachesCode]

You are so welcome!

[@Gurralanarayanareddy]

Thank you so much Dave

[@ElliottTheUnicorn]

long time subscriber, thanks for the video!

[@DaveGrayTeachesCode]

You're welcome! 🙌

[@NyamekehChris]

Great work bro

[@kehindegilbert2699]

Great content!

[@youssefkarfouh3084]

thank you so much dev , you're my mentor

[@hikmatillohtokhirov914]

Thank you Dave Gray for these kind of tutorials.

[@DaveGrayTeachesCode]

You're welcome!

[@xczm225]

Great as always!

[@DaveGrayTeachesCode]

Thank you! Cheers!

[@aymenbachiri-yh2hd]

Thank you dave 👏👏

[@DaveGrayTeachesCode]

Welcome!

[@oghenefejiroprinceimene6090]

Thank you Dave 😊😊..

[@aaliraza4004]

thankyou Dave

[@DaveGrayTeachesCode]

Welcome!

[@ustav_o]

perfect. thanks!

[@DaveGrayTeachesCode]

You're welcome!

[@TravinskiyVladislav]

Thank you Dave

[@DaveGrayTeachesCode]

Welcome!

[@bereketwale-yf1rg]

am learning html ,css,js, ts ,react, next js, node ,express ,phyton ,talawind css . all by you you are realy amazing keep it up there is many videos on you tube but your videos are very hard and more than a book and university. if you have a time please build project video course. bc one your video make me understand every thing. thanks keep it up

[@prathamesh3825]

Thank you dave bhai. I am following the nestjs series. Its so good. Are you considering to covering more indepth tutorial in nestjs.

[@DaveGrayTeachesCode]

Possibly in the future. A few other topics to cover first.

[@oussemabouyahia474]

interesting , Thanks Dave

[@DaveGrayTeachesCode]

You're welcome!

[@ambrosearuwa9458]

Oh my God, my favourite tutor is getting old 😭😭😭. Older, wiser, and stronger 💪

[@DaveGrayTeachesCode]

😆 I do look older when I don't shave.

[@Juan-ws9sy]

I was able to run your code pulled from Github. However, it looks like Vercel changed their documentation already, so I wasn't able to follow along. I also couldn't get the code from their new documentation to work. Looks like it's not pulling in the OpenAI API correctly and I don't see any code for that.

[@ecortesg]

Wow, I didn't know it was that simple. Thank you so much. Is it possible to use custom GPTs? Like the ones you pass extra knowledge and instructions.

[@DaveGrayTeachesCode]

Yes you can do more with prompting.

[@ahmad-murery]

While I don't like relying on AI to do everything, I do like using it to collect answers from a specific document(s). Thanks Dave, looking forward for more AI/LLM stuff

[@DaveGrayTeachesCode]

You're welcome my friend! Have a great weekend 🚀

[@user-ru8hn9hb5c]

Good idea

[@josephryan8899]

Hey Dave, I know this is a little off subject but what vs code theme do you use. Thanks for all your teaching

[@Stallion45]

Love this…, glad I found your channel a few months ago. After being a php dev for 15 years, and getting very bored, I recently moved over to react etc. Problem now is that I’m so overwhelmed with deciding on a solid stack to build on. I’m all about Nextjs, but authentication, databases, etc sometimes is a tough call without the experience to help decide.

[@DaveGrayTeachesCode]

Welcome and glad you liked it!

[@ninjagaskin]

Thanks for the clean walkthrough, Dave. Does the ai sdk come with history context out of the box? For example, if you were to ask about hotdogs in the first message and then in the second message just asked “where are they from” would it know you’re talking about hotdogs?

[@DaveGrayTeachesCode]

Yes. For example, I can ask "Which US state produces the most wheat?" It answers "Kansas produces the most wheat." Then I can ask, "What else is that state known for?" And then it says "Kansas is also known for..." and goes on to list several things. In the 2nd question, it knows the state provided in the answer from the 1st question.

[@ninjagaskin]

@@DaveGrayTeachesCode cool. Thank you for the quick response

[@John-eq5cd]

@@DaveGrayTeachesCode Kansas is known as being the home state of Dave Gray, I believe.

[@CoIdestMoments]

It does not answer without credit card with 0$ credit. Gives Error: 429 You exceeded your current quota, please check your plan and billing details. (never used it before so i've not exceeded anything)

[@DaveGrayTeachesCode]

It is inexpensive, but yes, the OpenAI API is not free. There are other providers you can try listed under providers here: sdk.vercel.ai/docs ..I do not know the costs of each at this time.

[@ElliottTheUnicorn]

I had this same issue

[@setiawansetya9776]

hi bruh, I just get the same issue, you can change the provider, I use the google provider and everything is working fine. hope this help! cheers.

[@AmodeusR]

kind of unrelated question about the video but, do we really need to write @lates? Doesn't omitting it already download the latest version of NextJS (or any other npm package?)

[@mohammadhosein8517]

Perfect 👌

[@DaveGrayTeachesCode]

Thank you! Cheers!

[@justcode1273]

Can we train this model as according to our requirement? Like, if we are using in coaching class chat bot then he might be reply about pricing .

[@sahajranipa]

Sir can you make some tutorials about how we can implement generative AI that can be used in web applications like nextjs with proper backend data analytics operations that would be cool to explore❤❤

[@nadimalaa8961]

How can I improve my git/github skills as I want to prepare for working with a team?

[@proniket]

Hi Dave, can you make a video on how to implement multiple custom themes beyond just dark or light mode with Shadcn.

[@DaveGrayTeachesCode]

Thanks for the request! 🚀

[@keymoment]

Should I use server actions in production?

[@togya4]

also im following this course now, is nextjs 14.2.2 worked again? recantly it was broken.also

[@fscubetech7219]

The great content.

[@DaveGrayTeachesCode]

Thank you!

[@user-fm5nx3fq3n]

Wishing you good health.❤

[@DaveGrayTeachesCode]

Thank you! You too!

[@GhanishthAhuja]

Just wanted to ask a question. If i wanna be a backend web developer, which skill is best suited to excel in it ? I mean there is mean and mern , but what else might be needed?

[@DaveGrayTeachesCode]

Backend development can focus on Node.js, Express and learning about common databases. Other options are available, too: Python, PHP, C#, more.

[@GhanishthAhuja]

@@DaveGrayTeachesCode As a 1st yr student which field would you suggest to move into , web development or data science ?

[@gompoulouaalassanekone3052]

Great !

[@DaveGrayTeachesCode]

Thanks!

[@Devaratha2313]

What do you think about web3 and Blockchain?

[@togya4]

Dave please please explain about n something i forget its name, the thing where you xan use more than one language in your apppp

[@DaveGrayTeachesCode]

Hmm, just guessing that you are describing a tech stack. You use different technologies together to build an application. This can be different languages with JavaScript in the frontend, and a completely different language like PHP, Python, or C# on the backend.

[@togya4]

@@DaveGrayTeachesCode its called i18 or i18next i guess, is it the same thing you wrote about?

[@realzire]

good video dave but backup getting in my face haha

[@juanmacias5922]

I've been thinking about adding a RAG project to my portfolio.

[@DaveGrayTeachesCode]

That would be a great way to expand this project. 🙌

[@user-ze9lc9sk5i]

Hello Dave!

[@DaveGrayTeachesCode]

Hello!

[@user-ze9lc9sk5i]

@@DaveGrayTeachesCode Thank you for your tutorials!

[@mainamburu8036]

hmmm seems they changed the docs

[@calvinwilliams729]

Thank You Dave but please categorize your AI videos so that when we click on AI playlist we get all.

[@DaveGrayTeachesCode]

I do plan to build one 🙌

[@HikaruAkitsuki]

WAIT NEXT JS HAVE AI I thought I gonna back on Python. But the PaaS I using now just give me 512 MB and a tiny 0.1 CPU because I don't want to pay yet.

[@nemogames5354]

dave using ai mugshot for his profile pic is funny

[@mrmikes4553]

Well, I am one of the 25% that scribe to the channel. Do I get a star on my report card?

[@DaveGrayTeachesCode]

⭐⭐⭐

[@HuilenSolis]

None could care less about IA

[@user-qj4rr1rm8i]

I heard your son is graduating high school. You mean kindergarten right?😁

[@DaveGrayTeachesCode]

Ha! I'm glad I look young!

[@bilalillahi6347]

It is useless if we have to pay to do this app as beginners

[@DaveGrayTeachesCode]

OpenAI is the most well-known which is why I used it. It costs pennies for an example project. That said, you can use other LLMs instead for the same project.

[@bilalillahi6347]

@@DaveGrayTeachesCode I'll try other LLM's. Thanks for the suggestion.

[@mosescosme8629]

I would rather lose out on the job than learn AI. I really can't care any less. I just don't see any benefit here.

[@normalguy8550]

That's a very weird mindset, we all know that ai is gonna be more prominent as the years come and we would all benefit from it. And also just from a developer standpoint it's really fucking cool

[@mosescosme8629]

@@normalguy8550 I'm convinced that AI is just the new crypto. It's all smoke and mirrors with little real value.

[@Pareshbpatel]

Nice little tutorial to kick start our A.I. adventure. Thanks, Dave! {2024-04-21}

[@kehindegilbert2699]

Great content!

[@DaveGrayTeachesCode]

Thank you!