Build a Dynamic Portfolio Application with MERN Stack
Вставка
- Опубліковано 13 жов 2024
- Elevate your web development! Learn to build a dynamic portfolio using the MERN stack. A comprehensive guide for crafting a standout online presence.
MERN Stack Project | Build a Netflix Clone with React, Redux Toolkit, Node.js, and MongoDB
☞ morioh.com/p/d...
Advanced User Authentication & Authorization in MERN Stack
☞ morioh.com/p/2...
Doctor Appointment Booking App with MERN Stack
☞ morioh.com/p/2...
In this course you will be having two different parts -
Part 1
In this first part we will build a static portfolio using React and Tailwind CSS. We will use following concepts from react and tailwind css to build the first part .
Colors, Heights, Widths
Flexboxes and Alignments
Custom Animations using CSS
Positions (Fixed , Absolute , Relative)
Responsiveness and Grid system in Tailwind CSS
Components in React
Props states and props
Routing
Part 2
In the second we will convert the static portfolio into the dynamic portfolio. Compared to the durartion of first part , the second part duration is very high. We will complete the first part of the course in almost 2 hours. Then we will work on making the first part dynamic. We will use following concepts in second Part.
Node Express Server Setup
Node - Mongo Connection
Working with mongo db models and schemas
Building Api's to make the portfolio dynamic.
Working with Antd UI components to build the portfolio admin panel
Why Portfolio
The importance of having a professional online presence is more important than ever, and an online portfolio will certainly increase your visibility and presence. Creating your portfolio website allows you to share and showcase your work easily with the employers you'd like to work for.
If an employer sees your website link in your signature or on your resume, they’ll likely click on it to see what you’ve built. Seeing you’ve taken the time to build a website featuring work samples, recommendations, previous presentations and more will be a killer first impression.
Tech Stack
MERN is one of several variations of the MEAN stack (MongoDB Express Angular Node), where the traditional Angular.js front-end framework is replaced with React.js. Other variants include MEVN (MongoDB, Express, Vue, Node), and really any front-end JavaScript framework can work.
Tailwind CSS is basically a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
What you'll learn
Colors, Heights, Widths , Flexboxes and Alignments
Custom Animations using CSS , Positions (Fixed , Absolute , Relative)
Responsiveness and Grid system in Tailwind CSS
Tailwind CSS
Components , States , Props
Redux Toolkit for State management
Working with the combination of Antd and Tailwind CSS
Working with Node JS , Mongo DB
Building multiple schemas and models to make the portfolio dynamic
Complete Projects Resourses and Q/A support
#MERN #MERNStack #Morioh
____________________________________________
Computer Gear:
⬛ Monitor: amzn.to/3PWEfBv
⌨ Keyboard: amzn.to/3rApJG7
🐁 Mouse: amzn.to/3RLZBma
🎤 Mic: amzn.to/3RFd5QJ
📱 Tablet: amzn.to/45aw7Sm
💡 Lighting: amzn.to/3LEjNCE
💡 Key Lighting: amzn.to/3PZcLv7
Camera Equipment:
📷 Camera: amzn.to/3ZzQ1Vu
📸 Primary Lens: amzn.to/48C2UCv
📸 Secondary Lens: amzn.to/3ZBaMQI
🎥 Secondary Camera: amzn.to/46gjgzq
🎙 Camera Mic: amzn.to/3PzRs1F
🎞 USB to HDMI: amzn.to/455ZSnj
Book for Developer:
📔 Python: bit.ly/3REqgBm
📙 JavaScript: bit.ly/3RLdPUJ
📘 React: bit.ly/3ruQtb7
📗 Next.js: bit.ly/3LHY7pp
📗 Machine Learning: bit.ly/3PXJvoo
📗 Flutter: bit.ly/46OyL1p
📗 Angular: bit.ly/3PFrGZT
📗 SQL: bit.ly/46aDc6D
Please note I may earn a small commission for any purchase through these links - Thanks for supporting the channel!
____________________________________________
Note: If you have any copyright issue with the content used in our channel or you find something that belongs to you, before you claim it to UA-cam, SEND US A MESSAGE and the respective content will be DELETED right away. Thanks for understanding.
◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
👕 Merchandise: www.moteefe.co...
🌎 Social Network for Developers: morioh.com/
📱 Twitter: mo...
My life changed too when I started doing this and putting money in stocks. The first few years it as really great, but this year I haven't felt like my portfolio is doing well. I have lost more than $40,000 from my portfolio the past four months, and it's now very worrisome.
The year has been really rough for everybody. But I've been able to cushion the effect though. Have you thought of using an investment advisor? They can make you good money especially during uncertain times like this.
Yes, I agree. I use a financial advisor too. Same person since 2020. I don't worry about whether the economy is going up or down or sideways. I always ride through.
Oh, really? I have never thought of that as an option. Can I ask who it is you've been working with? I bet I could use some help myself.
My CFA NICOLE ANASTASIA PLUMLEE a renowned figure in her line of work. I recommend researching her credentials further... She has many years of experience and is a valuable resource for anyone looking to navigate the financial market..
Thank you for the lead. I searched her up, and I have sent her an email. I hope she gets back to me soon.
Adding Timestamps to mark my progress
00:00 Intro
9:00 Setting reactApp
14:30 Tailwind Setup
22:40 Header and Home Section
33:35 Intro Section
44:19 About Section
53:54 Skills List in About Section
58:38 Responsive for prev sections
01:08:03 Experience Section
01:22:50 Experience section Data
01:35:20 Project Section
01:45:15 Courses Section
01:51:10 Contact Section
02:03:10 Footer Section
Drop a 👍
Pls provide source code and live website link
Thank you very much sir ,Loved the lecture gained a lot ❤❤
If someone is getting null at 4:18:50 is solely because of routing, make sure that the admin panel is routed correctly. you can check by component testing on your home file. I solved it by doing trial and error and with proper routing and calling i got mine to work.
It will cause null if the intro part is not called properly so, by calling it i found the error in routing.
is this video is completed for the first and second part I mean is it a complete video?
thanks for superb projects,hepls a lot,wheres the github link
Awesome content sir please keep uploading
anna deployment process for vercel ela cheyali video please
instead of heroku
ok i got it why the portfolioData is showing null. basically when you console.log the intro it shows you an array so our line of code should be const {welcomeText , firstName, lastName, caption, description} = intro[0]
portfolioData is null what can i do this happens at 4:18:50 when we try to retrieve the current data
Sir can you provide the code , i code the same as like you but still getting errors ? 🥺
Amazing really amazing ❤❤❤❤
Where is the source code please?
Hey there! loving your video so far, do you mind providing the VScode extension you've been using. I've looked into them a bit myself but it would be great if you can provide that please!
Cheers!
Github Copliot
Anyone provide github link or source code
Please provide the source code we are facing lots of difficulties and it is very difficult to resolve I am trying from last 3 days but i am getting null in portfolioData
what about this id you used?
please sri tell me how to add projects images and from where?
You deserve a lot of thanks and claps.
sir ye deploy nahi hora hai.
sir when will you upload part 3?
GitHub repo link sir?
Thanks. I am a java dev
❤❤❤ mash allha nice sir
please provide github link
that is amazing content
🔥amazing content
Github link??
great. pls give source code
do u find source code
Can you pls give me the source cod@@user-eb3ul4ye6x
Can you pls give me the source code
Sir can you provide me your github link of your code it would be very helpful
Dies this video contain the complete mern stack project?
Sir can you pls give the source code
completed till 3:55:00
Can you please send me the source code
Nice content sir
Part - 2?
Where is the source code please???
hi do you find source code
3:19:47 / 6:41:49
3:54:41
same problem if you solve please help me
same problem if you solve please help me
@Learn {to} Code portfolioData is null what can i do
Same issue not getting data
If you got the solution then please help
@@avikumar799 did u get the solution we get it at 4:18:50 im getting null
did you solved?