Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Movie Night Planner

Abierto
  • ¿Algo no está bien?
#25 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
5/5
Tiempo estimado
Más de una semana
Aptitud para principiantes
25/100
Tipo de issue
Nueva funcionalidad
Claridad
Necesita aclaración
Estado de actividad
Estancado
Stack tecnológico
css, react
Área
api, frontend, web-dev

Línea de trabajo

No se nombran archivos, pruebas ni puntos de entrada. Empieza inspeccionando la estructura del repositorio y la configuración existente de React; después, determina cómo deberían integrarse la configuración y el acceso a la OMDB API en el proyecto. La tarea estará terminada cuando una interfaz responsive de búsqueda de películas admita los filtros solicitados, muestre tarjetas de películas e informe de los resultados vacíos o de los errores de la API.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Hard Node + Express React

🎬 Movie Night Planner 🍿

📜 Description

The Movie Night Planner would be web application that will helps users find movie suggestions based on selected filters such as genre & year. It should fetch movie data using the OMDB API and displays results dynamically in a visually appealing format. Users can filter movies by genre, release year, and actor to help decide on a movie for their next movie night.

🛠️ Task Breakdown

1. Project Structure:
  • Set up a basic directory structure.
  • Install dependencies and make required configuration files.
2. UI & UX:
  • Create the user interface with dropdowns for genre, input for the year, actor search, or other parameters as desired.
  • Add a button to trigger the movie search and a section to display the results.
  • Style the app using CSS for a clean and intuitive user interface.
  • Ensure responsiveness and readability across devices.
3. API Integration:
  • Fetch movie data from the OMDB API based on user-selected filters.
  • Handle dynamic filtering based on genre, year, language, release year, etc.
4. Display Movie Results Dynamically:
  • Dynamically create movie cards showing title, poster, short description, etc.
5. Test the Application:
  • Test the functionality by selecting different filters and ensuring the results are properly displayed.

✅ Outcomes

The application should allow users to:

  • Select a movie genre from a dropdown list.
  • Input a year to filter movies by release year.
  • Enter an actor's name to search for movies they have appeared in.
  • Get the movie language from user input.
  • Click the "Find Movies" button to trigger the search.

The movie results should:

  • Display a list of movie cards.
  • Each movie card should show a poster image, title, and short description.
  • The movie results should be updated based on the filters applied (genre, year, actor).
  • Display an error message if no movies are found or if there is an issue with the API request.

(Optional: Each movie card should include a "View More" button linking to the movie's IMDb page.)

🧑‍💻 Tech Stack

  • React
  • OMBD API
  • Axios

🔧 Additional Notes

  • Pagination can be implemented to display results across multiple pages.
  • The app could be enhanced by adding more filters like movie ratings, popularity, and more.

🎯 Conclusion

The Movie Night Planner project demonstrates how to fetch and display dynamic data, manage user input, and create a user-friendly interface using basic web technologies. With additional features like pagination, better error handling, and more filtering options, this app can be enhanced into a more robust tool for movie discovery.

Lenguaje dominante
HTML
Estrellas
10
Forks
77
Sin PR fusionados en 30 d

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de CommunityOfCoders/WebGenesis

Todos los issues de CommunityOfCoders/WebGenesis

Issues similares

Más issues de Backend & API Design

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.