🎬 Cinemood – Mood-Based Movie Discovery App

Cinemood is a frontend web application that allows users to discover movies based on their current mood.
The project integrates movie data from the OMDb API and trailer videos from the TMDb API. It was created as a personal project to practice API integration, state management, and frontend development with React.

📦 Technologies

• React
• React Router DOM
• Vanilla CSS
• React Fast Marquee
• Clsx
• @tabler/icons-react

✨ Features

Mood-Based Movie Discovery

• Select a mood to fetch movies that match it.
• Display movie details: title, plot, and poster.
• Show trailers from YouTube when available.

API Integration

• OMDb API – Fetches movie details (title, plot, IMDb ID).
• TMDb API – Fetches movie trailers using IMDb ID.

User Experience

• Responsive design built with vanilla CSS
• Smooth scrolling effects with React Fast Marquee
• Interactive icons with Tabler Icons

🎯 User Interactions

• Select moods from a dropdown or buttons
• Click movies to view details and trailer links
• Scroll horizontally through movie lists using marquee effect

👩🏽‍🍳 Development Process

• Set up a React project with component-based architecture.
• Implemented routing between main pages using React Router DOM.
• Integrated OMDb API to fetch dynamic movie data.
• Used TMDb API to fetch trailers linked to movies.
• Built UI components with vanilla CSS for layout and responsiveness.
• Added marquee scrolling for interactive movie lists using React Fast Marquee.
• Incorporated Tabler icons for clean, intuitive icons.
• Tested API calls and ensured smooth data rendering on the frontend.

📚 What I Learned

🧠 API Integration & State Management

• Learned how to combine data from two APIs (OMDb & TMDb) effectively.
• Managed React state to handle asynchronous API calls and loading states.

🎨 Frontend Development

• Built reusable React components.
• Designed a responsive UI using CSS without frameworks.

🔍 Debugging & Data Handling

• Handled cases where movie trailers were missing.
• Learned to map API responses to frontend components efficiently.

📈 Overall Growth

• Improved understanding of React, API usage, and dynamic frontend rendering.
• Learned to structure a small project for scalability and readability.

💭 Possible Improvements

• Add Framer Motion animations for smoother UI interactions.
• Use Tailwind CSS for faster and more maintainable styling.
• Implement advanced movie filtering (genre, release year, ratings).
• Enhance UI/UX for mobile devices. mobile first approach

🚦 Running the Project

To run the project locally, follow these steps:

1. Clone the repository to your machine.
2. Install dependencies: npm install
3. Start the development server: npm start
4. Open the app in your browser at: http://localhost:3000

🍿 Demo Video

IMG_2148.mp4