Developing a Web App to Fetch and Display Movie Data
Website
Overview
This is the client-side interface for a movie application, interacting with a server-side REST API and a database (movie_api) to fetch and display movie data. The app is built with React and offers a dynamic, seamless user experience with real-time content updates.
Bootstrap ensures a responsive, mobile-friendly design that adapts across devices. The interface allows users to explore movie details, reviews, and ratings. Integration with the REST API ensures the app stays up-to-date with the latest movie releases and information.
Role
Platform
Duration
Technology
Tools
Developer
Desktop
2,5 months
React, React-Redux, Node JS, React-Router-Dom, MongoDB, Express
VS Code
#Steps
Developing Process
The myFlix-client app development process began by defining the core functionality: a movie app interface that interacts with a server-side REST API for user management and movie data. The app was built using React for the front-end, leveraging React-Bootstrap for styling and responsiveness, and Redux for state management. The app allows users to sign up, login, update their personal information, and create a list of favorite movies. I used Axios to make asynchronous API calls to fetch and update data. The development setup was done using Parcel as a bundler for efficient asset management. After building the core functionality, I implemented routing using React Router DOM to navigate between different pages such as movie details and user profile. I ensured the interface was responsive across devices with Bootstrap and SCSS for custom styles. For local development, I cloned the repository, installed dependencies with npm install, and started the app using Parcel. Throughout the process, I focused on building a user-friendly and functional UI that connects seamlessly with the server-side API, enabling users to manage their accounts and favorite movies.
#Steps
Next
Gather feedback from real users to identify areas for improvement.
Add advanced features like notifications and movie trailers.
Improve authentication by allowing users to log in with third-party services like Google.
Expand functionality by adding a Watchlist feature, ratings and reviews, and social sharing options.
#Learning
Takeaways
I learned how to build dynamic, component-based user interfaces.
Gained experience in creating responsive layouts with React-Bootstrap.
I also learned how to manage complex states across the app using Redux, ensuring smooth data flow and centralized state management.
Improved skills in API integration, fetching data with Axios, and handling asynchronous operations to display movie data dynamically.
Gained knowledge in implementing user authentication, including sign-up, login, and secure password management.
Learned how to handle page navigation and dynamic routing using React-Router-DOM for seamless transitions between different parts of the application.
Developed skills in debugging, troubleshooting, and optimizing performance during development to ensure a smooth user experience.
