Week 9 – Movie Project – Sofia & Nathalie #48

ohitsnathalie · 2024-04-06T12:36:59Z

Netlify link

https://nathalies-sofias-project-movies.netlify.app/

Collaborators

[sofia32057]

HIPPIEKICK

Good job with this project Sofia & Nathalie! It looks good, it works well - so be proud ⭐

HIPPIEKICK · 2024-04-10T12:11:56Z

src/App.jsx

 export const App = () => {
-  return <div>Find me in src/app.jsx!</div>;
-};
+	return (


It's wonky indentation again 😞 Please ask a question for Q&A or on Stack Overflow if needed

Because it makes your code very hard to read 😅

HIPPIEKICK · 2024-04-10T12:12:30Z

src/App.jsx

-  return <div>Find me in src/app.jsx!</div>;
-};
+	return (
+		<>


Do you need the fragment? 👀

HIPPIEKICK · 2024-04-10T12:13:42Z

src/components/details/Details.css

+  color: white;
+  display: flex;
+  flex-wrap: wrap;
+  /* align-items: flex-end;


Remove unused code

HIPPIEKICK · 2024-04-10T12:14:49Z

src/components/details/Details.jsx

+  useEffect(() => {
+    const fetchDetails = async () => {
+      try {
+        const response = await fetch(
+          `https://api.themoviedb.org/3/movie/${movie.slug}?api_key=${API_KEY}&language=${API_LANG}`
+        )
+        if (!response.ok) {
+          throw Error("Something wrong with the fetch")
+        }
+        const data = await response.json()
+        setResults(data)
+      } catch (error) {
+        console.error("Error", error)
+        setResults([])
+      }
+    }
+
+    fetchDetails()
+  }, [])


Could also be written as:

const fetchDetails = async () => { try { const response = await fetch( `https://api.themoviedb.org/3/movie/${movie.slug}?api_key=${API_KEY}&language=${API_LANG}` ) if (!response.ok) { throw Error("Something wrong with the fetch") } const data = await response.json() setResults(data) } catch (error) { console.error("Error", error) setResults([]) } } useEffect(() => { fetchDetails() }, [])

HIPPIEKICK · 2024-04-10T12:15:34Z

src/components/details/Details.jsx

+                <GenreList
+                  genreArray={results.genres}
+                  n={false}


Ohh, nice! ⭐

HIPPIEKICK · 2024-04-10T12:18:44Z

src/components/footer/Footer.jsx

@@ -0,0 +1,29 @@
+import "./Footer.css"
+
+export const Footer = () => {


Very nice idea with a footer! What do you think about scaling it down a bit, maybe make your names links to make the text a bit shorter? And maybe aligning it with the rest of the content? Aaand potentially making it stand out more from the rest of the page, e.g. changing the background color to show that it doesn't have to do with the movies per se

I second that :)

HIPPIEKICK · 2024-04-10T12:19:15Z

src/components/genres/Genres.jsx

+  )
+
+  return (
+    <>


This fragment is not needed, since the article is wrapping it all

HIPPIEKICK · 2024-04-10T12:19:43Z

src/components/header/Header.jsx

+export const Header = () => {
+  return (
+    <header>
+      <nav>
+        <NavLink
+          to="/"
+          className="home">
+          HOME ›
+        </NavLink>
+      </nav>
+    </header>
+  )
+}


Is this component needed when you have the back button on all movie pages? 👀

HIPPIEKICK · 2024-04-10T12:20:48Z

src/components/listing/Listing.jsx

+				)}
+			</section>
+			<div className='load-more-wrapper'>
+				<button id='load-more-btn' onClick={loadMore}>


kathinka

Really good job! you guys finished the project with all of the requirements and then some! 🥇 Not easy to find something to improve here but I have some suggestions, who you could consider.

it was really nice to see all the different filtering, it really made the experience looking for a movie to see so much better. maybe include some more space for the different categories on mobile though as they ca be hard to click if there is many and the resolution is high.

now Im off to popping some popcorn, and watching a movie - btw: nice touch on the 404 page 💯

kathinka · 2024-04-10T15:52:12Z

src/data/api.jsx

-        method: "GET",
-        headers: {
-          accept: "application/json",
-          Authorization: "Bearer 581a97ea9ebd9cf581e85b49251999f8",


Maybe delete the history in github so you key is not out in the open

It's not the active key :)

kathinka · 2024-04-10T15:55:12Z

src/components/header/Header.jsx

+        <NavLink
+          to="/"
+          className="home">
+          HOME ›


Maybe remove one of the home buttons?

kathinka · 2024-04-10T15:56:46Z

src/components/details/Details.jsx

+            <div className="back-btn-wrapper">
+              <Link to={"/"}>
+                <img
+                  className="back-button"


stick to either this one or the other one. this seemes a bit more styled so maybe just keep this one?

kathinka · 2024-04-10T15:57:31Z

src/components/details/Details.jsx

-	const POSTER_URL = "https://image.tmdb.org/t/p"
+  const movie = useParams()
+  const [results, setResults] = useState()
+  const API_KEY = import.meta.env.VITE_DBAPI_KEY


nice hiding that key on the client side :)

kathinka · 2024-04-10T15:59:51Z

src/components/details/Details.css

-	filter: drop-shadow(0 0 0.4rem black);
+  width: 35px;
+  height: 35px;
+  filter: drop-shadow(0 0 0.4rem black);


this shadow is a bit wonky -(square shadow on a round object) maybe use a svg instead to avoid this? :)

kathinka · 2024-04-10T16:05:52Z

src/components/details/Details.css

-	font-size: 0.875rem;
-	border-radius: 3px;
-	font-style: italic;
+  background-color: rgba(0, 0, 0, 0.4);


nice with the dark background so its easier to read :)

kathinka · 2024-04-10T16:06:34Z

src/components/details/Details.css

-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
+  padding: 1rem 1rem 0 1rem;


maybe add some more contrast here as well to improve readability?

kathinka · 2024-04-10T16:47:44Z

its true, its your bearer token, but i think you want to hide that too. ons. 10. apr. 2024 kl. 18:27 skrev sofia ***@***.***>:

…

***@***.**** commented on this pull request. ------------------------------ In src/data/api.jsx <#48 (comment)> : > @@ -1,21 +0,0 @@ -export const api = () => { - { - const fetchGenres = () => { - const options = { - method: "GET", - headers: { - accept: "application/json", - Authorization: "Bearer 581a97ea9ebd9cf581e85b49251999f8", It's not the active key :) — Reply to this email directly, view it on GitHub <#48 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABBHIX4B7GQRILHAF4QE533Y4VR7PAVCNFSM6AAAAABF2NFUZ2VHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMYTSOJSGE4TAMRTHA> . You are receiving this because you commented.Message ID: ***@***.***>

sofia32057 and others added 30 commits March 31, 2024 16:32

First commit - Components and rounting created, listing data fetched

407450c

Update - fetch movie details

e0acfcb

Styling

1e73d46

Fix footer css error

ae8f1a6

fixed movie poster size

075f5b2

Basic styling

8ec80fb

load more button function

a241654

fixing the key

f9731d5

Basic styling

9f55ef8

Merge conflicts

43b5ea3

styling on details page

6ed880b

change header and add favicon

9ae7e62

Update - changes to movie fetch

ea6b889

Merge ft-genres

0418f01

Bug fix - load more

c7ea087

add back button

3fe9f6a

button only visible on tablet and desktop

6925ed1

Update - genre routed with filtered listing

10bd019

Bugfix, error import

a868f01

styling load more button

291bc20

Merge branch 'buttons'

01b7308

changed buttons position and changed API key

b0cbcd4

Update - hide add env and redirect files

81f553f

Merge with nathalies changes

034702f

added runtime to detail page

41fe3ab

Update - added genres to details page

5b6e3a2

Update - genre list wrap mobile

0ec0cd8

fixed 404 and added styling to it

c0380bc

Merge branch 'buttons'

6d17b9a

change README

b9fb27a

HIPPIEKICK approved these changes Apr 10, 2024

View reviewed changes

kathinka approved these changes Apr 10, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Week 9 – Movie Project – Sofia & Nathalie #48

Week 9 – Movie Project – Sofia & Nathalie #48

ohitsnathalie commented Apr 6, 2024

HIPPIEKICK left a comment

HIPPIEKICK Apr 10, 2024

HIPPIEKICK Apr 10, 2024

HIPPIEKICK Apr 10, 2024

HIPPIEKICK Apr 10, 2024

HIPPIEKICK Apr 10, 2024

HIPPIEKICK Apr 10, 2024

HIPPIEKICK Apr 10, 2024

kathinka Apr 10, 2024

HIPPIEKICK Apr 10, 2024

HIPPIEKICK Apr 10, 2024

HIPPIEKICK Apr 10, 2024

kathinka left a comment

kathinka Apr 10, 2024

sofia32057 Apr 10, 2024

kathinka Apr 10, 2024

kathinka Apr 10, 2024

kathinka Apr 10, 2024

kathinka Apr 10, 2024

kathinka Apr 10, 2024

kathinka Apr 10, 2024

kathinka commented Apr 10, 2024 via email

		@@ -0,0 +1,29 @@
		import "./Footer.css"

		export const Footer = () => {

Week 9 – Movie Project – Sofia & Nathalie #48

Are you sure you want to change the base?

Week 9 – Movie Project – Sofia & Nathalie #48

Conversation

ohitsnathalie commented Apr 6, 2024

Netlify link

Collaborators

HIPPIEKICK left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kathinka left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kathinka commented Apr 10, 2024 via email