Hello Peter I found a little typo in the course code. In the SpeakerImage.js file, image url is pointing at speaker-${id}.jpg while all of the image titles start with upper case S.
P.S.
Great course, I'v learned a lot!

Hello Peter

There is a missing camel case for a className in this line, I can do a PR solving the problem if you want.

Great course so far by the way 😄

Hi Paul,

Thank you for the great contest you have shared online. I am going following along your course then i got stuck on the below error which i don't understand as i have mirrored your code. Can you help me spot where i made a mistake please?

The error message is cannot read properties of undefined reading "id"

Skill.js is equivalent to your speaker.js

import Image from "next/dist/client/image";
import { FaTimes, FaRegCalendarAlt, FaSchool,FaSpinner } from "react-icons/fa";
import styles from '../../styles/Home.module.scss'
//import { FaStar } from 'react-icons/fa';
import { AiFillStar , AiOutlineStar } from 'react-icons/ai'
import { useState, useContext } from 'react';
import { CourseFilterContext } from "../contexts/CourseFilterContext";
import { SkillProvider, SkillContext } from "../contexts/SkillContext";

function Course({ courseTitle, hours, level, year }) {
return (
<>

Course : {courseTitle}{" "}


Hours: {hours}


Level : {level}


Year : {year}

</>
);
}

function Courses() {
const { courseYear } = useContext(CourseFilterContext);
const { skillCard } = useContext(SkillContext);
const courses = skillCard.courses;
const level = skillCard.level;

return (
  <div className={styles.courseBox, "h-250"}>
    {courses
    .filter(function (course) {
      return course.year === courseYear;
    })
    .map(function (course) {
      return (
        <Course {...course} level={level} key={skillCard.courses.id} />
      )
    })
    }        
  </div>  
);

}

function SkillImage() {
const { skillCard: {id, skill} } = useContext(SkillContext);
return (

function SkillFavorite () {
const { skillCard, updateRecord } = useContext(SkillContext);
const [inTransition, setInTransition] = useState(false);

function doneCallBack () {
  setInTransition(false);
  console.log(`In SkillFavorite: doneCallBack  ${new Date().getMilliseconds()}`)
}
return (
  <div className={styles.icon}>
    <span onClick={function () {
      setInTransition(true);
      updateRecord(
        {
          ...skillCard, favorite: !skillCard.favorite,
        },
        doneCallBack
      )
      }}>
    { skillCard.favorite === false ?
    <AiFillStar fill="orange"/> : <AiOutlineStar fill="yellow"/>
    }{" "}
    Favorite{" "}
    { inTransition === true ? (
      <span><FaSpinner className="fa-spin" fill="orange"/></span>
    ): null}
    </span>
  </div>
)

}
function SkillDescription() {
const { skillCard } = useContext(SkillContext);
const { skill, description, school, } = skillCard;
return (

function SkillAction () {
return (

function Skill({ skillCard, updateRecord }) {
const {id, skill, courses, level, year} = skillCard;
const { showCourses } = useContext(CourseFilterContext);
return (

export default Skill;

@pkellner

Hey Peter Kellner,

There is an issue with my app while following you along in this course. It came up during "4- Building a React Web App and Refactoring into Components" module.

The issue is that I do some coding but the code changes don't reflect back in my running app. I have to continuously start and stop the app by "npm run dev" to see the app changing every time after changing the code.

I have put my code in the following repo:
https://github.com/iAmMuhammadZubair/Conference-Website/tree/master

Check this by running the app in your own machine.

Note: I have not added the node and next modules folder in the repo as they were very heavy-sized.

index.tsx?a3f0:359 Uncaught at eval (webpack-internal:///./src/components/SpeakersList.js:72:32)
at Array.filter ()
at SpeakersList (webpack-internal:///./src/components/SpeakersList.js:71:32)
at processChild (file:///Users/yakov/Repos/designreactcomponents/drc/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
at resolve (file:///Users/yakov/Repos/designreactcomponents/drc/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
at ReactDOMServerRenderer.render (file:///Users/yakov/Repos/designreactcomponents/drc/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
at ReactDOMServerRenderer.read (file:///Users/yakov/Repos/designreactcomponents/drc/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
at renderToString (file:///Users/yakov/Repos/designreactcomponents/drc/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
at Object.renderPage (file:///Users/yakov/Repos/designreactcomponents/drc/node_modules/next/dist/next-server/server/render.js:54:854)
at Function.getInitialProps (webpack-internal:///./node_modules/next/dist/pages/_document.js:211:19)
at Function.getInitialProps (webpack-internal:///./pages/_document.js:19:85)
at loadGetInitialProps (file:///Users/yakov/Repos/designreactcomponents/drc/node_modules/next/dist/next-server/lib/utils.js:5:101)
at renderToHTML (file:///Users/yakov/Repos/designreactcomponents/drc/node_modules/next/dist/next-server/server/render.js:54:1145)
at runMicrotasks ()
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async (file:///Users/yakov/Repos/designreactcomponents/drc/node_modules/next/dist/next-server/server/next-server.js:112:97)
getNodeError @ nodeStackFrames.js?aca3:40
eval @ index.tsx?a3f0:358
setTimeout (async)
_callee$ @ index.tsx?a3f0:344
tryCatch @ runtime.js?96cf:63
invoke @ runtime.js?96cf:294
eval @ runtime.js?96cf:119
asyncGeneratorStep @ asyncToGenerator.js?c973:3
_next @ asyncToGenerator.js?c973:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js?c973:13
_next @ asyncToGenerator.js?c973:25
eval @ asyncToGenerator.js?c973:32
eval @ asyncToGenerator.js?c973:21
_default @ index.js:450
eval @ next-dev.js?c2df:31
./node_modules/next/dist/client/next-dev.js @ main.js?ts=1633097814141:839
options.factory @ webpack.js?ts=1633097814141:685
webpack_require @ webpack.js?ts=1633097814141:37
webpack_exec @ main.js?ts=1633097814141:1335
(anonymous) @ main.js?ts=1633097814141:1336
webpackJsonpCallback @ webpack.js?ts=1633097814141:1265
(anonymous) @ main.js?ts=1633097814141:9
injectGlobalHook.js:1648 Fetch API cannot load webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/components/Overlay/Overlay.js. URL scheme "webpack-internal" is not supported.

injectGlobalHook.js:1648 Fetch API cannot load webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js. URL scheme "webpack-internal" is not supported.

Unhandled Runtime Error
Error: No router instance found.
You should only use "next/router" inside the client side of your app.

Source
.next\static\chunks\fallback\main.js (116:10) @ getRouter

114 | 'No router instance found.\n' +
115 | 'You should only use "next/router" inside the client side of your app.\n'

116 | throw new Error(message)
| ^
117 | }
118 | return singletonRouter.router
119 | }
Call Stack

When cloning this repo to windows you get an invalid path error.
error: invalid path '06-context-and-rest-api/clip-07-implementing-rest-put-post-delete-with-api-routes /SpeakerData.js'

looks like there might be a space at the end of the foldername "clip-07-implementing-rest-put-post-delete-with-api-routes ".

On Windows 10, I'm getting multiple instances of the warning, "Path too long." This occurs whether I clone the repository or download the .zip file and attempt to extract it.

Example error when attempting to clone the repo:

Example error when attempting .zip extraction: