Excited to share my latest project, Movies App, where I've combined my passion for web development with my love for cinema! Here are some key highlights:
Semantic HTML & Responsive Design: Created an HTML file with a semantic structure, incorporating header, main, and footer sections. Utilized CSS to ensure a visually appealing design across various screen sizes, implementing a responsive layout with CSS Flexbox/Grid.
Dynamic Data Integration: Leveraged JavaScript's Fetch API to fetch movie data from themoviedb API endpoint, displaying movie posters, titles, genres, and release years in a grid/list format.
Enhanced User Experience: Implemented search functionality allowing users to search for movies by title and added filtering options by genre and release year using dropdown menus/checkboxes. Additionally, incorporated pagination for smoother loading and a movie details modal for more comprehensive information on selected movies.
Performance Optimization: Improved performance by lazy-loading images and optimized cross-browser compatibility, ensuring seamless functionality across different browsers and devices.
Error Handling & Documentation: Implemented error handling for failed API requests, providing user-friendly error messages. Documented code using JSDoc conventions, offering clear explanations of functions, parameters, and return values.
Testing & Readability: Wrote unit tests for key functions using a testing framework like Jest and created a README file with comprehensive instructions on building, running, and testing the application.
Additional Features: Added a dark mode toggle using CSS custom properties for enhanced accessibility and incorporated subtle UI animations using Animate.css, further enhancing the overall user experience.