Build a Portfolio Website With React & Sanity.io

[@Kapehe]

I had such a great time making this video! Thank you all for watching, it means the world to me. Let me know if you have any questions!

[@keduslejiyared8701]

Thank you Kapehe for the wonderful tutorial, and thank you Brad as well!

[@eftiprwtopapadakis9310]

Wonderful tutorial. Also kinda cute how sometimes you are giggling during the tutorial LOL!

[@07bakabaka]

i'm your fan , really amazing greetings from Mexico

[@Jonathan-qz9td]

Thank you for making this tutorial. I was wondering, does Sanity support code block for the post content. Also, how did you get so good with TailwindCSS/CSS? I thought that was pretty impressive; you must have put in tone of hours of practice

[@nasifshah5691]

You're an angel 👼 Thanks a lot for this!!!

[@hardlane2961]

Brad lookin better than usual

[@randerins]

it's the hair

[@isaacsante9989]

LMAOO

[@TraversyMedia]

😂😂 I literally lol

[@taariqq]

Brought out a laugh on an otherwise, kind of, depressing day ... lolxx

[@TheCodingOdyssey]

Ha ha this was proper funny

[@JamesQQuick]

What an amazing guest video! One of my favorite technologies and people!

[@Kapehe]

😊 thank you James!

[@CareerProgramming]

Very easy to watch and laid back tutorial 👍

[@2441139knakmg]

Your speed of speech delivery, pauses, stresses, voice, gestures and everything else omg super sooting to the brain! It Doesn't even feel like I'm learning sth new or painful

[@rahulsriram6295]

"I always do that git status again cz I like to see that green" Subbed

[@andrewiglinski148]

It's genuinely contagious how bubbly you are.

[@rnvaamonde]

Women are trying to get better recognized in the IT world and treated seriously. Do you really think "you're bubbly" is the recognition she's going for?

[@GoonCity777]

@@rnvaamonde simp. This screams incel

[@rnvaamonde]

@@GoonCity777 you're right... Let's just keep looking at them for how pretty and cute they are when they are presenting something they researched and put together.

[@andrewiglinski148]

@@rnvaamonde Dude what the fuck are you talking about? It's nice that she seems to actually enjoy making this. It's not like I implied something negative. Like "Rodrigo... cool hair bro, but the desperation to come off as chivalrous is thirsty as a mother"

[@rnvaamonde]

@@andrewiglinski148 Chill man, no need to swear. I'm not attacking you, I'm sure you wrote that with the best of intentions. But I'm just pointing out... would you call "bubbly" a male presenter (assuming you are het.)? I'm not "chivalrous".. I just think there are too little female devs, and would help if we just praise (or discuss) their content like if they were a guy, and stop reacting differently at them. It's only my POV, I'm just questioning you to give you a different perspective. You don't have to agree.

[@SauravKumar-vj7ks]

Each and every step explained soo much clearly that everything seemed soo much easy. Thanks Kapehe for such an amazing tutorial. Kudos for the amazing work.

[@waifufx]

You see it too right she is good

[@madmad6915]

This is a great contribution for me, I did not know Sanity.io is like the missing piece for my project thanks for this useful video

[@sejaldahake2745]

What are the pre requisites to do this?

[@andrei-petrulazar5564]

This is the best video for beginners! I learned a lot of things and most important your explanations made me understand very clearly all the concepts you used. All other tutorials from yt are done in a hurry and the explanations are missing, but you made everything so easy to understand. I'm glad I found you, and I hope to find you all the beginners that need help. Thank you for great content!!

[@noorsh]

Hello Kapehe, I really like how you explain things. Thank you loads for this. I've left my day job to create my own business and little by little, with the help of people like you and Brad, things are becoming clearer for the future. Thanks again :)

[@rnvaamonde]

Thanks! I was looking exactly for this last weekend with no much success, and today it came out in my subscriptions. I'll give it a go!

[@JeremyMecham]

This is by far the simplest, most straight forward tutorial that I have found yet for this specific stack. Thank you so much! I do know React at a mid level and Sanity is awesome, I have been using Netlify for a year so this was perfect. You rock (subscribed). :)]

[@marcus1984-C3PO]

How did you work through it with react having a new version? And the cdn? I'm not that experienced.

[@rameshwarprasad4722]

Super awesome tutorial Kapehe. Such an amazing content and explained so beautifully. Thanks for the tutorial. Keep bringing the amazing content.

[@johnsoto989]

Thanks for doing this video. Really well done! I had a problem getting the SinglePost to show up. I change the Route to `/post:slug` instead of `/post/:slug` and then it worked fine.

[@serjio8781]

I am a simple person. I see React - I smash the like button!

[@MuhammadShahzad25784]

Thank you Kapehe & Brad for providing such a great tutorial :)

[@Kyle-rg8sl]

Great stuff, loved the vid! Correct me if I'm wrong but the "html" your keep mentioning is actually JSX

[@TheSecondMessenger]

Just FYI, the terminal keyboard shortcut is _Control-Backtick_ , not _Control-Tilde_ . I know it doesn't really matter much but I see this often with even experienced developers, and we should be the ones who say it right. _Control-Tilde_ is sort of implying that you also need the _Shift_ key too.

[@harryadneyinternetservices]

Also, on UK keyboards, the tilde is on the # key.

[@mrag792]

You deserve the Nobel prize 🙂 thank you so much a thousand times!

[@sparrowestes962]

Thanks for this tutorial! Can you share the link to the repo? I am having an error - cannot read property 'current' of undefined.

[@sheheryarqazi1006]

i love your teaching , calm and easy thank you

[@rachelqueen3933]

This tutorial was great and absolutely easy to follow. The only thing is that I cant get this site to deploy to netlify and I've been trying for a month. It just refuses to work and that was the part i was most excited to learn.

[@tim_t]

Was confused for a moment there. I could have sworn the background was different--turns out it's a second video. Quick question for anyone who has extensively used Sanity, how much traffic should I expect a 20GB bandwidth to be able to handle? Been raring to use my NextJS Conf plan since the free upgrade. I love how Sanity is so far the only headless CMS that's usable on mobile. 🤩

[@edmundodominguezagurcia7254]

Thanks! Nice tutorial, I will look forward to work more with Sanity

[@prabneets]

Thank you, Madam, for this amazing video.

[@imPriyankCoder]

best tutorial ever loved it. i got my personal portfolio up and running

[@mahmudalhossain6261]

I am facing some problem , if you help me some information I will be glad to you, friend

[@imPriyankCoder]

sure what kind of help you need

[@imPriyankCoder]

Or whats the error?

[@mahmudalhossain6261]

when i saved post in the sanity then refreshing react app, as a result my post not shown!

[@imPriyankCoder]

oh that's easy could be out of the two issue 1. You trying to fetch a data which is not yet loaded and that's why its giving an error in that case { data.something && div tag its loading...} or put and optional chain

[@Salah-YT]

thank u so much I did it it was coll

[@chijindunwakama2379]

Nice tutorial. Wish you could've explained some parts better and follow a sequence . There was a lot of jumping into the future and then back to the past to import elements and not a lot of explaining why some sanity codes were put. My question: I followed the steps in the sanity studio but I would like to include fetching 'categories' also for my Blog display. How do I include that into the fetch query?

[@IsThisTheKrustyCrab]

That 5k Source Control notification gave me anxiety

[@tsbsankara]

She's very nice, very knowledgeable and interesting. Thank you Kapehe, and thank you Brad :)

[@ma.therezmagnoliacausing6773]

way to start my vacation. Thanks!

[@kennethscribner6673]

Wow. This video was amazing. So easy to follow and I learned so much. Thank you so much for this video.

[@xVecna]

Thanks i was about to make a portfolio and this came up! not sure what else to say. thanks again!

[@blissweb]

If you follow along today, its of course sanity v3 which is nothing like the commands here and everything breaks.

[@Sohneg]

Just read that in the middle.XD

[@heatvisuals]

U have same chill personality brad has. ❤️

[@reiners705]

Wow this tutorial was awesome. Thank you. You absolutely crushed it.

[@yoosafofficial]

Im having with alot of problems in deployment: 1: deploy from git say that target="_blank" without rel="norefferrer" is a security risk, even though we have added it. 2: by drag and drop my portfolio folder in netlify, it give a page of error 404 not found etc. 3: then I ran npm run build and drag and dropped my .build folder in site update place and its live and working fine now. 4: thanks kapehe and traversy.

[@sakibhasan587]

Great Video; I was stuck fetching images using urlFor as per sanity documentation. I tried different things, but the Image was not showing on my client site... But following your way just solved my case... Thanks for such a great video... Best of Luck

[@Iamroot27]

Hello please I’m having type error issued . I get a blank page on my project page .. how can I solve it ?

[@walkingin6375]

Quarantine really did a number on Brad. "Looks like Brad's back on the menu boys!"

[@samgardiner3660]

Excellent video!

[@lifechangingvibes6623]

Fantastic. Thanks for making my life easier. That's a great start, it looks wonderful and it makes me wanna do more. Thanks.

[@chrisdizzle313]

Great vid Kap!

[@Kapehe]

Thanks Chris!

[@louisgirardin2030]

Great course and walkthrough. Thx for taking the time to put this together !

[@Kapehe]

Thank you, that means a lot! Thanks for watching

[@louisgirardin2030]

@@Kapehe FYI . This is an unsolicited reference. I have been using the following app for a while now and it is really helpful > magnet.crowdcafe.com/index.html . I noticed that you were moving windows around left and right. This might save you some time in your next tutorials. Keep up the great work coming. Louis.

[@TheVertical92]

Very cool project 👍👍 Thank you Kapehe for your contribution!

[@randerins]

Cool, but would be even better if someone makes a software developer themed portfolio in React

[@hanzlaahabib]

Excellent work... Thank you for the great content I will be using it for my upcoming projects IA

[@karlguzman9775]

There's a lot of "copy this" and "do that" and "paste this" but it's not shown or mentioned clearly what is "THIS/THAT" in the video. This is supposed to be a beginner's guide..

[@benjaminaboagye9807]

I really enjoyed this tutorial and can't wait to get mine also done and deployed! Thanks Kapehe.

[@calvincrane]

Really great production. Impressed. I have a question on the deployment side. Is this client side rendered or server side rendered? I always get confused as I get the static site generator model but because we don't deploy ourselves I am wondering how it works under the hood.

[@saikiranlingadally1036]

Really great video, everything works fine locally when trying to deploy in netlify getting compile error Any suggestions? Thanks in advance 👍

[@asheeshmathur]

Good Training. Is it possible to connect Sanity with Flutter, enabling mobile devices to access and update data in Sanity. Looks there's no client for flutter. Can we add custom REST API for such interactions.

[@Lvl9chao]

Very helpful tutorial. Though I have a question why bullet points don't show on my SinglePost page like @ 1:49:19 even though I have the bullets on Sanity>Post>Body. Other modifiers such as H1-H4 and Quote does not work as well. Bold and Italicize work though so not sure what's going on.

[@cl4ssychap883]

im excited for this one

[@softmerit25]

This is awesome. Thanks a lot this is the best video ever on sanity. Please, how can i fetch and display posts based on their different Category and pages?

[@sanjanamadhulika1822]

Hi Kapehe, Thanks for such an awesome explanation. I have one question related to React social icon. How do we add the icon for mail to?

[@the_awakening_msaha5132]

Great! It really motivates us.... to see developers from all around the world!!!

[@josuebarros-desenvolvedorw2490]

Wonderful!!! This is incredible!!! Thanks!

[@lancen6805]

Thank you for the video! Well explained!

[@Omar45]

This is amazing! Thanks for the tutorial

[@Khaenman1]

This is a great tutorial and was able to get an app running and deployed to vercel in no time without issues! IT seems the free version is extremely limited to users and you can only add other admin, so using this for freestyle blog development wont work unless you pay.. might have to code my own CMS..... cant afford 99/mo for just the first tier ... maybe im wrong?

[@pritheshdwivedi3226]

My React JS website is not able to fetch the data from Sanity neither in local host nor after deployment. What do you think the problem might be ? I had checked thrice the project IDs in every file and the imports too.

[@spicyLEGO]

Thank you so much for this awesome tutorial. You made everything seems so easy and simple. I will be following your guides in the future. :)

[@sabyasachisamadder3612]

After completing the project it's shown "An error occurred while attempting to reach the Sanity API. Our diagnostics cannot quite determine why this happened. If it was a network glitch you could try hitting the Retry button below. If you are working as a developer on this project, you could also have a look at the browser's Dev console and see if any issues are listed there."

[@ganesh11685]

That was really helpful. Thanks.

[@Kapehe]

Awesome, good to hear! thanks for watching

[@filipemarques4677]

That's a nice website. Is it 100% responsive with only those few lines?

[@watchyoutubeaccount1]

Can we get a updated version of this tutorial?

[@shloimiminkowicz4188]

Kapehe, Excellent course !! is there any way I could get the source code? I have some minor problems

[@jingostudios]

I Like - I kept the category and used it like this within the project.js { title: 'Category', name: 'category', type: 'array', of: [ { type: 'reference', to: [{ type: 'category' }] }] },

[@adrianobarbosa-buenosaires2789]

Great work ... let know more like this....tanxs

[@ianesposo6470]

Thank you so much! You are amazing!!

[@toddbrannon6262]

Great tutorial!

[@davidcalderwood5540]

Thanks for deleting my comment regarding how you cannot use Switch with React v6 and instead need to use Routes, but hey I guess you want other viewers to struggle with how it doesn't work unless they specifically install React v5. Maybe you should put an update on the video to explain this!!

[@MarcusHammarberg]

Great stuff - thanks a lot!

[@MichaelGTadesse]

awesome video - thanks!

[@ashishdeora8522]

In-between you cheer up and smile. I think, we developers miss this. Thank you for this wonderful tutorial. One feedback, you can save a lot of time and make this shorter by posting all the markup related code on a github and copy paste that. As this is not a Tailwind tutorial, we can skip the short explanations that we are doing here. Cheers! Keep up the good work

[@AmienPhillips]

Thank you! Is it possible to host the sanity part locally too?

[@difer1412]

Guys I have a question. If I finish the portfolio, how can I make this project work in a host domain? I hope is not complicated

[@leodragonheart754]

Hi @Kapehe_ok Thanks alot for this tutorial, you really saved my ass haha, I just have one question. Once it is deployed and I would like to change some styling in the code. Do I need to do something special or will netlify update things automatically ?

[@86thecake]

you just push your changes to GitHub and netlify will redeploy with the changes

[@nikhildhakal3727]

Good simple. Thanks

[@DesignfulDev]

"> git branch -M main" that was a nice touch.

[@omarcortes5754]

Very well, more homework to do.

[@graemegrant6669]

loving this project, but anyone else get this issue ...'TypeError: Cannot read property 'current' of undefined' 37 | {postData && 38 | postData.map((post, index) => ( 39 | > 40 | | ^ 41 | 36 | | ^ 37 | {postData && 38 | postData.map((post, index) => ( 39 |

[@bryanfelicianovelez2293]

× (solution is make sure you have dataset set to production is client.js) Error: `dataset` must be provided to perform queries I keep getting this error for now apparent reason, I've read trough the docs and nothing ive seen references this

[@idevbrandon]

Brad, thanks for sharing content. One day, i will be on your channel too!

[@akshayaileni5258]

Hello I've designed a react application which consists of some cards on homepage, and when I click on them, the product page should appear. It's working fine on my localhost but when I deployed it to vercel, it's not. What could be the issue!?

[@dannym2595]

Does the new create react app command manages nested routes? I saw she loaded the page on /about and the site worked. Any idea what she did ?

[@roryquarrier7337]

also Switch is now Route

[@MrWicoP]

Hi, is there anyway that we can get a updated version with Sanity Studio V3 being the latest and EOL for V2 on 7th Dec 2023. Having trouble connecting React to Sanity. Any help or suggestions will be appreciated.

[@salmanarshad8861]

Very well done traversy🔥🔥🔥🔥🔥

[@nishantcharas]

nice work!

[@criszamarco2186]

very nice!!! thanks

[@mr.pradana1273]

Nice! I just made my first React Website with my own css style 😁

[@amazonfbaphotographer7333]

Beginner here, at the start, when you open up VSCode. How are you able to have all the files like; app.css/app.js/index.css, etc. I don't know what generates that. Is it a framework that generates those files? Thank you.

[@chisomjulius9512]

Download node.js, Open your terminal in your vs code and run, Npx create-react-app portfolio After the command run Cd portfolio Then you run, Npm start

[@mmogib]

Please come again with more sanity.io use cases.

[@nishantgupta1854]

kapehe is the most beautiful framework to learn react🥰

[@wildpett]

Can you post your prettier config (and how you stored it)?

[@devvvvvvvvvvvv]

Still hoping to see some kind of guidance on Sanity use on mature sites. Hopefully it's not out of scope for a channel like this.

[@tristansteed5115]

The presenter is charmingly beautiful, however, I feel as though sanity.io could have been explained better at the start of the video, since this is a beginner tutorial a high-level overview would have been helpful in understanding how the platform integrates with the frontend and which advantages it could potentially have over using other backends.

[@briandh15]

She did, uploaded yesterday to the channel too: kzbin.info/www/bejne/aWO1gWCpfJahoKc

[@nabeeljaved1742]

addition in my skills thanks.

[@nazokatisamova5073]

Thank you for paving the way for female leads. Great way to promote female developers. So encouraging. Kaphe great job !!!