The beginner’s guideline to constructing out your own portfolio utilizing Respond, Sanity, and Tailwind. From scratch, learn the fundamental principles of React, how Sanity can deal with the content for your portfolio, and how Tailwind can aid build wonderful models.
Kapehe’s Social Hyperlinks:
Twitter:
YouTube:
Web-site:
:00 – Intro
02:23 – Setup Respond application, Sanity Studio, and GitHub
15:06 – Setup TailwindCSS
18:32 – React Routing
27:09 – Navbar element
41:17 – Property part
45:51 – Posts ingredient
01:06:10 – Jobs part
01:29:34 – Solitary Post ingredient
01:49:42 – About component
01:58:50 – Wrap up and drive to GitHub
01:59:28 – Deploy to Netlify and Sanity
02:05:19 – Outro (We did it!)
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!
can I publish my portfolio in GitHub Pages when I'm using sanity??
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?
Why do you set the useState to null?
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.
Thank you for the video! Well explained!
Wow. This video was amazing. So easy to follow and I learned so much. Thank you so much for this video.
awesome video – thanks!
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."
That's a nice website. Is it 100% responsive with only those few lines?
Is the order of the React routing important? Because My singlePost wasn't working till I change the order to exactly the same as in the video
Can you post your prettier config (and how you stored it)?
Fantastic. Thanks for making my life easier. That's a great start, it looks wonderful and it makes me wanna do more. Thanks.
I am almost done but this
Failed to load resource: the server responded with a status of 400 ()
index.js:1 Warning: Each child in a list should have a unique "key" prop.
Check the render method of `Post`. See https://reactjs.org/link/warning-keys for more information.
at article
at Post (http://localhost:3000/static/js/main.chunk.js:785:85)
at Route (http://localhost:3000/static/js/vendors~main.chunk.js:39827:29)
at Switch (http://localhost:3000/static/js/vendors~main.chunk.js:40029:29)
at Router (http://localhost:3000/static/js/vendors~main.chunk.js:39462:30)
at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:39082:35)
at App
console.<computed> @ index.js:1
css2:1 Failed to load resource: the server responded with a status of 400 ()
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.
npm install -g @sanity/cli nope not going to sell out to a cloud provider. npm uninstall -g @sanity/cli
sanity.io work in windows?
mx-auto doesn't seem to be working in my case in navbar
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.
Really great video, everything works fine locally when trying to deploy in netlify getting compile error
Any suggestions?
Thanks in advance 👍
Failed to start the app for using npx create-react-app portfolio, below is the error
Failed to load plugin 'jsx-a11y' declared in 'package.json » eslint-config-react-app': Cannot find module 'core-js-pure/stable/object/define-property'
i love girl programmers
× (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
best tutorial ever loved it. i got my personal portfolio up and running
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
Great stuff – thanks a lot!
Thanks. Because of you I got to know about sanity.io. great work lady. Subscribed to your channel 🤗✌️
Awesome.
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 <3
25:21
Hey kapehe thanks for this tutorial. I face some problem . May I get help from you? when i go to create the new post in sanity then refresh the react app but my post not show to the react app . I have review my code properly but no problem shown. any solution for this problem . my code is given below
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import sanityClient from "../client.js";
export default function Post() {
const [postData, setPost] = useState(null);
useEffect(() => {
sanityClient
.fetch(`*[_type == "post"]{
title,
slug,
mainImage{
asset->{
_id,
url
},
alt
}
}`
)
.then((data) => setPost(data))
.catch(console.error);
}, []);
return (
<main className="bg-green-100 min-h-screen p-12">
<section className="container mx-auto">
<h1 className="text-5xl flex justify-center cursive">Blog Post Page</h1>
<h2 className="text-lg text-gray-600 flex justify-center mb-12">Welcome to my page of blog post</h2>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{postData && postData.map((post, index) => (
<article>
<Link to={"/post/" + post.slug.current} key={post.slug.current}>
<span className="block h-64 relative rounded shadow leading-snug bg-whtie border-l-8 border-green-400"
key={index}
>
<img
src={post.mainImage.asset.url}
alt={post.mainImage.alt}
className="w-full h-full rounded-r object-cover absolute"
/>
<span className="block relative h-full flex justify-end items-end pr-4 pb-4">
<h3 className="text-gray-800 text-lg font-bold px-3 py-4 bg-red-700 text-red-100 bg-opacity-75 rounded">
{post.title} </h3>
</span>
</span>
</Link>
</article>
))}
</div>
</section>
</main>
)
}
please help me ..
Thanks
Sanity is 'free' with a 'pay-as-you-go' costs… meaning that if you get DDOS you'll end up with a huge bill. That doesn't sound good! Nop sanity for me.
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 ?
Awesome explanations!
Can Somebody help me :((
I tried to download the @sanity/client from npm but it always give me an error :((