jonasschmedtmann / ultimate-react-course

Starter files, final projects, and FAQ for my Ultimate React course

Course Material and FAQ for the Ultimate React Course

This branch of the repo contains starter files and final code for all sections and projects of the course, exactly as shown in the videos.

Use starter code to start each section, and final code to compare it with your own code whenever something doesn't work!

🚨 Please read the following Frequently Asked Questions (FAQ) carefully before starting the course 🚨

FAQ

Q1: How do I download the files?

A: If you just want to download the entire code, click the green button saying "Code", and then choose the "Download ZIP" option. If you can't see the button (on mobile), use this link instead.

Q2: I'm stuck! Where do I get help?

A: Have you tried to fix the problem on your own? Have you compared your code with the final code? Are you using the library versions as indicated in the course videos? If you failed fixing your problem, please post a detailed description of the problem to the Q&A area of that video over at Udemy, along with a link to a codesandbox containing your code.

Q3: Can I see a final version of the course projects?

A: Sure! Here you go:

• Pizza Menu (Components, props, JSX)
• Travel List (useState and state management)
• Eat-n-split (Practice project)
• usePopcorn (useEffect, data fetching, custom hooks)
• Classy weather (Class components)
• Quiz App (useReducer)
• WorldWise (React Router, context API, memo, useMemo, useCallback)
• Fast React Pizza (React Router data loading, Redux, Redux Toolkit, thunks, Tailwind CSS)
• The Wild Oasis (React Query, Styled Components, React Hook Form, Supabase, advanced compound component pattern, authentication, charts, dark mode, professional application planning and development)
• The Wild Oasis Website (Next.js "app" router, React Server Components, server actions, authentication with NextAuth)

Q4: What VSCode theme are you using?

A: I use One Monokai in this course. For the icons, I'm using Material Icon Theme.

Q5: Videos don't load, can you fix it?

A: Unfortunately, there is nothing I can do about it. The course is hosted on Udemy, and sometimes they have technical issues. Please just come back a bit later or contact their support team.

Q6: Videos are blurred / have low quality, can you fix it?

A: Please open video settings and change the quality from 'Auto' to another value, for example 720p. If that doesn't help, please contact the Udemy support team.

Q7: Are videos downloadable?

A: Videos used to be downloadable, but unfortunately, Udemy has disabled video downloads on all my courses in order to fight piracy. There is nothing I can do about this.

Q8: I want to put these projects in my portfolio. Is that allowed?

A: Absolutely! Just make sure you actually built them yourself by following the course, and that you understand what you did. What is not allowed is that you create your own course/videos/articles based on this course's content!

Q9: I love your courses and want to get updates on new ones. How?

A: First, you can subscribe to my email list at my website. Plus, I make important announcements on twitter @jonasschmedtman, so you should definitely follow me there 🔥

Q10: How do I get my certificate of completion?

A: A certificate of completion is provided by Udemy after you complete 100% of the course. After completing the course, just click on the "Your progress" indicator in the top right-hand corner of the course page. If you want to change your name on the certificate, please contact the Udemy support team.

Q11: Can you add subtitles in my language?

A: No. I provide professional English captions, but Udemy is responsible for subtitles in all other languages (automatic translations). So please contact the Udemy support team to request your own language.

Q12: Do you accept pull requests?

A: No, because this repository should contain the exact same code that is shown in the videos. However, feel free to add an issue if you found one.

ultimate-react-course's Issues

Chapter 10 video 119 Improving reusability with props

The StarRating component currently expects a function to be passed to the onSetRating prop. If this prop is not provided, the application throws an error when trying to execute onSetRating as it is undefined. The StarRating component should have a default behavior defined for onSetRating to avoid TypeError when the function is not provided. This will enhance the component's robustness and prevent potential runtime errors. I found this error for the movie list app in Star component. . Please check it and add this verificator for avoiding questions about it 😁

function handleRating(rating) { setRating(rating); if(onSetRating) onSetRating(rating); }

This should changed to overflow: hidden;

ultimate-react-course/05-travel-list/starter/index.css

Line 104 in 3e69024

overflow: scroll;

This should changed to overflow: hidden;

PropType validation error in CityList.jsx and CityItem.jsx in WorldWise project

If you are following and coding along, you might have come across this error yourself as well, i.e in the Implementing the Cities video.
When you try to pass the city prop to the CityItem.jsx component then you might have come up with this error where it is asking to specify the types of prop that you are passing.

country' is missing in props validation react/prop-types
7:22 error 'country.emoji' is missing in props validation react/prop-types
8:22 error 'country.emoji' is missing in props validation react/prop-types

It is turning out to be like this and for the time being, I have added prop types for each props being passed. If anyone has succesfully resolve this error. Please do leave any resources/ comment that could help me.

Thanks and regards

Using the "value" attribute instead of "checked" causes checkboxes to bug out.

I sorted the items by packed status, and the checkboxes weren't truly re-rendering. I changed the "value" attribute to the "checked" one and it worked perfectly.

Typo on slide 39 of theory-slides.pdf

Hi Jonas,

There is a typo on slide 39 from the PDF "theory-slides.pdf", where instead of "FOR SETTING UP A RECT PROJECT", it should be "REACT".

Thanks for building up such a wonderful course,
Cheers

Й

cloneElement in the modal is broken

Using cloneElement in the modal Open component causes a bug unexpectedly

return cloneElement(children, { onClick: () => open(opens) });

This code works
<```
Modal.Open opens="delete">
Delete Booking </Modal.Open>

**This below code doesnt not work,**

<Modal.Open opens="delete">
{status === "checked-out" && (
Delete Booking
)}
</Modal.Open>

**I get this error**
> Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports

However it had been working before I added the **ErrorBoundary library**

Incorrect Variable Mapping in Data Uploader File

Description

In the createBookings function of the data uploader file, there seems to be an issue with the mapping of guestId. The variable allGuestIds is being populated using guestsIds.map((cabin) => cabin.id), but it appears that cabin.id is incorrect in this context. It should be guestsIds.map((guest) => guest.id).

Steps to Reproduce:

1. Navigate to the createBookings function in the data uploader file.
2. Observe the line: const allGuestIds = guestsIds.map((cabin) => cabin.id);
3. Note that cabin.id is used to map guest IDs, which seems to be incorrect.

Expected Behavior:
The allGuestIds variable should be populated using the correct mapping, like so: const allGuestIds = guestsIds.map((guest) => guest.id);

usePopcorn styling issue

The usePorn has unneccessary scroll features that makes the design look ugly from start

Problem installing `npm i redux-devtools-extension`

Chapter 20, section 13 instructs to run npm i redux-devtools-extension.

This returned the following error on my machine however.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/redux
npm ERR!   redux@"^5.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer redux@"^3.1.0 || ^4.0.0" from [email protected]
npm ERR! node_modules/redux-devtools-extension
npm ERR!   redux-devtools-extension@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Replacing my package.json by the final version solved this issue.

bug in travel-list project

the CSS for packing-list doesn't work properly.

related to .list ul overflow: scroll I think

consloe Error

when i want to dispatch some action in my app i get an error A component is changing an uncontrolled input to be controlled

React Quiz App

The api request with questions in the Quiz app seems to be corrupted.

what 's The wild Oasis project 's password and account?

I start the wild Oasis project in my localhost:5000 port , but I don't know what's the login account and password .

Worldwise Project

Css files are there..but css is not working in my project

Eat-n-Split CSS starter file incomplete

The CSS file for eat-nsplit appears to be incomplete, no style defined for img or h3?

[07-usepopcorn]Issue with event listener cleanup in useEffect

file: app-v3.js
line-179,180

The code snippet provided seems to have a problem with the cleanup of the event listener in the useEffect hook. In the cleanup function, the event listener is added again instead of being removed using removeEventListener. This can lead to unexpected behavior and potential memory leaks.

Proposed Solution: Modify the cleanup function in the useEffect hook to properly remove the event listener using removeEventListener. Also, include inputEl.current in the dependency array to handle changes to inputEl.current correctly.

Error Fetching Questions in Quiz App

The API request for questions in the Quiz app is corrupted, causing an error message: "There was an error fetching questions."

Incomplete styling of "Go back" button in <PageNotFound /> (the-wild-oasis project)

The component currently includes a button, but Instead of using a custom component, a plain element is used, resulting in an inconsistent button appearance.

lesson 36 pizza image is not loaded

Follow code in lesson 36 and browser does not display any images

lesson code:

fix:
<img
src={process.env.PUBLIC_URL + "pizzas/spinaci.jpg"}
alt="Pizza spinaci"
/>

The highScore also resets when we press the reset button

In the React Quiz App:

Considering that the highscore should persist even after user wants to restart

usePopcorn starter file fix

ultimate-react-course/07-usepopcorn/starter/index.css

Line 141 in 3e69024

overflow: scroll;

ultimate-react-course/07-usepopcorn/starter/index.css

Line 57 in 3e69024

overflow: scroll;

The above two line should be deleted .
Current preview:

css bug in travel-list

Hi, I'm following the tutorial on the Udemy. The css file gives me a large white space down there. Everything above the white space is html element. So I suspect height: 100vh doesn't work properly. But I'm not a css expert and cannot figure out how to fix it. I tried on Firefox but having the same issue.

AppLayout.jsx missing from starter files

WorldWise - Instructed to overwrite pages folder but new pages in starter does not include AppLayout.jsx

Production Router issue

The production build of the wlld-oasis project is not routing properly. When the user clicks on the dashboard, the app routes to page-not-found page but in development, the app behaves normally.

IMAGES NOT BEING DISPLAYED/LOADED IN FAST-REACT-PIZZA PROJECT

Today as I was continuing with the fast-react-pizza project, when navigating to the menu page the pizza data is loaded but the images are not.

Quokka.js cis been not supported

const book = getBook(2);

const title =book.title;
title; The Cyberiad;

#12 finding bug in section 3 and Quokka.js cant worked and they cant be compiled

17-the-wild-oasis starter file fix

src -> features -> settings-. UpdateSettingsForm.jsx needs to be hollowed out.

Zip file doesnt have any content inside

after i download the zip file i am not able to extract the items inside because it keeps saying there is no content inside it