Giter VIP home page Giter VIP logo

alexandrbig1 / movies-info Goto Github PK

View Code? Open in Web Editor NEW
2.0 1.0 1.0 7.81 MB

A React-based web application that allows users to search for and explore movie information, including details about the cast, and reviews. Built with React and integrated with an external movie information API.

Home Page: https://alexandrbig1.github.io/movies-info/

License: MIT License

HTML 5.78% JavaScript 94.22%
backend computerscience css3 frontend html5 javascript js react react-components react-hooks

movies-info's Introduction

React Movie Info App

GitHub last commit GitHub license React Axios Styled Components React Icons

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.
  2. Movie Search: Users can search for movies by title, allowing for easy discovery of films they are interested in.
  3. Movie Details: The app provides detailed information about each movie, including its title, release year, genre, and an average score.
  4. Cast: Users can explore the actors involved in the making of each movie.
  5. Reviews: Users can check all the reviews lefting about movies.

Key Features and Technologies Used

  • Front-End Framework: Alt text
  • Styling: Alt text
  • API Integration: Utilizes a movie information API for data retrieval.
  • Alt text for making API requests
  • 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 Caption for Screenshot 1 (Main Page Trending Movies)

React Movie Info App 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.

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.

Contributing

If you're interested in contributing to the React Movie Info App, follow these steps:

  1. Fork the repository.
  2. Clone your forked repository to your local machine.
    git clone https://github.com/your-username/movies-info.git
  3. Create a new branch for your feature or bug fix.
    git checkout -b feature/your-feature-name
  4. Make your changes and commit them with a descriptive commit message.
    git add .
    git commit -m "Add your descriptive commit message here"
  5. Push your changes to your forked repository.
    git push origin feature/your-feature-name
  6. Open a pull request (PR) from your forked repository to the main repository's main branch.

Contribution Guidelines

  • Ensure your code follows the existing coding style.
  • Include clear and concise documentation for any new features.
  • Test your changes thoroughly before creating a pull request.

Issues

If you encounter any issues or have suggestions, please open an issue.

License

This project is licensed under the MIT License.

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

Connect with me:

movies-info's People

Contributors

alexandrbig1 avatar jayantghadge avatar

Stargazers

 avatar  avatar

Watchers

 avatar

Forkers

jayantghadge

movies-info's Issues

Reduced Movie Poster Heights for Improved Homepage Display

Issue Description:

I noticed that the styling for images on mobile screens could be improved in your project. Improvements can be made to the movie poster images on the home page, adjusting their heights to ensure a more optimized display.

Proposed Changes:

  • Adjust the height of movie poster images to improve their fit within their respective containers.
  • Maintain the aspect ratio of the original images for visual consistency.

Request for Permission:

I'm planning to implement the following changes. Before creating a pull request, I'd like to get your approval.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.