Build a Dynamic Portfolio Application with MERN Stack

Elevate your web development! Learn to build a dynamic portfolio using the MERN stack. A comprehensive guide for crafting a standout online presence.
Advanced User Authentication & Authorization in MERN Stack
Doctor Appointment Booking App with MERN Stack

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

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:

Camera Equipment:

Book for Developer:

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 Youtube, SEND US A MESSAGE and the respective content will be DELETED right away. Thanks for understanding.

◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️

[FrankEwordv]

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.

[SrikantVlogs]

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 👍

[vishal-sodj]

Anyone provide github link or source code

[Inspirational.Powerhouse]

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.

[achuthkumartelugu]

thanks for superb projects, hepls a lot, wheres the github link

[alihassanhaji]

Amazing really amazing ❤❤❤❤
Where is the source code please?

[SachinKumar-woxp]

Thank you very much sir, Loved the lecture gained a lot ❤❤

[hxtesh_]

portfolioData is null what can i do this happens at 4:18:50 when we try to retrieve the current data

[find_peaceful]

anna deployment process for vercel ela cheyali video please
instead of heroku

[Xaka-waka]

Awesome content sir please keep uploading

[avikumar]

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

[HonourPC-cq]

Sir can you provide the code, i code the same as like you but still getting errors ? 🥺

[studywithroman]

please sri tell me how to add projects images and from where?

[SIVAR-ps]

Can you please send me the source code

[AshishYadav-eyvv]

Sir can you provide me your github link of your code it would be very helpful

[abhishikthpammi]

You deserve a lot of thanks and claps.

[BlueEyes-wlsr]

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!

[prashantpillai]

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]

[logeshbaskar]

@Learn {to} Code portfolioData is null what can i do