npm install
npm run serve
npm run build
npm run lint
I set up the project through Vue CLI and installed essential dependencies like Vue, Vuex, Vue Router, Axios, and Bootstrap. These components formed the project's development.
I integrated an external provider—TMDb. I followed TMDb's authentication process, involving the acquisition of a request token, its validation via login credentials, and its subsequent exchange for a session ID via the authcallback. This ensured the users secure and seamless access to the app.
To steer the app's state management, I initiated a Vuex store.
I introduced state variables that tracked user authentication status
Umayrand session information.
The mutations and actions were behind the state updates,
offering the user interactions with the api.
Navigating the app via the Vue Router. With configuration of various routes views such as login, dashboard, movie details, search results, and the about page.
With a commitment to reusability, I made Vue components including the NavBar and its counterpart LoginNavBar. Movie cards made for both MovieList and SearchResults which displays code reusability.
User navigation was simplified with the use of Vue Router's component. This navigation allows the user to navigate to different sections of the app.
The implementation of a search feature using Axios, allowed the user to discover movies. By fetching and displaying search results, this feature increased user engagement
Dedicated views were sculpted to cater to distinct sections of the app. From the user's first step on the login page to the detailed terrain of movie information, search results, and more, each view orchestrated data fetching, user interactions, and visual rendering.
In the realm of user experience, I curated a dashboard showcasing rated movies and pertinent details. The vigilant Vuex store undertook the task of managing user session data and movie ratings, ensuring the continuity of the user's journey.
Designed a view dedicated to providing movie information including movie details, user ratings, and an interactive "Rate Me" button. In real-time with the TMDb API.
By using Bootstrap and CSS via aesthetics and diligent styling but most importantly responsive design, harmonizing the app's appearance across devices.
Made use of try catch error handlingv for failed API requests and user input errors
A stringent testing regimen, conducted across a spectrum of browsers and devices, ensured the app's resilience. Equipped with browser developer tools and Vue Devtools, I meticulously debugged and resolved issues, fostering an environment of unblemished user experience.
Deployment of via Vue CLI and Netlify.
Before the final curtain call, the app underwent rigorous testing to validate the seamless integration of all its features. This final check was complemented by the creation of comprehensive documentation, extending guidance on app usage, authentication, navigation, and the dynamic movie rating feature.
To sprinkle the app with an extra layer of delight, I contemplated the incorporation of optional enhancements such as user profile settings, sorting options, and user reviews. These optional features held the potential to amplify user engagement and satisfaction.
With the finish line in sight, I dedicated myself to a meticulous code review, emphasizing readability and adherence to best practices. Code sections were meticulously refactored to optimize performance and elucidate intricacies.
Secure user authentication to basic movie search, movie information, and a movie rating feature .
challenge: directly embedding the API key within the codebase. This approach exposed the key. This experience underscored the importance of securing sensitive information. I tried to use environment variables to confidentially manage the API key.
Early on, I realized that no backend server could introduce security vulnerabilities, particularly regarding Cross-Origin Resource Sharing (CORS). It would handle API requests and data.
Navigating the intricacies of implementing external user authentication through the TMDb API was a significant challenge. Orchestrating callback URLs and token exchanges demanded careful consideration. My journey was marked by gaining a deep understanding of these processes, ensuring users experienced a seamless and secure authentication journey.
During the process of authentication and session creation, managing errors was critical.
Integrating Vuex for authentication and session. Included Store structure, actions, mutations, and getters
The challenges I encountered and the solutions implemented collectively formed the project. From guarding the movie dashboard to user authentication and rating posting, led to revision regarding http requests using axios.