Build a Full Stack Application with OpenAI, Next.js 13, Vercel and Chakra UI
HTML-код
- Опубликовано: 6 июн 2024
- Want to build a cutting-edge app with Open AI? Learn how in this tutorial. Utilizing Next.js, Vercel and Chakra UI, learn to create a seamless and visually stunning experience for your users.
📚 Resources
- OpenAI API: openai.com/api/
- Chakra UI Next.js Guide: chakra-ui.com/getting-started...
- Next.js: nextjs.org/docs
- Chakra UI: chakra-ui.com/getting-started...
- Track Your Website Analytics with Umami and Railway: • Track Your Website Ana...
- Demo: thankfulthoughts.io/
- GitHub Repo: github.com/hqasmei/thankful-t...
👩💻 Connect
Github: github.com/hqasmei
Twitter: / hqasmei
LinkedIn: / hosnaqasmei
⌛ Timestamps
0:00 Intro
0:50 Get OpenAI API key
2:10 Create Next.js Project
17:03: Deploy on Vercel
18:04 *Optional: Add Custom Domain
19:39 *Optional: Add Web Analytics
19:46 End
Promissing channel and great content....full support 👍👍👍
Great Video! Have been looking for something similar to get started with trying OpenAI with Next.js
Awesome video thank you for sharing and I enjoy learning from what you put out!
Quality Content! Best wishes to you! My solo development journey also started this year. Hoping to see the growth of your RUclips journey and you will go a long way In Sha Allah.
Great job!
Thank you Lee, I appreciate it! Love your RUclips channel. Your videos helped me answer a lot of questions I've had 🙏
This is cool. Thanks for the project, I will try to create some thing like this
Great video Hosna!
subscribed!
Great VIdeo Hosna, thankyou!
Thank you!
Sweet! Thank you. Question -- are there any special steps to follow regarding Umami since this is a preexisting webapp in Vercel, which differs from the deployment flow you used for Railway?
Hi, nice video!
at 0:26 you are not using chatGPT but GPT-3. There is a huge difference.
It would be great if you create a video using figma to react component tool (like locofy) instead of designing with chakra or tailwind. I think that could be a much much better real life developer workflow.
Thanks for the clarification!
great content Hosna.
Keep it up :)
Good video
Could you make a playlist?
hey how did you expand rfc to that at 5:06? any extension?
Yes, I believe it's Reactjs code snippets marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets
Hiya, both the github and following along has a issue where nothing is generated when you click generate thoughts. Will it end up being fixed? Only two errors:
1- Failed to load resource: net::ERR_BLOCKED_BY_CLIENT which is vercel link so probably unrelated
2-
Warning: Extra attributes from the server: class
at body
at html
at RootLayout (webpack-internal:///(app-client)/./app/layout.tsx:16:11)
at ReactDevOverlay (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:58:9)
at HotReload (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:19:11)
at Router (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:99:11)
at ErrorBoundaryHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:63:9)
at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:76:11)
at AppRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:20:13)
at ServerRoot (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:126:11)
at RSCComponent
at Root (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:143:11)
It could be completely unrelated from these two and probably is. .env and .envlocal has been tried with taking time to ensure they load and work normally.
Edit: secret keys say they're being used but not working
I appreciate you sharing this. I will look into it and get back to you.
thanks
i created everything but no response is being generated even after putting the API key. How would I fix this issue? Thanks
Probably would need to see your code in order to help you out. Do you have a public github repo you could share?
It's saying openai api request failed. ${res.status} 429... Too many requests?
@@JulaVision Do you have any credits left in openai?
@@hqasmei yes it says $18. Didn't use any but it does say expired October 1st 2022
@@JulaVision Ah then that's the issue. You can either create another account with another email to get more free credits. Or buy more credits with your existing account.
nice tutorials, pity that I still have to learn javascript well, with typescript just mess in the head
I know the feeling. It just takes time. To understand it you got to code and slowly get the hang of it.
Or use good no code, low code tools. They have been getting better the last few years.
@@hqasmei i'm learning Next-js with Javascript, typescript maybe in a few years. I like Next-js and Tailwind 🤩