Project movies! #319
Project movies! #319
Conversation
There was a problem hiding this comment.
Good job, the page looks great. You definitely gave it your personal touch. You modified the design slightly, so extra points for your creativity! Also, all works cool with refreshing the page (when on the details page) and with the not found page.
This review was done by @smirrebinx Michelle Wegler and Maja Zimnoch
|
|
||
| Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. | ||
| ✓ Pair-programming |
There was a problem hiding this comment.
It would be nice to read more about the topic for the project (movies) + your information about pair programming :)
|
|
||
| Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? | ||
| ✓ How to pass information such as product ids, or blog post titles in the URL and pick this up in React router to load dynamic content. |
There was a problem hiding this comment.
We'd suggest writing more about the difficulties of the project, even as keywords, so you can remember it later on when you are going through your project (for example during the recruitment processes).
| @@ -13,7 +12,8 @@ | |||
| work correctly both with client-side routing and a non-root public URL. | |||
| Learn how to configure a non-root public URL by running `npm run build`. | |||
| --> | |||
| <title>Technigo React App</title> | |||
| <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> | |||
| <Route path="/" element={<List />} /> | ||
| <Route path="/details/:movieId" element={<Details />} /> | ||
| <Route path="/404" element={<NotFound />} /> | ||
| <Route path="*" element={<Navigate to="/404" />} /> |
There was a problem hiding this comment.
Nice that you added the not found page :) And it works great.
| navigate(-1); | ||
| }; | ||
|
|
||
| const API_URL = `https://api.themoviedb.org/3/movie/${params.movieId}?api_key=dfb43b39df4efba7f1f4678ddc567fa1&language=en-US&page=1`; |
There was a problem hiding this comment.
It's nice that you managed to make it work with the variable API_URL
| <div className="movie-item-info"> | ||
| <h2>{movie.title}</h2> | ||
| <p>⭐️ {Math.round(movie.vote_average * 10) / 10} on IMDB</p> | ||
| <span className="released">Release date: {movie.release_date}</span> |
There was a problem hiding this comment.
To have the date written in a nicer format, you can check a 'moment' node module.
| .finally(() => setIsLoading(false)); | ||
| }, [API_URL]); | ||
|
|
||
| if (isLoading) { |
There was a problem hiding this comment.
We wonder why you used the Loading component only for the Details page.
| <div className="movie-list"> | ||
| {movieList.map((movie) => { | ||
| return ( | ||
| <NavLink className="movie-item" key={movie.id} to={`/details/${movie.id}`}> |
There was a problem hiding this comment.
What made you use NavLink instead of Links?
| @@ -1,13 +1,155 @@ | |||
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); | |||
| .truncated { | ||
| overflow: hidden; | ||
| white-space: nowrap; | ||
| text-overflow: ellipsis; |
There was a problem hiding this comment.
Thank you for using this, interesting property! Is it for the text of the description of the movie?
https://glistening-tiramisu-f31c45.netlify.app/