Personal Frontend Project using HTML, CSS, and JS, built with mobile-first principles.
Dismoviery is a dynamic web application that allows users to search for movies, filter results, and discover new favorites. Leveraging the TMDB API, the site offers a rich user experience with features like user authentication, personalized watchlists, and detailed movie information.
- Dynamic DOM manipulation.
- ES6
- HTTP requests to an external API (TMDB API)
- Usage of Firebase Authentication and Firestore
The main page features the most interesting lists of movies for the user, available at a quick glance.
Sort and search movies using various criteria.
Utilize filters like genre, release year, and more to find new movies.
The purpose of this feature is to explore and discover new movies and play around with the different criteria.
Secure login and registration with Firebase Auth.
Save movies to Favorites or Watch Later lists.
Open any movie card to display in-depth details with trailers, synopsis, and user interaction.
The design approach starts with the mobile experience first, ensuring optimal usability and engagement on smaller screens. I prioritize content and functionality that are essential for on-the-go users, leading to a clean and intuitive interface on mobile devices. This mobile-first strategy also lays a solid foundation for scaling up to larger screens with a consistent user experience.
Here's how Dismoviery looks on mobile devices versus desktops:
| Mobile View | Desktop View |
|---|---|
 |
 |
By focusing on mobile, we ensure that the website is accessible to the widest possible audience, providing a seamless experience across all devices.
- HTML5
- CSS3
- JavaScript
- Firebase
I utilized Trello for managing my project's tasks and timelines efficiently. Below is a snapshot of my Trello board mid-development:
