CineSearcher Phase 2
You will be building this project as part of our React Course. Make sure you have completed the CineSearcher Phase 1 before you start this. You need to deploy the changes for Phase 2 as well, and follow the same GitHub logistics as before. In Phase 2, we added more features to the CineSearcher focusing on improving the view history, creating a favourites tab, and expanding the search functionality.
Resources: smile-cart repository, Setting up Smilecart Chapter, OMDb
Things you need to know: HTML, CSS, JS, Tailwind, React hooks, React query, React router DOM, Formik forms, Zustand
Task 01
Create Favourites Tab, to list the items set as favourite by the user.
Start by with placing the logo Cine Searcher on the top left in bold, using a slightly larger font size.
Style Cine in blue and Searcher in black.
Add two navigation links Home and Favourites to the right of the logo, with active tab styled in blue.
Add a container below the header to hold the list of movies, with sufficient spacing around the items.
Make sure the container allows vertical scrolling if there are many entries.
Give each list item a background color of
#f5f5f5with rounded corners and sufficient spacing for separation between items.Display the title of each movie in bold and align it to the left.
Place the rating on the right side of each list item. Use a smaller, gray font for the label Rating and slightly larger font for the actual score (8.3/10).
Task 02
Add a button with a star icon to the detailed movie view that allows users to add or remove a movie from their favourite list.
The button should also display a tooltip with the txt Add to Favourites when hovered over.
Style the same as per the image provided.
Task 03
Place a filter icon on the right side of the search bar aligning it vertically with the input field.
On clicking the filter icon, toggle a dropdown containing the filter options (year and type).
Style the filter dropdown with a white background, rounded corners, and a light shadow.
Include a close X icon in the top-right corner of the dropdown to allow users to close it without applying changes.
Add an input field labeled Year within the dropdown, allowing users to type a specific year and restricting input to numbers.
Add two checkboxes under a Type label for Movie and Series, allowing users to select either or both options.
Style selected checkboxes with a blue checkmark
#007bff, and set both checkboxes to checked by default.Capture values from the year input and type checkboxes when the user initiates a search, passing these as parameters in the search function.
Display the filtered search results on the page, clearing previous results and only showing items that match the selected year and type.
Task 04
Implement functionality to remove individual items from the view history.
Add the ability to clear all items from the view history.
More projects
These are some of the projects you'll build while learning.
