Film Haven

Film Haven is a movie database website project built using React and Tailwind. It provides users with various features, including searching for movies in the database and accessing information about popular, top-rated, and upcoming movies.

Features

• Movie Search: Users can search for any movie within our extensive database. Simply enter the movie title in the search bar, and the website will display relevant results.

• Popular Movies: Explore a collection of popular movies, showcasing trending and highly acclaimed films.

• Top Rated Movies: Access a curated list of top-rated movies, allowing you to discover critically acclaimed films.

• Upcoming Movies: Stay updated with the latest releases by browsing through upcoming movies, enabling you to plan your movie-watching schedule in advance.

• Light/Dark Mode Toggle: Users can switch from light to dark mode.

Technology Used

Film Haven is developed using the following technologies:

• React: A JavaScript library for building user interfaces, providing a component-based approach to web development.

• Tailwind: A utility-first CSS framework that allows for quick and responsive styling of web components.

What Did I Learn

During the development of Film Haven, I learned these concepts:

• React components: Learn how to create reusable components to build a modular and scalable application structure.

• React hooks: Utilize hooks such as useState, useEffect, useParams, and custom hooks like useFetch to manage state, handle side effects, and interact with the API.

• Fetching data from an API: Retrieve movie data from an external API and dynamically render it on the website.

• Routing: Implement navigation within the website using React Router to create different pages for popular movies, top-rated movies, search results, and more.

• Error handling: Create a Page Not Found page to handle invalid routes or missing content.

• Tailwind concepts: Familiarized myself with the utility-first CSS approach and learn how to apply responsive styles to enhance the user interface.

• Props: Understand the concept of passing data from parent components to child components using props, allowing for dynamic content rendering.

• Light/Dark Mode: Created an effect to change from light to dark mode.

Next Goals

Moving forward, here are some potential next goals for Film Haven:

• Converting the website into a mobile app to reach a wider audience and provide a more native experience.

• Adding geolocation features to enable users to find nearby theaters, view showtimes, and purchase tickets directly from the app.

• Implementing user authentication and user profiles to allow users to save their favorite movies, write reviews, or create personalized watchlists.

• Integrating social features such as sharing movie recommendations, following other users, or participating in movie discussions.

These next goals can help enhance the functionality and user engagement of Film Haven, making it a comprehensive platform for movie enthusiasts.