Modern, easy-to-use IMDb and Kinopoisk clone web app, built with React, Redux, and Material UI
Main challenge was integrating complex features like dynamic API content, a search function, and watchlist & favorites options, all while ensuring smooth performance and fast load times on all devices.
I made the app fully responsive, providing a smooth and intuitive user experience on any device.
The hard part was making the Movie Information page fully responsive and good looking on every screen size. This page, being one of the most complex, featured around 50 individual elements.
99Films is a modern web app that helps users find movies, explore film details, and learn about actors. It works like popular platforms such as IMDb and Kinopoisk, with features like movie search, user watchlists, and a dark/light theme option.
The app includes key pages such as the category and genre, movie information, actor biography, and user account page, all displaying dynamic data from an API.
Framer Motion and Lottie animations create smooth transitions, while skeleton loading indicators improve usability.
Develop a modern, intuitive web app that provides a
comprehensive movie discovery experience
Ensure smooth integration of API-driven content with real-time
updates
Incorporate Framer Motion and Lottie animations to enhance
user interaction without compromising performance
Build a fully responsive interface that delivers a seamless
experience on all devices, from mobile to desktop
Implement key user functionalities like movie search,
personalized watchlists, and a
dark/light theme
toggle
To kick off the project, I explored major movie platforms like IMDb and Kinopoisk to understand their core functionality, user flow, and essential features.
For design inspiration, I looked at Netflix and Dribbble to get ideas for a cool UI.
The visual style of the UI was based on Material UI , utilizing React MUI components to ensure consistency and efficiency throughout the design. I chose Plus Jakarta Sans as the primary typeface, emphasizing readability and modern aesthetics. The color scheme was inspired by Netflix.
The logo, designed by talented graphic designer Dovran Kakabayev, added a unique touch to the brand identity, reflecting the modern and creative spirit of the app.
The development started by building the structure with React JS and using React Router for smooth page navigation. Redux was added for easy state management, making features like movie search, watchlists, and favorites work seamlessly. This setup made the app scalable and easy to maintain.
In the next phase, I used React MUI to create sleek, responsive components. Framer Motion added smooth animations for a dynamic experience. I used Lottie to create 404 and network error routes.
React
Redux
React Router
Framer Motion
Lottie
The project delivered a modern, user-friendly web app that works smoothly on all devices. 99Films offers detailed movie info, dynamic search, and interactive elements. The app launched successfully and quickly gained user interest.