In the world of web development, creating a practical application that solves real-world problems is an exciting challenge. In this blog post, I want to share my journey of building a weather report app using React and Redux. This project allowed me to dive deep into front-end technologies and learn valuable lessons along the way.

Project Overview

The weather report app I developed provides users with real-time weather information for a given city. It displays the current temperature, humidity, and a brief description of the weather conditions. Users can search for any city and instantly receive the latest weather data.

Technologies Used

I decided to build the weather report app using React and Redux due to their powerful combination for managing state and building interactive user interfaces. Additionally, I utilized the Redux Thunk middleware for handling asynchronous actions, which was essential for fetching weather data from an API. For styling I used Sass for getting much more clean styling. I utilized OpenweatherAPI for data fetching.

Challenges Faced

Throughout the development process, I encountered several challenges. One notable of them was effectively managing asynchronous API calls using Redux Thunk. Learning to structure my actions and reducers to handle loading, success, and error states was a crucial step. At the beginning of the time, it was very hard for me to understand how I have to create a project structure, but after watching 2-3 YouTube videos I clarified it.

Some screenshots from a file structure

Redux part file structure:

React components:

Styling part:

Development Process

I followed a component-based architecture in React, breaking down the user interface into reusable components. This allowed me to keep my codebase organized and maintainable. In this part, I followed some important steps:

• Created Redux action types (e.g., FETCH_WEATHER_REQUEST, FETCH_WEATHER_SUCCESS, FETCH_WEATHER_FAILURE).
  Implemented action creators for these actions.

• Created a Redux Thunk action to fetch weather data.
  Used async/await function to make API requests to OpenWeatherMap.

• In the search bar component, create an input field where users can type a location. Added a button that users will click to initiate the weather search.

• Attached is an event handler to the search button.
  When the button is clicked, dispatch the Redux Thunk action to fetch weather data using the input value.

• Updated the weather display component to show fetched weather information.
  Displayed temperature, weather description, and an icon based on the condition.

• Handled API request errors and display error messages to users. When a request gives an error, an error message is shown in the component.

• Handle API request loading and display loading messages to users. In this part I used ready HTML/CSS written Loading animation.

  I utilized this loader: UI Verse Loader

App UI

Loading screen:

Success screen:

Error screen:

Key Takeaways

1. Redux State Management: Implementing Redux for state management taught me the importance of centralizing and controlling application data. It also provided a clear way to handle asynchronous operations while maintaining a predictable state.

2. Asynchronous Actions: Working with Redux Thunk gave me insight into managing asynchronous actions. This was particularly valuable when fetching weather data from an external API.

3. Code Structure: Organizing the project into modular components not only enhanced the readability of the code but also simplified debugging and maintenance.

Code Highlights

Main store file, index.js:

//main store file: index.js

import { createStore, applyMiddleware, compose } from "redux";
import rootReducer from "./reducers";

import thunkMiddleware from "redux-thunk";

const env = "developement";
const composeEnhancers =
  env === "developement"
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
    : compose;

const store = createStore(
  rootReducer,
  composeEnhancers(applyMiddleware(thunkMiddleware))
);

export default store;

Reducers part:

//Reducers part:
const initialState = {
  data: [],
  loading: true,
  error: false,
  errorMessage: null,
  success: false,
};
export const weatherReducer = (state = initialState, action) => {
  switch (action.type) {
    case "FETCH_WEATHER_REQUEST":
      return {
        ...state,
        success: false,
        loading: true,
        error: false,
      };

    case "FETCH_WEATHER_SUCCESS":
      return {
        ...state,
        loading: false,
        data: action.payload,
        error: false,
        success: true,
      };

    case "FETCH_WEATHER_FAILURE":
      return {
        ...state,
        error: true,
        data: [],
        loading: false,
        errorMessage: action.payload,
        success: false,
      };

    default:
      return state;
  }
};

//Instead of one reducer, I created root reducer:
import { combineReducers } from "redux";
import { weatherReducer } from "./weather";

const rootReducer = combineReducers({
  weather: weatherReducer,
});

export default rootReducer;

Actions part:

const FETCH_WEATHER_REQUEST = "FETCH_WEATHER_REQUEST";
const FETCH_WEATHER_SUCCESS = "FETCH_WEATHER_SUCCESS";
const FETCH_WEATHER_FAILURE = "FETCH_WEATHER_FAILURE";

import API_KEY from "../../apikey";

export const fetchPosts = (location) => {
  return async (dispatch) => {
    dispatch({
      type: FETCH_WEATHER_REQUEST,
    });

    try {
      const response = await fetch(
        `https://api.openweathermap.org/data/2.5/weather?appid=${API_KEY}&q=${location}&units=metric`
      );
      const data = await response.json();
      // console.log(data);
      dispatch({
        type: FETCH_WEATHER_SUCCESS,
        payload: data,
      });

      if (data.cod !== 200) {
        dispatch({
          type: FETCH_WEATHER_FAILURE,
          payload: data.message,
        });
      }
    } catch (error) {
      dispatch({
        type: FETCH_WEATHER_FAILURE,
      });
    }
  };
};

Search.js file:

import React, { useState } from "react";
import { fetchPosts } from "../store/actions/weatherActions";
import { useDispatch } from "react-redux";

export default function Search() {
  const [inputVal, setInputVal] = useState("Baku");
  const dispatch = useDispatch();

  const sendRequest = () => {
    dispatch(fetchPosts(inputVal));
  };

  return (
    <div className="search-box">
      <input
        className="search-box--input"
        type="text"
        placeholder="search "
        value={inputVal}
        onChange={(e) => {
          setInputVal(e.target.value);
        }}
      />
      <button className="search-box--btn" onClick={sendRequest}>
        Search
      </button>
    </div>
  );
}

Lessons learned

Reflecting on this project, I realized the significance of planning before diving into coding. Creating a clear roadmap and understanding the flow of data in Redux proved essential. I also learned to embrace challenges as learning opportunities, which ultimately led to a more robust application

Conclusion

Building the weather report app was an enriching experience that deepened my understanding of React, Redux, and asynchronous programming. The satisfaction of seeing a functional application come to life from scratch is truly rewarding. If you're looking to expand your front-end development skills, consider taking on a project that piques your interest and challenges you to grow.

Connect with me on GitHub and feel free to explore the live demo of the Weather Report App!

Hello, fellow developers! My name is Mirjabbar, and I'm excited to share my experience of creating a movie app using basic React knowledge. As someone relatively new to React, I wanted to challenge myself and build a simple yet functional app that allows users to browse and search for their favorite movies. Let's dive into the journey of how I created this app and the lessons I learned along the way.

• Project Overview / Tasks

The goal of my movies app was to provide users with a user-friendly interface to explore a vast collection of movies. Key features of the app include:

1. Sign up on www.omdbapi.com to get an API key for accessing movie data.

2. Use Postman to explore the API request and response to understand the data structure.

3. Create a new React project and install necessary dependencies, including react-icons, react-router-dom and sass.

4. Set up a state in your React component to store the list of movies.

5. Display the list of movies in your application using components and JSX.

6. Implement a scroll effect to improve the user experience while browsing through movies.

7. Use React Router to create pages for different sections of your movie application.

8. Implement active link logic to highlight the currently active page in the navigation.

9. Call the OMDB API from your React application to fetch movie data using the API key. Use Promises for handling asynchronous requests.

10. Add a loading state or loaders to display feedback while the data is being fetched from the API.

11. Add a hover effect and favorites icon to make movie items interactive.

12. Implement the functionality to save movies to the favorites list.

13. Allow users to remove movies from the favorites list.

14. Use local storage to store the favorites list data in the browser.

15. Retrieve the favorites list from local storage when the app loads to maintain user preferences.

• Technologies Used

For this project, I utilized the following technologies and tools:

1. React: As the core frontend library to build the user interface.

2. SCSS: For styling the app's layout.

3. OMDb API. The Open Movie Database.

4. Visual Studio Code: My code editor of choice.

• Development Process

1. Setting Up the Project: I began by creating a new React app using

   npm create vite@latest to scaffold the initial project structure.

2. Fetching Movie Data: To display movie information, I integrated the OMDb API into my app and used async/await syntax to make API requests and fetch movie data. This approach simplified the code and made it easier to handle asynchronous operations.

3. Designing the UI: I focused on creating a clean and intuitive user interface. React's component-based structure allowed me to organize and reuse UI elements efficiently. I divided the project structure into small and reusable components, so it made it easier to upgrade this code.

4. Implementing the Routing Pages: For routing pages, I used react-router-dom

   I created a pages folder for making easier the process of page changing.

5. Implementing the Search Functionality: For this part I used React state and event handling to capture user input and trigger movie searches.

6. Implementing the Add to Favorites Functionality: This was a challenging part for me as a beginner. If user clicks Add to favorites button proper movie sent to favoriteMovies array and also it stores its information in localStorage . This part was new for me, but it was easy for handling info inside localStorage . If selected movie has already been added to the favorites user clicks and movie data deletes from storage.

7. Implementing the Favorites page: For this part, if the user goes to the favorites page, there is no need for a new API request, it is very bad for the performance of the app. So on the favorites page, movies' data comes from local storage.

• Key Learnings

Throughout this project, I gained several valuable insights:

1. React Fundamentals: Building this app strengthened my understanding of React components, props, state, and event handling.

2. API Integration: Integrating external APIs can be challenging, but it's a crucial skill for building dynamic apps.

3. UI/UX Design: Design plays a vital role in creating user-friendly apps. I learned about layout design, typography, and color schemes.

• Code Samples

Search Component - Handling User Input:

export default function Search({ movieInput, setMovieInput }) {
  return (
    <div className="search--box">
      <input
        className="search--box-input"
        type="text"
        placeholder="search movie"
        value={movieInput}
        onChange={(e) => {
          setMovieInput(e.target.value);
        }}
      />
    </div>
  );
}

Movie Component - Handling Favorites State:

const isFavorite = favoriteMovies.some((movie) => movie.Title === Title);

  function handleFavorites() {
    if (isFavorite) {
      const updatedFavorites = favoriteMovies.filter(
        (movie) => movie.Title !== Title
      );
      setFavoriteMovies(updatedFavorites);
    } else {
      setFavoriteMovies([newFav, ...favoriteMovies]);
    }
  }

Fetching data, and sending it to local storage:

useEffect(() => {
    localStorage.setItem("favorites", JSON.stringify(favoriteMovies));
  }, [favoriteMovies]);

  useEffect(() => {
    const localValuesGet = JSON.parse(localStorage.getItem("favorites"));
    setStoredFavorites(localValuesGet);
  }, [favoriteMovies]);

  async function getMovies(url) {
    const data = await fetch(url);
    const res = await data.json();
    setMovies(res);
  }

  useEffect(() => {
    getMovies(`http://www.omdbapi.com/?s=${movieInput}&apikey=738237a0`);
  }, [movieInput]);

• Conclusion

Building the movie app with basic React knowledge was a fulfilling experience. It allowed me to apply what I learned and push my boundaries as a developer. I hope my journey inspires you to take on your projects and continue learning.

Feel free to check out the the code on GitHub.

Happy coding!