Movie Catalog in Vanilla JS

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 source code 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.

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.js, DocumentFragment 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.js, search.js, infinite-scroll.js, utils.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.