blood stream

Inspiration

What it does

How we built it# Horror Movie Frankenstein

Inspiration

The project was inspired by the challenge of stitching together incompatible technologies into a cohesive, powerful application, much like Frankenstein's monster. We aimed to create a horror movie discovery platform that goes beyond basic streaming apps by combining advanced filtering, smart recommendations, and immersive horror-themed UI elements, including blood drip animations for an authentic spooky atmosphere.

What it does

Horror Movie Frankenstein is a sophisticated horror movie discovery app that allows users to explore and find horror films using advanced multi-parameter filtering. Users can filter by year ranges, ratings, runtime, and dynamic genres fetched from the TMDb API. The app features a smart recommendations engine that combines TMDb's recommendations and similar movies APIs for personalized suggestions. It includes a watchlist for saving favorites, detailed movie pages with trailers, and an atmospheric horror-themed interface with blood drip effects and fog animations to enhance immersion.

How we built it

We used Kiro for spec-driven development, starting with comprehensive specifications in requirements.md, design.md, and tasks.md. Kiro facilitated vibe coding for complex features like the FilterPanel component, which integrates multiple API parameters, and the MovieRecommendations component that deduplicates results from two TMDb endpoints. Custom hooks (useGenres, useMovieRecommendations) automated API integrations, while steering docs ensured horror theme consistency and performance optimizations. The app was built with React, TypeScript, and Vite, incorporating React Query for caching, Tailwind CSS for styling, and custom MCP extensions for horror effects like blood drip animations and atmospheric backgrounds.

Challenges we ran into

Combining incompatible technologies was the core challenge, such as stitching together multiple TMDb API endpoints with different data structures for filtering and recommendations. Managing complex state for real-time filter applications while ensuring smooth performance required careful integration of local and server state. Maintaining horror theme consistency across diverse components and optimizing animations for various devices added layers of complexity.

Accomplishments that we're proud of

We successfully created an advanced filtering system that surpasses typical movie apps, combining four API parameters seamlessly. The smart recommendations engine provides superior suggestions by merging incompatible data sources. We're proud of the immersive horror UI with blood drip animations and atmospheric effects, full accessibility support, and enterprise-level performance optimizations achieved in a hackathon timeframe. The app integrates 6 TMDb endpoints plus YouTube API, with 8 reusable components and automated hooks reducing development time by 60%.

What we learned

Through this project, we learned the power of conversational AI tools like Kiro for rapid, spec-driven development and complex feature implementation. We gained insights into stitching incompatible technologies, effective state management for multi-API integrations, and maintaining thematic consistency in UI/UX. The experience highlighted the importance of performance optimization and accessibility in creating engaging user experiences.

What's next for Horror Movie Frankenstein

Future plans include expanding the recommendations engine with user preference learning, adding social features for sharing watchlists, integrating more horror-specific APIs for reviews and ratings, and enhancing the blood drip and atmospheric effects with interactive elements. We aim to deploy on more platforms and explore mobile app development to reach a broader audience of horror enthusiasts.

Challenges we ran into

Accomplishments that we're proud of

What we learned

What's next for blood stream

Built With

• and
• and-vite-as-the-core-framework-and-build-tool.-it-incorporates-react-query-for-data-caching-and-state-management
• animations
• atmospheric
• backgrounds.
• blood
• by
• conversational
• custom
• development
• drip
• effects
• extensions
• facilitated
• for
• horror-themed
• kiro
• like
• mcp
• spec-driven
• tailwind-css-for-styling
• the-project-was-built-using-react
• typescript
• was