Build and Deploy a Full Stack MERN AI Image Generation App | Midjourney & DALL-E Clone
Вставка
- Опубліковано 6 лип 2024
- MidJourney and DALL-E are taking over social media. Dive into the world of artificial intelligence and build your own version of these tools that can generate everything from memes and art to beautiful UI/UX designs!
⭐Hostinger - www.hostinger.com/mastery
Use the code JAVASCRIPTMASTERY to save up to 91% on all yearly hosting plans.
💻JS Mastery Pro Courses - jsmastery.pro/youtube
✅ A special UA-cam discount code is automatically applied!
📚 Materials/References:
GitHub Code (give it a star ⭐) - github.com/adrianhajdin/proje...
Assets - drive.google.com/file/d/12ZCr...
GitHub Gist (code to copy) - gist.github.com/adrianhajdin/...
Alongside building this application, you'll learn how to use the most in-demand tools today:
1. Node.js, Express.js, MongoDB, and React.js together form the powerful MERN stack
2. Tailwind: The most popular CSS framework nowadays
3. OpenAI's DALL-E model: A deep learning model that generates images from text input
4. Cloudinary: A cloud-based image storage service
💻 Join our Discord Community - / discord
🐦 Follow us on Twitter: / jsmasterypro
🖼️ Follow us on Instagram: / javascriptmastery
💼 Business Inquiries: contact@jsmastery.pro
Time Stamps 👇
00:00:00 Intro
00:06:31 Setup
00:22:04 Homepage
00:35:15 Create post page
00:59:11 Backend
01:22:54 Integrating backend to frontend
01:58:58 Deployment
![Lp. Последняя Реальность #97 ЧЁРНАЯ МАТЕРИЯ [Анти Скинт] • Майнкрафт](http://i.ytimg.com/vi/k4MjXCzKsYw/mqdefault.jpg)
Want to land your dream programming job in 3 - 6 months?
⭐ JSM Masterclass Experience - jsmastery.pro/masterclass
Become a Software Engineer. Guaranteed.
Hello sir, does your api works now. i think i is not free now we sould buy now. if there is any suppliment please provide us.
@@timecapsule9338 Gym Supplement?
@@timecapsule9338 creating your own AI might work, hahaha jk
Cost of the course?
For this there is a soln mern section in discord github rep is also there
I cannot believe such a comprehensive guide can exist for free in UA-cam. People on Udemy will charge you 60$ for a similar course and here you are doing it for free ?! World owes you so much, man.
Teleqram me 👆⬆️...
I need ur help
@@sahibalaskar1192 what is it?
I've been searching for a tutorial like this on UA-cam for a few months, and I didn't find anything like it until now. Your tutorials are always unique and never done before. I promise to register for your paid courses once I can afford to, your content is gold.
Teleqram me 👆⬆️
At this point, the world definitely owes you so much. Thank you for the crazy amount of time you spend in creating your tutorials.
This guy knows exactly what is UP! Thank you so much for keeping us with the most updated knowledge.
I appreciate that!
I agree with everyone else. The entire Build (Tutorial /Presentation) was absolutely amazing!! The details, tips, techniques and planning were definitely shown and very much appreciated!
For help Teleqram me 👆
THANK YOU so much javascript mastery. Be rest assured we are so grateful for your work and be sure it helps more people than you can imagine. Thank you
You are very welcome
Your content never fails to impress. Your vocal delivery is top-notch, the web design is sleek and visually appealing, and the information presented is always current. Your innovative approach to each project keeps the material engaging, making it the best UA-cam channel I have subscribed to. I am using the Frontend Meta Course as a supplement to your tutorials to strengthen my grasp on the subject matter, and it has been invaluable in solidifying my understanding. Keep up the fantastic work!
Teleqram me 👆⬆️
I love how you stop and went over what we have completed, at the 1hour 15 minute mark. It helps solidify what we've done and what we're about to do. Great stuff as always.
Glad you enjoyed it!
Seems like he's the only one who could get me to understand react. What a great tutor
If someone is currently following this tutorial, please note that as of today's date, the code might not work at 1:25:00 due to the API now being paid.
thank you
then what is the alternative to work?
ohhh noooooo! what should I do nooww?🤦♂🤦♂
same man !!!! stuck at Billing hard limit has been reached
The Solution for this is to create another account with a different phone number you will get 5$ free credits valid for 3 or 4 months... Each prompt request is approx 0.02 dollars so send them carefully
You always want to make me cry with the quality of tutorials you put out for free. Your channel has completely changed and shaped my programming journey. Thank you.
Thank you so much!
Hello everyone, if you are stuck at 1:26:20 and you are getting Failed to fetch error, make sure to rectify below code in your backend:
const aiResponse = await openai.images.generate(
{prompt,
n: 1,
size: '1024x1024',
response_format: 'b64_json'
})
const image = aiResponse.data[0].b64_json
return res.status(200).json({photo: image})
it's same error
he return this message (Billing hard limit has been reached)
Thank You 👍🏻👍🏻
not worked sane error
Thank you so much Adrian for your amazing work. I've been wanting to build mine and couldn't get it done !
You can do it!
Amazing Ive been waiting for a MERN stack course ,Thank You!
Enjoy!
Thank you so much for another awesome video on Full Stack MERN. The deploy section really helps to make things go live.
Teleqram me 👆⬆️.
Anyone facing error with the api ("Billing ha..."), you need to make a new account at open ai and use the api key from the new account. You are facing this error because the api is paid. With the new account you will get 5$ worth of free credits, each api call costs 0.02$ so be careful making too much requests. Keep learning, hope this helps!
Thanku so much man!
Facing problem with the error, thanks for telling, now i can move on
sorted out after facing the problem from yesterday , that means only 250 requests are allowed per API Key
Thanks Buddy. You Saved me.
@@piyushcodes5530 i try with new account also ,but still this error occur. Is there any limit in api for limited request per minute or hour ?
@@venilsavaliya3004 yes 3 img/5 min
Was waiting for this masterpiece , BRAVO 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
It's here!!! :)
Wow few days back just finished learning MERN and now you uploaded this video feeling excited 😄😄
Perfect time!
@@javascriptmastery Yes absolutely!! 🤠🤠
Hi, is there any free course or youtube video to learn MERN?
@@javascriptmastery i m not able to generate images from API, it shows error like (expected token 'B', "Billing ha"... is not valid JSON) can you resolve this issue..
Phenomenal video JSM! Clean minimal design, Node/Express/Mongo/API practice & relevant AI work. This one truly is a complete package, thank you team 👍
Much appreciated Derek!
You are amazing, I looking for MERN projects this week. Thank you JSM.
Glad you like them!
I'm Brazilian and here we don't have content like yours.... simply amazing....
We love you Javascript Mastery. I learned so much from you guys and I finally learned how to use AI Api's.
Great to hear!
Thanks to this dude, I found the systematic and easy way to learn MERN by building projects. I wish you and your channel to grow more😊
Awesome, thank you!
Thank you so much for this course !
You're very welcome!
Another amazing project!!!... as always. Thanks Adrian for all you give us!!!...
I was following your react ui ux course and now I'll do this too please create more mern projects 😋
Will do!
We love you Javascript Mastery. 😍 You're a blessing to the Javascript Dev Community 🙌🙌🙌
Thank you!!!
@javascript Mastery is a cheater...he sent $69 but he didn't help me with the work he didn't send the money back also
@@Deekshisaisrini What are you talking about? I didn't accept any money from you? It's possible you got scammed.
@@javascriptmastery I have proofs can I share here
@@Deekshisaisrini please reach out to me via email at contact@jsmastery.pro
Awesome!!! Thanks for show us what no ones would to show for free! You're the real JS Master.
Thank you!
Another great tutorial 💪💪 Thanks Adrian
Appreciate it!
Attention to those who are getting fetch error at 1:25:00 i.e. image is not loaded and our prompt shows up in the screen.
Most probably your API Key usage has expired or you are out of credits.
Solution: Create another account with new phone no. to again get $5 credits for free.
Bro my css version used in this version is v3.24 but right now in website it's showing v 3.34 what to do I'm not getting
Thank you man. As usual, awesome content.
Glad you enjoyed it!
Can't ask for anything more.
This is epic.
This tutorial was absolutely amazing!! The details, tips, techniques, and planning were definitely shown and explained!
Is everything used in this tutorial is free or do I have to pay for something
Bro you are killing it.
There is no other channel on whole internet, who can provide more value in terms of web development then you.
Thank you so much!
The best tutor I've ever seen in my life and probably will not witness another!
you are the God of development for sure! GOAT.
Having notification from JavaScript Mastery ---> it's coding TIME 😍😍
Just finished the tutorial. Thank you so much I learned a lot
Have you completed entire project? Is it working very well?
@@Zephyr314 Thank you so much
I visited your deployed site.
It's showing this error. "SyntaxError: Unexpected token 'B', "Billing ha"... is not valid JSON".
@dhananjay7937 I don't think you can use commas in the prompt. Try to remove all punctuation
Is everything used in this tutorial is free or do I have to pay for something
Yessss!!! Sensei, thank you for sharing your wisdom. I shall study, learn and build my empire with use of your amazing knowledge and instruction. Bless you JavaScript Mastery you have helped me to change my world 🙏
You got this!
😍👏Wow amazing JM, do more Mern-related videos like this
Thank you! Will do!
A great content a lot to learn from this. Great job Adrian keep it up like this!! 👍
Literally completed the video and coded everything along and I've learnt so much! How is this channel free, whoah.
Also, I saw that you can deploy the client side to render as well and just point it to a subdomain and it works like a charm!
Thank you!!
have you had any issues with your apikey?
@@63montywilliams50 Hi, no, not really. What is the issue you're facing ?
@@mrdiin.dev_ Also stuck with apikey. It just wont upload the photo. Any ideas why?
@@LalaYamazaki Are you using the API key in the video ? You need to create your own since you can't use someone else's. They probably deleted it right after making this video to avoid being charged.
I think for every api request, you should show the network tab and show that as well. That way the user can see exactly the response, payload etc. Will def help a lot with debugging
For help Teleqram me 👆
We want more mern projects, addicted to your channel!!
For help Teleqram me 👆
Your work should be rewarded with a Nobel Prize ... Nothing short of that is enough ... In fact, you should also receive an Oscar for your designs ...
Teleqram me 👆⬆️...
Dude i finished my project but i get error on deployment, can you pls help with it 🙏
I'm baffled by the fact that this is for free. I wish that I had this when I was still a 15/16 year old student starting off my coding adventures
Thankfully the younger generations now have it! :)
same bro lol
If you have an issue with JSON while generating new image, just regenerate new API key on openai
can you tell why i am getting this error SyntaxError: Unexpected token 'I', "Incorrect "... is not valid JSON
Great content, and please don't wait for 20k to make more videos about AI like this, I guarantee you that this content will make your channel more famous 😉
it's fantastic , good work JSM
Thank you so much 😀
I've completed this course and although I found some hiccups on the way, it was all something that could be resolved within a few moments (the issues were mostly OpenAI related as their API became monetized very recently)
Thank you so much Adrian for this free course and I'll definitely add this to my portfolio for future employers!
I am also facing a lot of issues, it can't generate images, sone fetching issues, why is it happening 🥲
@@akshitajha1209 I can try to help you if you're still having issues~! keep in mind that the api has now been monetized and unless you add a payment method to your OpenAI account, it will give you an error about Billing
@@mdk-west idk about monetization issues but I had changed about 10 api keys and then it worked, still too slow
But now it's working 😮💨
@@akshitajha1209 oh got it.
well, for me it works pretty well considering the fact that I do pay for hosting (render is pretty pretty slow if you're on the basic plan)
@@mdk-west at 1:26:40 it shows alert "SyntaxError: Unexpected token 'I', "Incorrect "... is not valid JSON" can you please help?
Great content, thanks for all yours hard work!!
Would be great if this could become a web3 project where users can deploy the art as a NFT and have it linked to their wallet and of they connect wallet they can see their own good profile of creations
Great suggestion!
My exact thought
@@javascriptmastery thanks for the reply
i m not able to generate images from API, it shows error like (expected token 'B', "Billing ha"... is not valid JSON) can you resolve this issue..
@@javascriptmastery i m not able to generate images from API, it shows error like (expected token 'B', "Billing ha"... is not valid JSON) can you resolve this issue..
Love your classroom.. to the moon to Jupiter to ends of galaxies.. you are a true blessing to the Developer community
Thank you my new found mentor. Your tutorials are timely and very helpful. I also like the fact that you use Visual Studio code.
You're very welcome!
So, at 1:26:34 you might be getting an internal server error.
This is because the API is not free anymore.
You can create an account with a new email and phone number to get 5$ free or pay as much as you want with your current account ($5 min).
Also the current version of Open AI differs from the version used in the video.
For the new version the configuration is :
```import OpenAI from 'openai';
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY
});
```
And the image generation :
```
const aiResponse = await openai.images.generate({prompt:prompt,n:1, size:'1024x1024', response_format:'b64_json'})
const image = aiResponse.data[0].b64_json
```
In CreatePost you have to write exactly what Adrian wrote : `data:image/jpeg;base64,${data.photo}` because it's not going to work otherwise
Cheers
Thanks a lot!!!!...Finally I've got my first image here!!!!....MANY THANKS!!!!...
Thanks for this Sir Adrian
Thank you!
Adrian! I just want to say thank you. God bless you. You’re a very good man and we’re all grateful for your life!
My pleasure!
My god ! What a presentation. What a code ! What a performance! What a project. You have raised the bar far far for content creation.
Thanks a ton
Again with another mind blowing project ❤
Thank you!
YES THIS IS the tech stack i've been waiting for
hamood
Awesome!
at about 1:40:00 I have an error (500 Internal server error) but it still navigates back to main page and shows error only in console, not alert. Error is at the point where it is supposed to fetch data from /api/v1/post. It only shows error 500, returns to home page and starts loading cards but that is never finished, never shows an error. All the images are successfully uploaded to Cloudinary but it still shows an error and it's not loading them in the main page.
I am getting the same error have you find a solution yet?
@@bhuwanchhimal9784 No, still having the same error after looking through the whole video again while checking the spelling and everything.
Are you still on it?
Can you paste your postRoutes.js file content here. Maybe I can help.
I ran into some errors but finally website was working.
@@asadqureshi126 ok wait
@@asadqureshi126
import express from 'express';
import * as dotenv from 'dotenv';
import { v2 as cloudinary } from 'cloudinary';
import Post from '../mongodb/models/post.js';
dotenv.config();
const router = express.Router();
cloudinary.config({
cloud_name: 'process.env.CLOUDINARY_NAME',
api_key: 'process.env.API_KEY',
api_secret: 'process.env.API_SECRET',
});
//get all posts
router.route('/').get(async(req, res) => {
try {
const posts = await Post.find({});
res.status(200).json({ success: true, data: posts });
} catch (err) {
res.status(500).json({ success: false, message: 'Fetching posts failed, please try again' });
}
});
//create a post
router.route('/').post(async(req, res) => {
try {
const { name, prompt, photo } = req.body;
const photoUrl = await cloudinary.uploader.upload(photo);
const newPost = await Post.create({
name,
prompt,
photo: photoUrl.url,
});
res.status(200).json({ success: true, data: newPost });
} catch (err) {
res.status(500).json({ success: false, message: 'Unable to create a post, please try again' });
}
});
export default router;
Seriously this video is outstanding!!
The only thing I am stucked on is 1:25:30.
It is saying me "Failed to fetch". Can you please tell me where am I wrong?
same here . Have you resolved it? Please reply
@@36-mariajoseph35 Same here, Have you resolved it ?? Let me know...
Same here have you resolved it ??
yes, I am also stuck here from hours error : ( TypeError : Failed to fetch ), if you have resolved this error please tell me
И вновь сочная связка 🤤 Всегда удивлялся, где Вы так быстро находите хорошие связи. Продолжайте в том же духе!
Don't do this project although it is very well explained but OPEN AI no longer supports free API access :(
But akshit , it gives free credits points to get image each month, still should i make this project?
@@adityaagarwal2324hey I tried it's still not working
Yea lol just wasted my time again......
Rapid Api gives free access. Through rapid api, we can do this project.
Adrian has used rapid api in one of his new project video
Its still free yk, my project works just fibe
Amazing project, made my day, learned a lot and got hostinger! God bless you bro.
Enjoy!
I have to include JSM whenever i'm doing my gratitude session!
Grateful for your existence👏
You rock!
Thanks for this great tutorial 🙏
Can someone help me?
After deploying the app on Netlify, I'm always getting "Failed to fetch" error, does anyone know how to fix it? 🥺
Did you upload the whole folder directly in netflix? If yes then I can help.
@@_elusivex_ I uploaded the whole 'dist' folder to Netlify, do you know how to fix the issue?
I hame the same issue... Did you solve this problem?
Failed to fetch error when I click generate
Same error brother
What an amazing video!
The man, the legend strikes again!!
Thank you!
I'm getting an error. Unexpected token 'B', "Billing ha"...is not valid json. Can anyone help me??? Please 😢
double check the before step spelling mistakes bro
@@saiteja335 billing gard limit has been reached it's the response that I'm getting, when i send a request to openai api
Stuck in the same place 🥺
did you find the solution for this error? I am stuck here too
@@laharikrishnam9684 No, I didn't 😔
Api not free I build the Ui I just waste my time
same bro
Thank you so much JavaScript Mastery.. Love your content
Even though it doesn't like some of my requested images 😇 it is still an incredible app. What a great video, thank you JSM!!
For help Teleqram me 👆
Thank You So Much Man , May God Bless You :)
Amazing video tutorial, Thank you JSM
Thank you
thank you brother these videos are really professional and help a lot, absolutely love these!
perfect as usual!!!!!!
Thanks!
Unbelievable service we are getting from you for free! Every time it amazed me how can you do it! Congratulations for 500K subs.
Thank you so much 😀
Great content! One potential bug is that, in the `handleSearchChange` function, we use `item.name.toLowerCase().includes(searchText.toLowerCase())`; however, the `setSearchText` is also called within this function and the update of the state `searchText` occurs in the next render cycle and the filtered results is based on the old one.
Love this channel... Keep going my friend 💪
Thank you 🙌
Thank you for creating such a nice project
Ah your skill is on whole another level keep it up!
Appreciate it!
You are incredible. I love your videos, dont stop.
You're the best!
thank you so much i learned alot from this video, i finished the whole project and posted it on my github !
This is another excellent project video
Thank you so much 🙂
Our pleasure!
This guy is the best teacher I have ever ran into. I am learning so much with him!!
Great video, got it up and running after a little bit of debugging around the api keys. Thanks!
Bro have you completed this project?
@@piyushnarwal9311 yep.
excellent as usual
You are doing a great job man
Adrain You are the GOAT when it comes to JavaScript. Thanks alot.
I appreciate that!
I just watched your new video and I'm impressed with the level of creativity and production value. Keep up the great work, I can't wait to see what's next.. I hope you're doing well. I'm looking forward to your new videos for our social media project. Keep up the great work! Can't wait to see what you have in store for us next. Thank you.
Teleqram me 👆⬆️...
very very nice video and I learned a lot ! Thank you!
I don't have words for such an amazing video. Keep giving this kind of content it helps a lot.
This Single video helped me to recap lots of different things.
❤️❤️❤️❤️👍👍
Thank you!
if you are stuck fetching images from OpenAI API... this worked for me
const aiResponse = await openai.images.generate({
model: "dall-e-3",
prompt,
n: 1,
size: '1024x1024',
response_format: 'b64_json',
});
const image = aiResponse.data[0].b64_json
i tried your by replacing it not fixed it again show me the failed to fetch the code
thanks a lot
such a nice work. you are truely doing a amazing job for students :)
Amazing man it's wonderful ❤
just another great Topic thanks a lot !
Thanks again!
You're the best! Thank you! 🔥
No problem 😊
This was very helpful for my own job at which I am working right now , your content is amazing!
Is it working??
For free?
This tutorial was amazing. I learnd alot. Thank you
Teleqram me 👆⬆️...