final commit, cleared code, added screenshots

README.md

@@ -1,11 +1,14 @@
 # **React Movie Info App**
+
 <img align="right" src="https://media.giphy.com/media/du3J3cXyzhj75IOgvA/giphy.gif" width="100"/>
 
 ## Project Overview:
+
 My first React project - getting trending movies and movies info from api.
 The React Movie Info App is a web application designed to provide users with comprehensive movie information sourced from an external API. The primary goal of this project is to create a user-friendly interface for searching and exploring movie details, including cast, and reviews.
 
 ## Project Specifications:
+
 1. **Trending Movies:** Users can follow up best 20 trending movies nowadays.
 1. **Movie Search:** Users can search for movies by title, allowing for easy discovery of films they are interested in.
 1. **Movie Details:** The app provides detailed information about each movie, including its title, release year, genre, and an average score.
@@ -14,38 +17,54 @@ The React Movie Info App is a web application designed to provide users with com
 
 ## Key Features and Technologies Used:
 
-* **Front-End Framework:** React
-* **API Integration:** Utilizes a movie information API for data retrieval.
-* **Styling:** by Styled Component.
-* **React Router:** The heart of the application, enabling seamless navigation and dynamic routing.
-* **HashRouter with Routes and Route:** Employed to create a smooth and intuitive user experience.
-* **Link and NavLink Components:** Used for easy navigation and active link styling.
-* **URL Parameters:** Leveraged to access specific movie details and provide a tailored user experience.
-* **Nested Routes:** Implemented with SharedLayout and Outlet for organized content display.
-* **useNavigate Hook:** Enhanced navigation control for an engaging user experience.
-* **useSearchParams:** Enables dynamic searching and filtering of movie information.
-* **React.lazy and React Suspense:** Utilized for code splitting, ensuring efficient loading of app components.
+- **Front-End Framework:** React
+- **API Integration:** Utilizes a movie information API for data retrieval.
+- **Styling:** by Styled Component.
+- **React Router:** The heart of the application, enabling seamless navigation and dynamic routing.
+- **HashRouter with Routes and Route:** Employed to create a smooth and intuitive user experience.
+- **Link and NavLink Components:** Used for easy navigation and active link styling.
+- **URL Parameters:** Leveraged to access specific movie details and provide a tailored user experience.
+- **Nested Routes:** Implemented with SharedLayout and Outlet for organized content display.
+- **useNavigate Hook:** Enhanced navigation control for an engaging user experience.
+- **useSearchParams:** Enables dynamic searching and filtering of movie information.
+- **React.lazy and React Suspense:** Utilized for code splitting, ensuring efficient loading of app components.
 
 ## Project Purpose:
+
 The project serves both as a showcase of React development skills and as a practical tool for movie enthusiasts to quickly access movie-related information in one place.
 
+## Project Preview:
+
+### Screenshots:
+
+![React Movie Info App](./public/images/movies-screen1.jpg)
+_Caption for Screenshot 1 (Main Page Trending Movies)_
+
+![React Movie Info App](./public/images/movies-screen2.jpg)
+_Caption for Screenshot 2 (Search Movies Page)_
+
 ## Challenges Faced:
-* Implementing API integration to fetch movie data in real-time by axios.
-* Designing an intuitive and visually appealing user interface.
-* Handling error responses from the API gracefully to ensure a seamless user experience.
+
+- Implementing API integration to fetch movie data in real-time by axios.
+- Designing an intuitive and visually appealing user interface.
+- Handling error responses from the API gracefully to ensure a seamless user experience.
 
 ## Learning Outcomes:
+
 Through this project, I gained valuable experience in React, state management, API integration, and user interface design. It also reinforced my problem-solving skills and the importance of handling data asynchronously in web applications.
 
 ## Future Enhancements:
+
 While the current version of the app provides essential movie information, future enhancements could include user accounts, the ability to save favorite movies.
 
 ## Feedback:
+
 I welcome feedback and suggestions from users to improve the application's functionality and user experience.
 
 ## Thanks to **themoviedb.org** API for making this project possible!
 
 ## Languages and Tools:
+
 <div align="center">  
 
 <a href="https://en.wikipedia.org/wiki/HTML5" target="_blank"><img style="margin: 10px" src="https://profilinator.rishav.dev/skills-assets/html5-original-wordmark.svg" alt="HTML5" height="50" /></a>
@@ -56,7 +75,8 @@ I welcome feedback and suggestions from users to improve the application's funct
 <a href="https://www.figma.com/" target="_blank" rel="noreferrer"><img src="https://www.vectorlogo.zone/logos/figma/figma-icon.svg" alt="figma" width="40" height="40"/></a>
 </div>
 
-## Connect with me:  
+## Connect with me:
+
 <div align="center">
 <a href="https://linkedin.com/in/alex-smagin29" target="_blank">
 <img src=https://img.shields.io/badge/linkedin-%231E77B5.svg?&style=for-the-badge&logo=linkedin&logoColor=white alt=linkedin style="margin-bottom: 5px;" />
@@ -73,4 +93,4 @@ I welcome feedback and suggestions from users to improve the application's funct
 <a href="https://www.behance.net/a1126" target="_blank">
 <img src=https://img.shields.io/badge/behance-%23191919.svg?&style=for-the-badge&logo=behance&logoColor=white alt=behance style="margin-bottom: 5px;" />
 </a>  
-</div> 
+</div>

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "goit-react-hw-05-movies",
+  "name": "react-movie-info-app",
   "homepage": "https://alexandrbig1.github.io/movies-info",
   "version": "0.1.0",
   "private": true,