CommunityOfCoders / CommunityOfCoders/WebGenesis

Movie Night Planner

Open
#25 0 comments 0 reactions 0 assignees View on GitHub
Hard Node + Express React
Dominant language
HTML
Stars
10
Forks
77
PR merge metrics
No merged PRs in 30d

Description

# 🎬 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.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.