[CBulnes-FE-Task] - Search movie app #669
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Scaffolded app with Vite.
- Created directories.
- Added placeholder files for future development.
- Updated `README.md` file adding development plan.
- Installed dependencies: `react-router-dom`.
- Implemented routing with `SearchMoviesView` and `MovieDetailsView`.
- Configured routes in `App.tsx`.
- Added `jest` and `react-testing-library` for testing.
- Set up basic testing utilities.
- Installed dependecies: `styled-components`.
- Added global theme using `theme.ts`
- Created BaseMovieCard component to display movie details in a card format, reusable for MoviesGrid and MovieDetailsView. - Added Poster component for image rendering with fallback and lazy loading support. - Implemented tests for Poster component, ensuring proper image rendering, fallback behavior, and lazy loading functionality. - Added tests for BaseMovieCard component to verify correct rendering of movie details and interaction with Poster.
…ity functions, and testing updates
- created `MovieCard` component based on `BaseMovieCard` with added onClick functionality to be used in the `MoviesGrid`.
- created `MoviesGrid` component to display a list of movie cards.
- created unit tests for MovieCard and MoviesGrid components to ensure correct rendering and behavior.
- added data-testid to BaseMovieCard for easier testing.
- installed utility package for testing purposes and updated test configuration to use it.
- Created a `test-utils.tsx` file inside the `utils` folder to wrap components in the `ThemeProvider` for consistent test setup.
- Simplified test files by importing the custom render method to apply the theme.
- Improved test consistency by avoiding repetitive ThemeProvider wrapping in each test file.
- Created generic `Input` component to use in the SearchMovie.
- Created generic `Button` component.
- Wrote unit tests for input and button.
- Refactor BaseCard to use the compound component pattern for flexibility
- Allows displaying content in row or column layouts
- Update BaseCard tests to cover new behavior
- Update MovieCard to align with new BaseCard changes
- Improve test coverage for MovieCard in the search view
- Add MovieDetailsCard component for the movie details view
- Ensure tests validate all displayed movie details and interactions
- Create reusable Typography component for consistent text styling
- Installed axios to handle API requests.
- Created `apiClient.ts` to configure and export an Axios instance with default settings.
- Added tests for `apiClient` to ensure proper request handling and response interceptors.
- Implemented `movieService.ts` with functions to fetch movies and movie details, utilizing `apiClient`.
- Created tests for `movieService.ts` to mock API responses and ensure proper error handling.
- Configured environment variable handling for `process.env` to allow API keys and base URL configuration.
- Updated `SearchMoviesView` to fetch movies dynamically based on the search query.
- Updated `MovieDetailsView` to fetch and display movie details using API.
- Integrated response mapping helpers (`mapFetchMoviesResponse` and `mapFetchMovieDetailsResponse`) for clean transformation of API data.
- Implemented `getPosterPath` to generate full poster URLs or return a placeholder image if unavailable.
- Created `arrayToString` to convert arrays or object data (e.g., genres) into a formatted string.
- Updated relevant components to utilize these utilities, reducing duplication and improving readability.
- Added unit tests for `getPosterPath` and `arrayToString` to ensure correctness and edge case handling.
- Refactored existing tests to align with updated components and the new utilities.
- Added pagination support to fetch additional movie results.
- Implemented a "Load More" button to load subsequent pages of results.
- Updated useEffect to debounce input changes and reset pagination on new search.
- Added a separate effect to handle fetching movies on pagination state change.
- Extracted movie search logic into a custom hook (`useMovieSearch`) for better code organization and reusability.
- Refactored `SearchMoviesView` to use the `useMovieSearch` hook, improving readability and maintainability.
- Added tests for the `useMovieSearch` hook.
- Created a custom hook `useMovieDetails` for fetching and managing movie details state (loading, error, movie data).
- Refactored `MovieDetailsView` to use `useMovieDetails` for state management and API calls.
- Added unit tests for `useMovieDetails` to check for loading, error handling, and success cases.
…croll, and update useMovieSearch.
- Moved debounce logic into a standalone custom hook (useDebounce).
- Created a hook to handle infinite scroll using IntersectionObserver.
- Updated `useMovieSearch` and its test.
- Created tests for `useDebounce` and `useIntersectionObserver`.
- Addressed the issue where navigating back from the movie details view caused the search view to re-render.
…tching data, and connect with SearchMoviesView component
- Set up Redux store and moviesSlice for managing movies, loading states, and pagination.
- Create `fetchMoviesAsync` thunk for handling movie search API calls.
- Replace context API with Redux state management for movies, query, loading, error, and pagination.
- Add `movieSearchSlice`and `movieSearchThunk` tests.
- Implemented a loading spinner for better UX during data fetching.
- Added an ErrorBoundary to catch and handle errors in the app.
- Created an Error component to display user-friendly error messages.
- Extracted movie search logic from SearchMoviesView into a new custom hook `useMovieSearchRedux`.
- Simplified the component by delegating state management and data fetching to the custom hook.
- Improved code readability and reusability by encapsulating logic.
- Added project structure section to explain the organization of directories and files.
- Provided descriptions for key directories such as `components`, `contexts`, `hooks`, `redux`, `services`, and `pages`.
- Highlighted the modular and scalable approach to organizing the application.
- Improved readability and navigation for reviewers by including relevant explanations for state management and key decisions.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR implements a Movie Search Application as part of the Frontend Engineering Challenge. Below is a breakdown of the key features, approaches, and technologies used in the solution:
Features
Technologies
Highlights of the Solution
Project Structure
Included in the README to explain the organization of files and directories for better understanding of the codebase.
How to Review