Let's put your knowledge to the test by building a simple application called CineSearcher. This application will allow users to search for movies and view their details. Once your application is ready, deploy it using Vercel.
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
Fork the smile-cart repository to begin working on the project.
Set up Tailwind and NeetoUI following the instructions provided in the Setting up Smilecart chapter given in the resources.
Using NeetoUI components is required for this task, so be sure to incorporate the components as needed.
Obtain an API key from OMDb as the resources for movie and series data will be the Open Movie Database (OMDb).
Create an account on OMDb and select the Free account type to get your API key.
After obtaining your API key, add this to your .env
file in the root of your project.
You need to track your commits and changes in your GitHub repository. To get started with setting up your repository, first create a new repository in your GitHub account and name it CineSearcher
. Once that's done, you'll need to set up your local repository. To do this, open your terminal and run git init
in your project directory to initialize the local repository. This step helps track all the changes you make in your code.
Before you begin coding, take some time to thoroughly review the project requirements and create GitHub issues for each task you plan to work on. Each task should have its own GitHub issue, and these issues should be written in the future tense. For example, if you're working on a feature to add a search bar, then raise a GitHub issue titled Add search bar. This helps you stay organized and track what needs to be done.
Next, when you're ready to start working on a task, you'll need to create a branch. Branches are used to separate your work from the main codebase, making it easier to manage different features. Branch names should be written in the future tense and follow a simple format, like this: <issue_number>-add-search-bar
. This way, you can easily link each branch to the relevant GitHub issue.
To create a new branch, run the command git checkout -b <issue_number>-add-search-bar
. This creates and switches you to a new branch.
When you're making changes, it's important to commit them regularly. A good rule of thumb is to make small, logical commits. Instead of committing all your changes for a task in a single commit, break your work into smaller parts and commit after completing each part. This helps make your progress easier to follow. Always use meaningful commit messages, such as Added CSS styling for the search bar or Fixed search bar flicker issue. Use past tense and avoid vague messages like Completed first part.
Once you've made your changes and committed them to the branch, you'll need to create a Pull Request (PR). A PR is a request to merge your changes into the main branch. To create the PR, first push your branch to GitHub by running the command git push origin <issue_number>-add-search-bar
.
After pushing the branch, go to your GitHub repository, where you should see a prompt to create a Pull Request for the branch you've just pushed. Click the Compare & Pull Request
button, add a title and description for the PR. When you write PR titles, use the past tense. For example, Added movie card or Fixed re-rendering issue of the view history component. In the PR description, add Fixes #<issue_number>
to automatically close the issue when the PR is merged.
Finally, when you're working with branches, it's best to always create a new branch from the main branch for each new task. This ensures that each branch is based on the most up-to-date version of the main codebase. Once your PR is merged into the main branch, start a new branch for the next task, rather than branching off from previous task branches.
Add an input field where users can type the name of a movie or series.
Display a list of movies based on the search query.
Center the search bar at the top with a white background, light gray border #ddd
, rounded corners, and sufficient spacing as per the layout and add a light gray search icon inside, aligned with the text.
Create a responsive grid layout for movie cards, with four columns on large screens and fewer on smaller screens, adding sufficient spacing between cards.
Style each movie card with a white background, rounded corners, a subtle box-shadow and sufficient spacing.
Place the movie poster image at the top of each card.
Below the image, display the movie title.
Add the text Movie • Year below the title with a light gray font with slight spacing below the title.
Place a View details button at the bottom of each card, using a bold blue font #4a90e2
, underlined by default with a darker blue background.
Set the page background to a very light gray #f5f5f5
.
Center-align the entire content container and add top and bottom spacing to separate the search bar, grid, and other sections.
Implement pagination for the movie list if it exceeds the screen space.
The input field should allow users to start typing and focus automatically by pressing the "/" key to enhance the user experience.
Ensure that the search query is reflected in the URL as query parameters.
Implement debouncing on the search input to prevent excessive API calls as the user types.
Display a loading spinner while the search request is being processed.
If a movie does not return an image, provide a fallback image.
Display error responses like Too many results or Movie not found from the OMDb API in a toastr.
When a user clicks on a movie or series from the search results, you should display the details of that specific title in the movie details view.
For the movie details view, create a centered modal container with a white background, rounded corners, box-shadow and sufficient spacing as per the layout.
Add a Close Icon X at the top-right corner of the modal, styled with a light gray color. It should be clickable and closes the modal when pressed.
Display the Movie Title at the top-left in a bold, large font size.
Add Genre Tags below the title, styled as small pill-shaped elements with a light gray background and slightly rounded corners.
Insert the Movie Poster Image on the left side of the modal with a light border-radius.
If the selected movie or series does not have an image, display a fallback image.
Add a Movie Description to the right of the image, in a lighter gray color, with sufficient line spacing.
In separate lines below the description, display additional movie details like:
Director
Actors
Box Office
Year
Runtime
Language
Rated
Adjust Modal Positioning and Size to be responsive; center it horizontally and vertically on larger screens.
Make sure to show a loading spinner while the movie details are being fetched to indicate that the content is loading.
To create a view history component as shown in the image start with placing a centered, bold title at the top with the text View history.
Add a scrollable container to hold the history items, allowing vertical scrolling if there are many entries, with sufficient spacing as per the layout.
Give each history item a background color of #E4E4F8
, rounded background and sufficient spacing to create separation.
For the active or selected item, use a background color of #2f62ff
, with white text.
Align the text within each item to the center.
Place it on the right side of the page as shown in the image.
When a user clicks on a movie or series, add the name of that movie or series to the history list.
If a user clicks on a movie or series that has already been clicked before, scroll the history component to bring that specific element into view.
Highlight the last selected movie or series in the history list to indicate it as the most recent selection.
These are some of the projects you'll build while learning.