ChatGPT Clone with Next.js, Supabase and Jotai

In this video, I'll show you how you can create a chatGPT clone with Next.js, Typescript, Supabase, Jotai and Tailwind. It's an open source project that you can find from my Github profile. Feel free to ask questions if you need.
NOTE: Project structure has changed after this video. Please make sure you check the Github Repo.
github.com/batuhanbilginn/mak...
Previous Videos I mentioned in video:
Supabase with Next.js 13 - • Supabase, Next.js and ...
State Management with Jotai - • Jotai: Atomic State Ma...
- timestamps -
00:00 - Intro / Application Walkthrough
02:54 - Supabase Setup
07:10 - Next.js Setup
13:12 - useChats Custom Hook
21:02 - useChat Custom Hook
26:16 - State Management and Application Logic with Jotai
53:07 - Route Handlers
01:02:39 - Outro
Source Code: github.com/batuhanbilginn/mak...
Learn more: makr.dev
#supabase #typescript #development #developer #openai #ai

[@ccouto2869]

impressed with the content, not only the chatgpt clone, but there's a lot to study here, it got my like and my subscription

[@makrdev]

Thanks bro I appreciate it 🫶🏼

[@user-ij9in4ks6y]

superb project project 🔥. Can't wait for adding plugins.

[@makrdev]

Thanks 🙏

[@zaabimahdi]

This is by far one of the best build ever created on KZbin Bro, Keep the good work !

[@makrdev]

Thank you 🙏

[@MarjinaBegum-ef7tv]

👌👌👌

[@TheCandyPixel]

You sir have earned yourself a subscriber. Amazing value here. Thanks

[@makrdev]

Glad you liked it 👍

[@vinni_codes]

Such nice project. Thank you very much.

[@makrdev]

Glad you like it!

[@exploit.6848]

Dude Amazing Project 🔥

[@makrdev]

Thanks 🙏

[@jonnoriekwel]

This is great. Helping me a great deal. I had a suggestion for a video (and info I really need): A lesson on encrypting user data. I don't want to read people's content, I don't care about it. So how you'd encrypt things like these messages from users.

[@makrdev]

Thanks dude 🤜 Great idea! I was thinking about the same actually. Fingers crossed 🤞

[@darenbaker4569]

Great video, fantastic that your using next 14 features be checking your repo. As I have to create a simular project for my devs. Thank you so much for sharing your hard work it helps massively

[@makrdev]

Thanks 🙏 Please check the repo first. Some changes has been made after this video. 👌

[@darenbaker4569]

I will and it did mention it in the comments, looking forward to your other videos will checkout repo tomorrow. Great to see the bugs with 13.3.o still not ready for prime time but soon. Your a star

[@makrdev]

Yeap, it’s not fully ready but almost there. I’ll post another video about building REST API with new route handlers. Just wanted to let you know in case you’re interested. Thank you so much again 🤗

[@darenbaker4569]

Yes fully aware of the new route handlers got to to talk about it with my devs in a couple of weeks. I am more worried about internalisation lol.

[@makrdev]

@@darenbaker4569 yeah it’s another topic that I want to make tutorial especially inline with SEO.

[@alicodes22]

Such a good build 🔥💯

[@makrdev]

Thank you 🤜

[@joshuastories]

Amazing 🎉

[@makrdev]

Thank you 🙏

[@MadhavJha]

Great video and I love the stack you chose all super modern. Curious, could you add some details about how to create tables in Supabase (e.g. did you use a SQL query/script/migrations?). Also it wasn't clear to me what url to use for NEXT_PUBLIC_SUPABASE_URL.

[@makrdev]

Of course, I’ll add those details in the next video. I used to add tables and columns with SQL due to limitations of creating relationships however you can create with dashboard anymore. When you need more complex systems you can always pick that card tho, it’s the best thing of Supabase. Regarding to URL, it’s under the API section. Public URL is your API server URL. You can check from Supabase Auth video that I published a couple weeks ago. Thank you for kind words and support ❤️

[@MadhavJha]

@@makrdev Yay! Looking forward to the next video. Just like you have a sql folder in Semantic search repo, it would be great to have similar folder for this project especially for Postgres Noob like me. Thanks again!

[@streamocu2929]

you will soon be a hero and will not have time to respond to us 😊 pls make your font a lil bit bigger... also whiteboard session like videos would be great... take the problem... break it down... then show code... thank you ❤

[@makrdev]

Thank you so much 🙏 I’ll fix the issues on next videos. Please keep me posted if you have anything specific you want to learn 🤞

[@streamocu2929]

@@makrdev I have seen your roadmap and love it. But before integrating more AI features, I would integrate with Stripe with a 10$ monthly and 100$ yearly subscription.

[@makrdev]

Great idea 👍 I’ll do that when it’s ready 🤞 Thank you for your advice.

[@NovusTechnologies-qw8xt]

What application did you use for the illustration

[@MisterOcean5]

Hi, I get this error (all Tables are created) when I login: "Failed to load resource: the server responded with a status of 406 (Not Acceptable)". Any Idea what might be wrong?

[@makrdev]

Did you run ‘User Management Starter’ sql query? You can find it from query libraries in dashboard. Also, you can watch my previous video to learn how to setup authentication.

[@MisterOcean5]

@@makrdev Thx for your reply, I used the SQL Queries you provided in the SQL Folder of the Project. If one use the 'User Management Starter' it creates the profiles table. But then I had to delete the section 'create profile tables' from the sql query file in create-tables.sql you provided in the SQL Folder. But anyway, the error still remains. I stuck about this sentence in your description 'After you create the embedding column,...' ?

[@makrdev]

Create-tables sql query should have handled this part. Now, you can crate index. It’s optional but makes your queries faster.

[@MisterOcean5]

@@makrdev Hi, I just cloned the project from github in a new local folder. Now am a step further but still have an issue. Login worked now but I think there is an error in the relation to the messages table. I see data in the profiles and chat tables but not in messages. This is the error I get on console.log message: 'null value in column "index" of relation "messages" violates not-null constraint'. Any idea to fix this issue?

[@makrdev]

Index column is not nullable. So, I think you are trying to create message with null value for index. Index should be automatically created by Postgres so do not try to assign any value into this column.

[@emmanuelezeagwula7436]

what's your vscode theme ?

[@makrdev]

It's Moonlight 2. You can check it out from here: www.vscolors.com/themes/fe612a60-7107-41d4-a01e-4c3bebe3ffd8-97358241