DEV Community: Adam Azuddin

The Power of State Management in Front-End Web Development: Introducing Zustand

Adam Azuddin — Fri, 02 Jun 2023 09:03:07 +0000

Hey Coders,

Today, I want to share with you a realization that has completely transformed my approach to front-end web development: the importance of state management. In this blog post, we'll explore what state is in simple terms, and I'll illustrate its significance through a technical example using a movie list search project I'm currently working on. Moreover, I'll introduce you to Zustand, an alternative to Redux that is beginner-friendly and powerful. So, let's dive in!

Understanding State: A Simple Explanation

In the world of front-end development, state refers to the data that changes and affects the behavior of our application. It represents the current condition or snapshot of our user interface at any given moment. Imagine a movie list search application where users can type keywords to find relevant movies. The state of this application would include the user input, the list of movies fetched, and any other relevant data.

Technical Example: Movie List Search

To better grasp the concept, let's explore a technical example using a movie list search project. Assume you're building a movie search feature where users can enter keywords and receive a list of movie suggestions in real-time. Once they click on a movie suggestion, you want to redirect them to a movie details page. However, passing the entire JSON object for the movie to the link could be too long and inefficient.

Enter Zustand: A Simple and Powerful State Management Solution

At this point, you may have heard of Redux, a popular state management library in the React ecosystem. While Redux offers powerful features and benefits, it can be quite complex, especially for beginners. Instead, I recommend using Zustand, a lightweight state management library with a simple API and minimal boilerplate. You can quickly install Zustand via npm and get started right away.

Using Zustand in Your Movie List Search Project

To tackle the movie details page problem in our example, Zustand comes to the rescue. First, install Zustand in your project by running the following command in your terminal:

npm install zustand

Next, define a global state using Zustand. Create a new file called movieStore.js and import Zustand:

import create from 'zustand';

Now, let's define our global state using Zustand. In movieStore.js, define a store by calling create() and providing it a store configuration:

const useMovieStore = create((set) => ({
  selectedMovie: null,
  setSelectedMovie: (movie) => set({ selectedMovie: movie }),
}));

In the above code, we define a selectedMovie property in our state, initially set to null. We also define a setSelectedMovie function, which allows us to update the selectedMovie value.

Now, you can import and use the useMovieStore hook in any component that needs access to the global state:

import { useMovieStore } from './movieStore';

const MovieDetailsPage = () => {
  const setSelectedMovie = useMovieStore((state) => state.setSelectedMovie);
  const movie = // Fetch movie details from an API or local storage

  // Handle movie click event
  const handleMovieClick = () => {
    setSelectedMovie(movie);
    // Redirect to the dynamic route '/details/[movieName]'
  };

  return (
    <div>
      {/* Render movie details */}
      <button onClick={handleMovieClick}>Go to Movie Details</button>
    </div>
  );
};

In the MovieDetailsPage component, we import the setSelectedMovie function from the useMovieStore hook.

We also fetch the movie details from an API or local storage and store it in the movie variable. When the user clicks on the movie, we call the setSelectedMovie function, passing in the movie object. This updates the selectedMovie value in our global state.

With Zustand, the updated selectedMovie value will be available to any other component that uses the useMovieStore hook. This means that when the user is redirected to the movie details page, we can retrieve the selected movie from the global state without having to pass a lengthy JSON object in the URL.

Conclusion: Planning Ahead for State Management

Through my movie list search project and the discovery of Zustand, I've come to realize the crucial role state management plays in front-end web development. Properly managing state allows us to efficiently handle data and ensure a smooth user experience. While Redux is a well-known solution, it can be overwhelming for beginners. Zustand offers a beginner-friendly alternative that simplifies state management without sacrificing power and flexibility.

Remember, before diving into coding, it's essential to plan your state management strategy. Think about the data that will change, the interactions between components, and how you can organize your state to ensure seamless communication and data flow throughout your application. Zustand provides a user-friendly approach to global state management, enabling you to build robust and maintainable applications.

So, embrace the power of state management and leverage tools like Zustand to make your development journey smoother and more enjoyable. Happy coding!

Building My Movie List Website: A Progress Update

Adam Azuddin — Fri, 26 May 2023 06:43:57 +0000

Introduction:

Embarking on a personal project is always an exciting endeavor, and for me, creating a movie list website has been a thrilling journey so far. In this blog post, I want to share my progress and accomplishments, as well as some of the challenges I encountered along the way. With the website already connected to the TMDB API and a handy JavaScript library assisting with the implementation, I'm proud of how far I've come. Let's dive into the details!

Connecting to the TMDB API:

To provide an extensive collection of movie information, I decided to integrate my website with the TMDB (The Movie Database) API. This API offers a wealth of data, including movie details, ratings, reviews, and much more. By establishing a connection to the API, I gained access to a vast repository of movie-related information.

Simplifying the Search Functionality:

To enhance the user experience, I utilized a JavaScript library called "themoviedb-javascript-library." This library, available on GitHub at https://github.com/cavestri/themoviedb-javascript-library, proved to be a valuable tool. It simplified the implementation of the search functionality, allowing users to easily find movies by title, genre, or any other relevant criteria. With this library, searching for movies became a breeze.

Creating Dynamic Routes:

One of the significant milestones in my project was the creation of dynamic routes. By implementing a dynamic route, "/details/[movieName]," I enabled users to view detailed information about a specific movie. The challenge, however, lay in passing all the JSON data from the movie list into a new page.

Overcoming JSON Data Challenges:

While the task of transferring all the JSON data from one page to another initially posed a challenge, I found a practical solution. Instead of passing the entire JSON data, I opted to refetch the necessary information by making a call to the TMDB API. By including the movie name as a query parameter and selecting the first JSON data from the list of results, I could ensure the desired movie details were readily available on the new page.

Upcoming Updates and Enhancements:

With my progress so far, I'm thrilled to share that I'm making great strides towards completing my movie list website. In the upcoming week, I plan to focus on improving the user interface (UI) and merging the home-page branch into the main project. By enhancing the visual appeal and usability of the website, I aim to provide a seamless browsing experience to users.

Additionally, next week's agenda includes the implementation of functionality to sort and filter movies based on categories. This will enable users to view only movies or TV shows, tailoring their browsing experience to their preferences.

Conclusion:

Creating a movie list website has been an exhilarating experience, and I'm delighted with the progress I've made so far. By connecting my website to the TMDB API and utilizing a JavaScript library, I've achieved seamless integration and simplified the search functionality. Overcoming challenges related to passing JSON data and dynamically routing to movie details has been a significant milestone.

Looking ahead, I'm excited to refine the user interface, merge branches, and introduce new features like sorting and filtering options. Stay tuned for more updates on my movie list website project.

Screenshots

Hello World!

Adam Azuddin — Mon, 08 May 2023 10:00:03 +0000

Greetings fellow developer! I'm Adam from Malaysia and I'm documenting my process of building full-stack projects for my portfolio. Please provide some feedbacks, it would be really helpful to me!

My first project

I'm building a movie list full-stack project using NextJS. I firat got this idea while browsing MyAnimeList(yes I've quite a free time) and thought their app was really good! I'm thinking of building a web app with at least these unique functionalities:

User can create custom lists and share them through social media like Instagram and Twitter.
Each movies and episodes on a series can be commented and replied by anyone
User can view available streaming services where that movies or show is available on their region

I plan to add those features alongside basic movie list features, like rate a movie, ad to watch list, etc

Planning

I create a gantt chart using notionby using this template. The roadmap last for about 2 months including planning and testing. Here's my finished plan and my progress so far.

Final thoughts

I hope this project come to live one day and benefit even one more person. This journey sure is a long one but I hope with the support of the tech community I can get there and hopefully others like me too! Let's help each other at least on a very small detail of their coding live!