We've recently added the useLocalStorage hook, now it's time to implement it for the bookmarks. Ideally, we want to store the user's bookmarks in localStorage as a list of ids of movies and fetch once the user gets to the page. If there aren't any bookmarks, we should display at least a message saying so.

After some thoughts, it would probably be best practice to have a dedicated API endpoint for fetching a list of movies based on a list of ids.

We get this error on visiting /

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `Rating`. See https://reactjs.org/link/warning-keys for more information.
    at RatingIcon (http://localhost:3000/src/app/components/RatingIcon/RatingIcon.tsx:19:3)
    at Rating (http://localhost:3000/src/app/components/Rating/Rating.tsx:20:3)
    at div
    at section
    at article
    at Card (http://localhost:3000/src/app/components/Card/Card.tsx:21:3)
    at section
    at div
    at div
    at Home (http://localhost:3000/src/app/pages/Home/Home.tsx:98:41)
    at Route2 (http://localhost:3000/node_modules/.vite/chunk-ZAVVHJXD.js?v=b286ad33:1729:29)
    at Switch2 (http://localhost:3000/node_modules/.vite/chunk-ZAVVHJXD.js?v=b286ad33:1873:29)
    at Router2 (http://localhost:3000/node_modules/.vite/chunk-ZAVVHJXD.js?v=b286ad33:1455:30)
    at BrowserRouter2 (http://localhost:3000/node_modules/.vite/react-router-dom.js?v=b286ad33:54:35)
    at App

The error describes how the stack collapsed. More about that here

searchResult and setSearchResult imply that we already received results. Let's rename them to searchValue and setSearchValue

This shouldn't be done here in the component itself, but rather at least a level higher up

Saw that the project doesn't have a README. Maybe you find the time adding one.

Here is a very good template I used in one of my repos.

https://github.com/othneildrew/Best-README-Template

User Story

As a user
I want to have a profile
so I can have a centralized place for all my details

Description / Notes

details details details

Screenshot / Design

Acceptance Criteria

• Avatar
• Edit button
• etc.

Sometimes a component is exported right at the function declaration, sometimes at the end of the file.

We decided to have components and pages exported right at the function declaration.

<svg height="24" viewBox="0 0 24 24" width="24" {...propsNoStarIconProps}> the viewBox is hardcoded in the StarIcon.tsx, but can't be controlled through the Rating-component.

This forces pages to have extra elements just for styling

As demonstrated in the above picture, the images in Card aren't always the same width

Genre is required, but all is not a genre.
Our API-endpoint is not able to handle all
Link to discover API documentation
I think, that could be a problem. Or did I miss something!

Rename movie button to a more appropriate name. Maybe IconButton?