I noticed that empty form could be submitted. Is there any way to add recaptcha? Example would be very useful! :)

It seems that when you use React 18 and Strict Mode React Tooltip won't hide once you hover over it. E.G. when you hover over "FrontEnd Dev" in Skills and Experience section it won't hide {work.desc} .

It should work after you remove Strict Mode tag in your root.render method

ReactTooltip/react-tooltip#769

Just leaving this here if someone is following this tutorial using React 18

Hello,
a bug exist with sanity and the Experiences collection :
If you add 2 different pro experiences with 2 different year but, if they have the same name (when you add item) the tooltip in front give the same description for all experinces who have same name (developper full stack, front , ect ect )

Can you help me with the Navigation dots of the testimonial section if I click it on your site it is not being redirected to it. And it does not stay in its colour even if we go near it?
How should I fix it help me

I have followed the steps of the video but still getting this error/bug.

Edit

I have found the issue and fixed it. Thanks anyways

had an issue while mapping over testimonials Img tag. I think there has been one on the sanity backend schema.
I tried to map over testimonials.Imgur but it didn't work. so I debug the data responsive with :
{ {console.log(testimonials[0].imageUrl.asset._ref)} } and now it returns whats supposed to be returned

this is the what it returns now

I have a bug with the framer motion. My navbar when it opens with the nice animation at first has a flicker. Anyone had this problem before?

React Tooltip always render his content or empty element, is not on a hover.

Due to the new version of react-tooltip I change the import and the component:
import { Tooltip } from 'react-tooltip';

Any ideas?

hello the scroll should target the section id as well how can i do that with react

Messages are not posted to sanity and two errors are shown:

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

Object { response: {…}, statusCode: 403, responseBody: "{\n "error": {\n "description": "Mutation(s) failed with 1 error(s)",\n "items": [\n {\n "error": {\n "description": "Insufficient permissions; permission \"create\" required",\n "permission": "create",\n "type": "insufficientPermissionsError"\n },\n "index": 0\n }\n ],\n "type": "mutationError"\n }\n}", details: {…}, stack: "", … }
​
details: Object { description: "Mutation(s) failed with 1 error(s)", items: (1) […], type: "mutationError" }
​
message: "Mutation(s) failed with 1 error(s)"
​
name: "ClientError"
​
response: Object { url: "https://e3htzv4z.api.sanity.io/v2022-02-01/data/mutate/production?returnIds=true&returnDocuments=true&visibility=sync", method: "POST", statusCode: 403, … }
​
responseBody: "{\n "error": {\n "description": "Mutation(s) failed with 1 error(s)",\n "items": [\n {\n "error": {\n "description": "Insufficient permissions; permission \"create\" required",\n "permission": "create",\n "type": "insufficientPermissionsError"\n },\n "index": 0\n }\n ],\n "type": "mutationError"\n }\n}"
​
stack:
​
statusCode: 403

i just clone this project and run npm i, but when i start it its showing empty page, what is wrong?

Some error in the experience section of Skills.jsx file

If I replace fragment by div. and provide it with a key, then the error is gone, but a few functionalities don't work.

The Portfolio projects are not being removed from the sanity CMS even after being unpublished it still remains there could you help me with that.

When I click on navbar it's quite flickering on my system also tried with other browers and devices it's same problem

I keep receiving an error stating "Node Sass version 7.0.1 is incompatible with ^4.0.0".

The simple fix of uninstalling/installing node-sass is not working nor trying to install sass. Any advice would be super grateful!!

Thank you,
Lo

this two svg does not show in mobile/tablet devices . this is a very big problem because many recruiters use mobile and tab to view all proects

Hello Guys, I recently moved (or am still in the process of moving) to WSL on Windows for personal reasons.
I have successfully connected my Windows vs code to my Ubuntu WSL via the official plugin,
And I am running Node LTS version 18.16.0 which I installed via nvm on WSL Ubuntu.

The problem is when I run npm install in the sanity backend it works perfectly with no errors, but on the react frontend, it throws a lot of deprecation warnings, and finally lots of npm errors.
I plan to finish this project quickly to edit it to fit my use case.
Any help?

I have attached a copy of the errors in a txt file below
error.txt
I have also attached the logs
2023-05-23T22_12_23_193Z-debug-0.log

Kindly share solutions with me, I want to resume working on the project asap.

The current project doesn't allow emails in the contact form from .tech, .io or anything other than .com/.co.uk etc
Where can I find in the project how to add validation for alternatives to .com/.co.uk?

Any help appreciated!

'Uncaught TypeError: Cannot read properties of undefined (reading '0')'

I am not able to display the image using the imgURL property for the Testimonials section. As soon as I use this line :
<img src={urlFor(testimonials[currentIndex].imgURL)} alt={testimonials[currentIndex].name} />
I get this error :
Uncaught (in promise) Error: Unable to resolve image URL from source (undefined)

Nb: but I'm able to display the feedback, name and company properties from the same object so... I don't know what to do 😅

@adrianhajdin

I Create TimeLine of my work in sanity database of experience section. if i add 2022 first. After i will add 2018 it will goes on top of 2022. Next i add 2019 it will go top of 2018. i want to make it order-wise. how to do that ?

was following the tutorial from beginging step by step but got stuck at 2:03:00 where AppWrap was added to the Header and About section, worked perfectly on the video but decides to just go blank on mine(but keeps the cocial media icons and copyright). has anyone experienced this and how can i fix it

code before appwrap

react app before appwrap

code after appwrap

react app after appwrap

The above error occurred(displayed in the console) when I tried to integrate sanity bank-end with the react app. React app starts with a blank screen with no error in terminal. I am unable to debug the issue.

When I click on hamburger in mobile view it just opens the menu bar for fraction of seconds and after that it hides and when I click it again it doesn't work.

Can anyone help me with this issue.

When I upload any thing in the ABouts via Sanity it is not showing in the website.

This is the backend:

This is the client.js file:
`import { createClient } from '@sanity/client'
import imageUrlBuilder from '@sanity/image-url'

export const client = createClient({
projectId: process.env.SANITY_PROJECT_ID,
dataset: 'production',
apiVersion: '2022-02-01',
useCdn: true,
token: process.env.SANITY_PROJECT_TOKEN,
ignoreBrowserTokenWarning: true,
})

const builder = imageUrlBuilder(client)

export const urlFor = (source) => builder.image(source)

`

This is the About.jsx file:
`import React, {useState, useEffect} from 'react'
import { motion } from "framer-motion"
import { images } from '../../constants'

import {client, urlFor} from '../../client'

import './About.scss'

const About = () => {

const [abouts, setAbouts] = useState([])

useEffect(() => {
const query = '*[_type == "abouts"]'

client.fetch(query)
  .then((data) => {
    setAbouts(data)
  })

}, [])

return (
<>

I know that Good Design
means Good Business

  <div className='app__profiles'>
    {abouts.map((about, index) => (
      <motion.div
        whileInView={{ opacity: 1}}
        whileHover={{ scale: 1.1}}
        transition={{ duration: 0.5, type: 'tween'}}
        className='app__profile-item'
        key={about.title + index}
      >
        <img src={urlFor(about.imgUrl)} alt={about.title}/>
        <h2 className='bold-text' style={{ marginTop: 20}}>{about.title}</h2>
        <p className='p-text' style={{ marginTop: 10}}>{about.description}</p>

      </motion.div>
    ))}
  </div>
</>

)
}

export default About`

Hello,

I've been looking around for a fix to an issue others seem to be having regarding an error that states the imgurl is undefined. I tried different resolutions, the top one i tried involved changing the image schema name to imgUrl since we were previously using duplicate names as well as implemente new line of code:
.

instead of:

I am still getting this error:
ERROR
Cannot read properties of undefined (reading 'asset')
TypeError: Cannot read properties of undefined (reading 'asset')
at Testimonial (http://localhost:3000/static/js/bundle.js:1566:100)
at renderWithHooks (http://localhost:3000/static/js/bundle.js:23438:22)
at updateFunctionComponent (http://localhost:3000/static/js/bundle.js:26318:24)
at beginWork (http://localhost:3000/static/js/bundle.js:28030:20)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:13034:18)
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:13078:20)
at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:13135:35)
at beginWork$1 (http://localhost:3000/static/js/bundle.js:32999:11)
at performUnitOfWork (http://localhost:3000/static/js/bundle.js:32247:16)
at workLoopSync (http://localhost:3000/static/js/bundle.js:32170:9)
ERROR
Cannot read properties of undefined (reading 'asset')
TypeError: Cannot read properties of undefined (reading 'asset')
at Testimonial (http://localhost:3000/static/js/bundle.js:1566:100)
at renderWithHooks (http://localhost:3000/static/js/bundle.js:23438:22)
at updateFunctionComponent (http://localhost:3000/static/js/bundle.js:26318:24)
at beginWork (http://localhost:3000/static/js/bundle.js:28030:20)
at beginWork$1 (http://localhost:3000/static/js/bundle.js:32977:18)
at performUnitOfWork (http://localhost:3000/static/js/bundle.js:32247:16)
at workLoopSync (http://localhost:3000/static/js/bundle.js:32170:9)
at renderRootSync (http://localhost:3000/static/js/bundle.js:32143:11)
at performSyncWorkOnRoot (http://localhost:3000/static/js/bundle.js:31835:24)
at flushSyncCallbacks (http://localhost:3000/static/js/bundle.js:19871:26)

As opposed to the previous error i was getting previously from the video and src code:

Unable to resolve image URL from source (undefined)
at urlForImage (http://localhost:3000/static/js/bundle.js:2822:13)
at ImageUrlBuilder.url (http://localhost:3000/static/js/bundle.js:3231:14)
at ImageUrlBuilder.toString (http://localhost:3000/static/js/bundle.js:3235:19)
at testStringCoercion (http://localhost:3000/static/js/bundle.js:9547:17)
at checkAttributeStringCoercion (http://localhost:3000/static/js/bundle.js:9553:18)
at setValueForProperty (http://localhost:3000/static/js/bundle.js:10122:15)
at setInitialDOMProperties (http://localhost:3000/static/js/bundle.js:17860:11)
at setInitialProperties (http://localhost:3000/static/js/bundle.js:18035:7)
at finalizeInitialChildren (http://localhost:3000/static/js/bundle.js:18915:7)
at completeWork (http://localhost:3000/static/js/bundle.js:28527:21)

Please help

I tried to add links to the the social media icons in order to display my socials networks but it won't work...
Any help is welcomed 😊

Issue: Although sanity compiled successfully and is able to run on browser, I'm getting this error while setting up Schemas for Sanity. Should I be worried?

What I've tried: installed @babel/preset-env package

Hi everyone, could I please ask for assistance with the following issue?

I am at this section of the youtube tutorial.

Everything was working perfectly, but once I connected to Sanity, this website section doesn't show.

I have tried the following but nothing seems to work:

1. Checking that in my client.js I use 'projectId' and not 'projectID'
2. Instead of using 'process.env.REACT_APP_SANITY_PROJECT_ID' use the actual project ID. When I use 'process.env.REACT_APP_SANITY_PROJECT_ID' it shows a blank page. When I use the actual project ID I can see the website but the about us section is missing.

While following the tutorial the only thing I did that differed from the video was at 1:48:20 of the video where after he created the .env file he reloaded the application via ctrl c I am on a mac so in my terminal I used man kill instead.

Please find my code below:
.env

client.js

About.jsx

Was requesting for a installation procedure of all the tools in the projects to run the project on my Local Machine. Giving the steps in the ReadMe might come in handy.

If I remove work entirely from index.js and app.js my application works completely fine...Can some please help me troubleshoot what's the problem??

For the record, I even copied the Work.jsx directly from the code on github..Thanks!

Hi,
first of all, thank for your sharing .
I am trying to rebuild your application in angular :

but, when i try the contact form i get the following a 403 with the following message :

{"error":{"description":"the mutation(s) failed: Insufficient permissions; permission "create" required","items":[{"error":{"description":"Insufficient permissions; permission "create" required","permission":"create","type":"insufficientPermissionsError"},"index":0}],"type":"mutationError"}}

Do you have any idea ?

Best regards Sofiane.

useEffect(() => {
const query = '*[_type == "abouts"]'
client.fetch(query)
.then((data)=>{
setAbouts(data)
console.log(data)
})
}, [])

i am receiving an empty array and nothing displays

The steps in the video do not work with the latest version of Sanity, version 3.

i.e. It's no longer possible to follow the exact steps of the video's Sanity setup and result in getting the Sanity Server up and running with the schema displaying.

There's a new prompt to setup the project for TypeScript (yes/no ?). Need clarity on that.

The project uses a schema.js file inside /schemas/, but installing the latest Sanity generates index.js file, with different code to schema.js (excluding what gets added to pull in the project's other schemas files).

It would be great if this could be addressed or if I could get some help on a workaround as I would love to build this tutorial without roadblocks.

@adrianhajdin and team, I love your work! Thank you for investing into the community.

Even if I don't fill in the data the contact form gets submitted without showing any error.

import React, { useEffect, useState } from "react";
import { motion } from "framer-motion";

import { urlFor, client } from "../../client";

import "./About.scss";

const About = () => {
	const [abouts, setAbouts] = useState([]);

	useEffect(() => {
		const query = '*[_type == "abouts"]';
		client.fetch(query).then((data) => {
			setAbouts(data);
		});
	}, []);

	return (
		<>
			<h2 className="head-text">
				I Know That <span>Good Devlopment</span>
				<br /> Means <span>Good Business</span>
			</h2>

			<div className="app__profiles">
				{abouts.map((about, index) => (
					<motion.div
						whileInView={{ opacity: 1 }}
						whileHover={{ scale: 1.1 }}
						transition={{ duration: 0.5, type: "tween" }}
						className="app__profile-item"
						key={about.title + index}
					>
						<img src={urlFor(about.imgUrl)} alt="about.title" />
						<h2 className="bold-text" style={{ marginTop: 20 }}>
							{about.title}
						</h2>
						<p className="p-text" style={{ marginTop: 10 }}>
							{about.description}
						</p>
					</motion.div>
				))}
			</div>
		</>
	);
};

export default About;

I think the problem occurred when I added about in About Schema.

when i run npm start i get this Error getting cannot find module 'react ' Require stack: - C:\Users\User\AppData\Roaming\npm\node_modules\react-scripts\scripts\start.js

So I was getting an error in my client.js file that sanityClient is not exported from sanity/client. I figured that it was deprecated, so I used createClient instead of sanityClient:

`import { createClient } from '@sanity/client';
import { imageUrlBuilder } from '@sanity/image-url';

export const client = createClient({
projectId: process.env.REACT_APP_SANITY_PROJECT_ID,
dataset: 'production',
apiVersion: '2023-05-03',
useCdn: true,
token: process.env.REACT_APP_SANITY_TOKEN,
});

const builder = imageUrlBuilder(client);

export const urlFor = (source) => builder.image(source);`

But now I am getting a TypeError: Object(...) is not a function
And apparently its in node modules?

What do I do?

Can anyone help me?
I'm an hour into video and it wont even load a simple page. I get the following error.

Compiled with problems:

ERROR in ./src/App.js 6:0-39

Module not found: Error: Can't resolve './components/' in '/home/dan/Desktop/lake-portfolio/frontend_react/src'

i tried everything I can think of. even going to components/navbar/navbar.