Movie Catalog in Vanilla JS

Web
||

This is an interactive movie catalog web page written to showcase skill in web fundamentals. It is a one-page grid designed to be good-looking, functional and fluid, with responsiveness and accessibility in mind. It includes basic search functionality using the API by themoviedb.org. It has been written in Vanilla JS and CSS, using no reactive framework or UI component set. Unit and end-to-end tests were written for basic requirements. The sourcecode lives at https://github.com/niklebe/Frontend-MovieRama-NickLempesis.

Development is powered by Vite, along with Vitest for unit testing and Playwright for end-to-end testing.

Performance Optimizations and Best Practices

This project implements several performance optimizations and follows good programming practices:

  1. Infinite Scrolling: Implemented in infinite-scroll.js, this technique loads content as the user scrolls, reducing initial load time and improving performance.

  2. Throttling: Used in search.js to limit the frequency of search function calls, preventing excessive API requests and improving performance.

  3. Document Fragments: In movies.jsDocumentFragment is used to batch DOM manipulations, significantly reducing reflow and repaint operations.

  4. Template Elements: HTML <template> elements are used for movie, review, and similar movie items, promoting code reusability and maintainability.

  5. Lazy Loading: Movie details (trailers, reviews, similar movies) are loaded only when a movie card is expanded, reducing initial load time and unnecessary API calls.

  6. FLIP Animation Technique: Used in movies.js for smooth transitions when expanding/collapsing movie cards, providing a better user experience without sacrificing performance.

  7. Error Handling: Comprehensive try-catch blocks are used throughout the codebase to gracefully handle and log errors.

  8. Modular Code Structure: The project is organized into separate modules (movies.jssearch.jsinfinite-scroll.jsutils.js) for better maintainability and separation of concerns.

  9. Environment Variables: Sensitive data like API keys are stored in environment variables, enhancing security.

  10. Responsive Design: CSS in main.css uses responsive design techniques to ensure the application looks good on various screen sizes.

  11. Asynchronous Operations: Extensive use of async/await for handling asynchronous operations, improving code readability and error handling.

  12. Unit and E2E Testing: Implemented with Vitest and Playwright respectively, ensuring code reliability and easier maintenance.

These optimizations and practices contribute to a faster, more efficient, and maintainable application.

 

More projects in web

Cover Image for NPM Package: Maps to PDF
NPM Package: Maps to PDF
Cover Image for Insumify: Order Management Platform in Next.js
Insumify: Order Management Platform in Next.js
Cover Image for Advanced Map Dashboard in React
Advanced Map Dashboard in React
Cover Image for Ptolemy: Fullstack Cultural Travel App
Ptolemy: Fullstack Cultural Travel App
Cover Image for Print Map Reports in Risk Evaluation Website
Print Map Reports in Risk Evaluation Website
Cover Image for MapTakeout: Web map to PDF
MapTakeout: Web map to PDF
Cover Image for Map against violence: geoenabling a web initiative
Map against violence: geoenabling a web initiative