Full-Stack Blog App Tutorial | Next.js MongoDB Blog App Project Full Course
Вставка
- Опубліковано 4 чер 2024
- React Next.js full-stack app project for beginners. Next.js 13 App router full course with MongoDB Get Hostinger Discount: hostinger.com/lamadev10 Coupon Code: LAMADEV
If it is valuable to you, you can support Lama Dev.
Join: / @lamadev
Buy me a coffee: www.buymeacoffee.com/lamadev
Source Code:
Start here: github.com/safak/next-blog/tr...
Completed: github.com/safak/next-blog/tr...
How to create and copy an SSH key in the terminal: github.com/safak/youtube/tree... (Step 1 to Step 6)
App structure: app.eraser.io/workspace/aSshP...
00:00 Introduction
03:08 Installation
04:15 Design Structure
06:25 Styles, Layouts, Containers
10:35 CSS Responsive Layout Tutorial
14:30 Next.js CSS Styles and Layout
20:00 Responsive Navbar Design
28:40 CSS Dark Mode Theme Toggle Design
31:25 Next.js Context API Tutorial
45:40 Next.js Responsive Hamburger Menu Tutorial
54:00 Blog App Featured Post Design
58:30 Blog App Category Component Design
01:06:40 CSS Flexbox (Content - Side Menu Design)
01:08:00 Blog Post Card Component Design
01:15:00 Side Menu Component Design
01:32:10 Pagination Button Design
01:33:20 Footer Component Design
01:42:20 Blog Category Page Design
01:45:05 Single Post Page Design
02:02:50 Next.js Login Page Design
02:08:50 Add New Post Page Design ([Medium.com](Medium.com) Editor Clone)
02:20:10 Next.js API - MongoDB - Prisma Structure
02:22:17 Next.js Authentication Tutorial (Auth.js)
02:26:10 Next.js How to Sign in with Google
02:33:48 Next.js MongoDB Prisma Tutorial (App Router)
02:42:50 Prisma Blog App Schema Example
02:58:50 Next.js App Router Rest API Tutorial
02:51:34 Next.js How to Fetch Data on the Server Side
02:54:53 Fetch All Posts
02:55:25 Next.js Pagination Tutorial (SSR)
03:08:30 Next.js Send a Query to API (Fetch Post by Category)
03:14:49 Fetch a Single Post with the User Information
03:21:30 Fetch All Comments of a post
03:23:22 Next.js Client Side Data Fetching (App Router)
03:30:38 Create a Comment
03:33:32 Next.js SWR Mutation
03:36:36 Add New Post
03:37:35 How to Upload Image using Firebase
03:54:09 Prisma Increase Post View
03:56:40 How to Deploy Next.js App to a VPS Server
04:05:30 Outro - Наука та технологія
Thanks for the hardwork LamaDev! All the best.
Simplemente Increible!!!! me parecen los mejores videos de desarrollo web que hay, soy nuevo en todo esto y aprender de ti es muy gratificante, no se ingles pero aun asi logro entender todo lo que haces, cuando tenga mejor situacion economiga no dudare en apoyarte. GRACIAS!!!
Exactly what I need 😍 You are amazing
This is a master piece. You are an absolute gem!
OMG was looking for something like this today, glad you got what I need :)
Ohhh Lama I 😍 u been waiting for ur post for ages now....u r touching lives i am blessed leaning from u.tnks alot keep up d good work much love Lama 🙌🙌🙌🙌
lama is my best teacher words cant express how grateful i am. thank you so much
Thank you so much for the deployment part, most youtubers do not teach this.
Great video tutorial again! I hope you include typescript on your projects :)
I am trying to be able to do all of your videos and I get a lot of motivation from your video
Thank you so much Was waiting eagerly for Blog App
Excited to begin. Would come back here to give the feedback later
Hi! Thank you for your amazing work! Would be great to see a video with implementation of subscription plans which restrict access to the content of the website depending on the plan. All the best 🙏🐝
I'm waiting for a tutorial like that
@@scotly_emi if you fixed it share
Thank you so much for this new great video. I learn something new everytime you publish new video. I improved my skills in frontend devepment (react JS) thanks to your channel. I would like next time to see your video about desktop app using ElectronJs+ReactJs+NodeJs+MySQL database (or one embedded database). Thank you for sharing your skills
Amazing tutorial. It contains excellent number of production grade features.
Excited to follow this tutorial
Lama Dev,
very useful, thank you!
Could you consider a new proj to implement?
Consists of 2 modules:
- Nextjs 13 full-stack module, running some services for a customer (say, a user app)
- AI LLM module, specifically trained/indexed for the user app, used by dev/test/support teams to evolve/maintain the user app (let's call it a side-car app).
Side car app requirements might be as follows:
1. UI for pts 2-5 below.
2. Further enhancement/development of the user app according to customer's new requirements (input to the side-car);
3. Searching docs on the user app codebase (funcs, classes, etc)
4. Creating test cases for the user app
5. Analizing the user app logs (maybe reacting in real time, changing the app's settings, re-loading, etc.)
In the future if we learn how to create such supplements for user apps I beleve we make a huge difference in automation..
"Excellent video! I'm eager to learn and build an inventory management system using Next.js. Could you please consider creating a tutorial on this topic? Your tutorials are always top-notch, and I believe it would be incredibly beneficial for learners like me. Looking forward to more great content!"
If you have done already, can share with us? For education purpose
@@Ismail-hd4yz not yet but I still working on bro.
The absolute best, thank you Lama Dev❤❤
Fascinating lesson after one of the best lessons about Next.js
In the initial .wrapper style declaration, padding-inline:80px would’ve been more concise. Just mentioning a tiny thing I found, you’re a legend in web dev.
Thankyou Lama Dev, you are the best!!! I love the tutorial and your explanation. also nice remind, guys remember add () after getTime method, for app-> write-> page.jsx file.
Thank you, sir, for this fantastic video. I'm feeling confident now, that I can work with next.js 😄😄
If anyone is having difficulty deploying to Vercel, please comment all code that consumes an API. Publish it in vercel, then put the vercel URL in fetch, uncomment the code and it will work. The next API doesn't work while the build is being built, so you need to deploy the backend first.
Thanks it worked
Still having problem. Can you share your repo link if you have!!!
Im having problems with it! can you help me?
How and which code to comment out?
Thank you for your awesome tutorials
Hi friends! Thanks for watching. Check hostinger.com/lamadev10 if you need a hosting or server :)
Is this personal blog app? Means only i can publish a post and others are only for read the blogs?
anyone can read and write its just like medium clone
@@suvrajitmondal2325
Can you teach us Svelte?
Inconsistent query result: Field user is required to return data, got `null` instead. PrismaClientUnknownRequestError:
Invalid `prisma.session.findUnique()` invocation:
i cannot sign in , above error is shown every time i try to login , all the code has been double checked i cant seem to find the problem
God bless you. I was thinking of this project
hi lama ,
i just building blog project which you createdAt 11month ago
and i get surprised with this great project now
thank you for your effort :)
Hey bro. I have some doubts. Will you help me out?
Is this a good project to build for resume?
@@clumsypotato2065 Hey, did you create and include it in resume?
Highly appreciate you effort for this video. We love you sir.
Porject suggestion
Create a school management system where can add student, attendance, teacher account, marks/ results section and feedback and more ..
+1
Interested in a similar project
+ 1!
+1 please, I'm also interested
Another amazing video!
Increible, gracias Lama!
this looks great!
Hello Love all the videos:) been learning a lot, thanks to you! Please teach us how to deploy your projects on vercel please! much appreciated
dont have any word to say i appreciate
Thanks for the amazing video! I think it'll make more sense to have different user roles. For example: (Admin and regular user) where the admin is the only one who can add a new post and the regular users can make comments on the posts. It'll be nice if you can add those user role-based functionality, thanks!
How about hiding the "write" for users and making it visible on the admin page ( by adding an admin page)
this is a GREAT point.
is there a cost to it? like to run the website
the rain aesthetic was nice at 3:00:25 lol you should've kept going
tnx for showing hostinger deployment.
Thank u ….I inspire a lot
Thanks for this amazing project. It helped me a lot :)
I appreciate you. YOU ARE THE BEST!
Cool. Great project. Learnt a lot
you are my teacher. i owe a lot to you
You never disappoint :)
many thanks bro, you are one of the best in youtube, at least u deserve 1 million subscriptions, just i have a problem, which you are fast, need to reduce speed to .75 to keep up with ur speed, but ur voice will become slow. other than that you are great as usual.
Can't find words to thank you enough
Thanks for this amazing tutorial . I have a question why we need to set relative position to imgContainer ?
Thankyou Lama dev.. Hoping your next tutorial would be typescript, Social-Mern..
Thank you so much
dev papa is rocking 💯💯💯💯
Broo your videos are amazing as always, we always get to learn something nice. But just a small suggestion. Could you use Zustand for React state management in your future videos?? Like it is cleaner and much better than Context API
He actually did use Zustand in the previous project, you can check it out.
Same respect for u for ever, salute to you❤
Thanks a lot for this great video! I am learning a lot from you and will absolutely support as soon as I finish my project with the help of your videos ❤
For the next video, could you please build a CRUD app with MongoDB? Specifically I am interested in Edit part of CRUD, because not many tutorials show that. I only know create, read and delete parts 😢
The only you need is to edit
This channel is cool as hellLove to see how easily you making money
Last 7 dayes I did this project with you and finally I finished it properly, Thanks...
Did you faced any problem regarding dependency?
Fixed several issues, still left, like categorylist section working showing an error. I will solve it. @@vibhavsachan743
@@TamimMahmudBD is the mongodb working properly ?
I'm having problem creating post with Prisma. Could you help?
@@imamulkadir me too
Thanks a lot Lama, please also use other DBs other than Mongo, like Postgress, mySQl
PostgreSQL was in previous video, there was a pizza))
Would be nice to see integrated ads to the blog, not many people do that
Absolutely 💯
That's not hard to do
@@bestanimerecaporiginal thats cool - can you provide some examples or external sites to look this up ? thanks!
@@bestanimerecaporiginal how can one do that
I thank you very much. Under normal circumstances, how many days does it take to build this project from start to finish? I can never deliver a project like this in 4 hours.
Man i just know this would be good
Very good video🎉
Love this, I found my activity for the long weekend
Question, when you set the unique keys prop inside the map functions, you used key={item._id} but I get a warning that it's not unique. I console logged the data and saw that "_id" does not exist but "id" does, I was wondering if this is correct or there's an issue on my end? Thank you!
Excellent channel thank you so much. Need to know the best search functionality for this blog with prisma ORM. please can you make a video
Great! Thanks for pure CSS, without Tailwind.
Is not tailwind not advisable to use?
@@AvidAfrican no, but Tailwind is almost in every project now and it doesn't help to learn modern css
there is no advisable css tool or framework. You can use whatever you want but you should know CSS at the end of the day. Tailwind can be vanished one day just like bootstrap. It was so popular, now nobody uses it.@@AvidAfrican
@@alexeyvymyatnin3547 i asked because i am confused of what to learn. I was learning pure css. I really like pure css but wanted something that can aid me i developing faster...
@@alexeyvymyatnin3547 i also don't like tailwind , it mess up the html . and why would i give so many classes if i can give one class in normal css.
Excellent tutorial, why is the image not displaced in the editor in Write page? how do you display the image in the right place it was in the editor?
Thanks for the video.
Hello, thank you very much for this video! 👏 Can you make a tutorial video using Nextjs and Supabase, please.
Great video, learned a lot of stuff from this. I want to ask is this an SEO friendly ?
Hey LamaDev, mutate in SWR is not working after build, like it dont revalidate after posting.... i suspect the cache is not updating , but works in dev mode. Do you have any idea what would be the problem? Any help appreciated ?
You are the best
I always wonder how I can add formatting to a code snippet in the blog writing page.
Hey Thanks for uploading all together not in two parts 😁.
Hey lama, happy to see u again, can you please share shopping cart system with next js with rtk and jason server api ir mongo db pls
Great video!
I really like your VS code theme. May I know which theme you're using?
one dark pro
Your explanation is awesome please would you also create another blog app using typescript and mongodb for database
thanks for the course, could you please add the possibility to add comments to comments =)
Hello Lama dev,
Regarding the breakpoints used where 1536px/1366px, 1200px/1024px … where the numerator is the max width media query and the denominator as the max width for the container, I really want to know why this practice is taken over having something like width: 90% and max width: 1536px and margin: auto? Then we have a consistent margin overtime and the padding used is completely avoided? I also get that on mobile we don’t get to see any whitescreen on the edge (due to the padding) this could also be achieved with the width: 90% and max-width: 1536px.
hello bro this is the best tutorial, just one suggestion increase a font size little bit in VS code. Thanks
Hi, thank you for your amazing work! Is there any chance to create tutorial for Next JS and Stripe. Showing how to implement subscription model payment our next js application would help a lot
Thank you
Thanks a lot for this amazing tutorial, I have learned a lot, I created the project, and deployed it to vercel 🎉
Can you please explain how to deploy this on vercel and your repo link
@@MMM11228 im using always latest version of anything, just follow the video step by step
I got it working fine on Vercel too, although the Quill text editor is a little temperamental - are you getting that?
can you share your github repo ?
@@TerryMitchell yes im getting the same problem, since its just a demo project i didnt try to fix it
Is this personal blog app? Means only i can publish a post and others are only for read the blogs?
Amazing
great content thx
Thanks 🙏👍
would love to see the the tutorial on next js, prisma,postgresql, t3 stack,tailwind css,typescript from beginner to advanced level
I used a few different text editors but every time I get an error in the build section. do you have this problem? I think they can't adapt to the new version of next js.
Great tutorial ! It could be better if you show us user's roles . for instance, onlys admins can add a new post and others can add only comments. Thank you !
i believe u would just have to create maybe another model in the schema with roles like Admin, User ETC..
Exactly this makes more sense because as it's right now anyone can make a post? That's a bit weird...
Awesome video!!! 💯💥💛👍 Many thanks.
Great job Congratulations,
What I'm really curious about is whether you make the site designs yourself or do you buy them from somewhere, if so, can you tell me where you get them from?
Awesome, bro
Hi Lama dev. Thanks for the great course. But I am encountering one issue where everthing is rendered CSR where i expect SSG for the static page that data fetching is not happening at all. When I remove the theme context provider from the layout, i can see the html source and being SSG properly. Is this issue expected at your side?
Nvm I solved. Thanks for the great content :)
Great
great content!!!, is there a way to add videos to the blogs ?
how can i go to my dashboard for prisma studio after i upload the project on vercel ?
Great !!!
cool!
Good day Lama,
What if my contents are coming as html from database. There may contains many internal links. Now how can I get the seamless navigation feature whenever someone clicks on the link of the dynamic content? Is it possible?
Can we make some global components with dynamic sizes and necessary things as props? For example
CircleImage,
CoverImage,
ThumbnailImage,
HeaderText,
NormalText,
Chip,
IconFromImage
ListviewHoriZontal
ListviewVertical
I used to do like this flutter. Learning react as beginner now.
Can't I just deploy it to vercel?
Great tutorial. Thanks.
thank you for tutorial
for the next video, can you make tutorial about fullstack flutter app ?