Back to Portfolio
Web Development
Vidlify
Video rental service
Client
Bravework Studio
Year
2025
Tools Used
HTMLTailwind CSSJavaScriptTypeScriptReactNext.jsNode.jsMongoDB
Project Video
Project Overview
Developed a full-stack video rental service website, Vidlify, enabling users to browse, rent, and manage their favorite movies online. The platform provides a seamless and intuitive experience for both customers and administrators.
Challenges
- Implementing dynamic data sorting functionality where users can sort data by the values of each column, which presented complexity in query construction and front-end state management.
- Designing and implementing pagination using the Lodash utility to effectively display a maximum of 10 items per page, ensuring efficient data loading and a clean user interface. Developing a robust filtering system that allows users to filter movies based on their genres, requiring careful handling of database queries and dynamic UI updates.
- Migrating separate frontend and backend applications into a single Next.js project for streamlined deployment and free hosting, requiring a significant learning curve with the framework.
Solutions
- Developed robust backend API endpoints with flexible query parameters to handle sorting requests based on various column values. On the frontend, implemented logic to dynamically construct and send these requests, and re-render the data accordingly.
- Utilized the Lodash utility functions to divide the dataset into manageable pages. Implemented front-end logic to control the display of only 10 items per page and provide navigation controls for users to move between pages.
- Implemented genre-based filtering by extending the backend API to accept genre parameters, filtering the movie data before sending it to the frontend. On the frontend, created interactive genre selection components that trigger these filtered data requests and update the displayed movies.
- Successfully refactored the project into a monolithic Next.js application, leveraging its full-stack capabilities for API routes and server-side rendering, enabling deployment to platforms offering free tiers for Next.js applications.