I built a MERN stack web application that allows users to create a watchlist of their favorite movies and tv-shows. Using an open source API, I fetched movie data and displayed it in an easy-to-use interface. Users can add movies to their watchlist by clicking a "heart" button, which triggers a request to store the selected data in a MongoDB database. To ensure data security, users must authenticate themselves before saving or loading movies. The state management of the application was mainly done using Redux and localStorage, which allows for smooth navigation and improved user experience. One of the key challenges I faced was managing the complexity of Redux in the context of the application, but with careful design and testing, I was able to create a seamless user experience that met my expectations. On the client-side, I used Reactjs to build the user interface and utilized Axios to fetch data from the open source API. To enhance the user experience, I implemented React Loader Spinner and Framer Motion. Additionally, I used React Icons to add graphical elements to the interface, and Styled Components for custom styling. On the server-side, I utilized several technologies to ensure secure and efficient data management. To encrypt user passwords, I used Bcryptjs, and I utilized Config and DotEnv for secure configuration management. To parse cookies, I used Cookie Parser, and to allow for cross-origin resource sharing, I implemented Cors. To authenticate users, I used JsonWebToken and Mongoose, which allowed for smooth interaction with MongoDB. Overall, this project allowed me to deepen my understanding of React, Redux, and server-side development, and improved my skills in secure data management. By utilizing a range of technologies, I was able to create a seamless user experience for the end user, and learned valuable lessons about the importance of careful design and testing in complex projects.